-----------------------------起先是我们造成习惯，后来是习惯造成我们。

day 51

Bootstrap  官方网站:   bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .item {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h3>栅格系统</h3>

    <div class="row">

        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>
        <div class="col-md-1 item">.col-md-1</div>

    </div>

    <div class="row">
        <div class="col-md-8 item">.col-md-8</div>
        <div class="col-md-4 item">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 item">.col-md-4</div>
        <div class="col-md-4 item">.col-md-4</div>
        <div class="col-md-4 item">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-8 item">.col-md-6</div>
        <div class="col-md-6 col-sm-4 item">.col-md-6</div>
    </div>

</div>

<hr>

<h4> 列偏移</h4>

 <div class="row ">
     <div class="col-md-3 item col-md-offset-3">Yuan</div>
 </div>

<h4>嵌套列</h4>
<div class="row">
    <div class="col-md-6 item">666</div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6 item">123</div>
             <div class="col-md-6 item">234</div>
        </div>
    </div>
</div>

<h4>列排序</h4>
<div class="row">
  <div class="col-md-9 item  col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 item col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

<hr>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-primary add_btn"> 添加</button>
            <table class="table table-hover table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="tbody">
                <tr class="danger">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>保安</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>李四</td>
                    <td>23</td>
                    <td>保安</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>24</td>
                    <td>销售</td>
                    <td>20000</td>
                    <td>
                        <button class="del btn btn-danger btn-sm">删除</button>
                        <button class="edit btn btn-info btn-sm">编辑</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>

    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/bootstrap.js"></script>

</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container">

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <h1 class="text-center">Yuan先生!</h1>
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <form>
                                <div class="form-group">
                                    <label for="user">姓名</label>
                                    <input type="text" class="form-control" id="user" placeholder="user">
                                </div>
                                <div class="form-group">
                                    <label for="age">年龄</label>
                                    <input type="text" class="form-control" id="age" placeholder="age">
                                </div>
                                <div class="form-group">
                                    <label for="dep">部门</label>
                                    <input type="text" class="form-control" id="dep" placeholder="dep">
                                </div>
                                <div class="form-group">
                                    <label for="salary">薪水</label>
                                    <input type="text" class="form-control" id="salary" placeholder="salary">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <span class="glyphicon glyphicon-shopping-cart"></span>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 15%;
              height: 600px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 85%;
              height: 600px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 30px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
</head>
<body>

<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜单一</div>
               <ul class="con hide">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>

<script>

     $(".title").click(function () {

         // $(this).next().removeClass("hide");
         // $(this).parent().siblings().children(".con").addClass("hide")
         //  jquery 的链式操作
          $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")
     })

</script>
</body>
</html>

Bootstrap 栅格 样式 组件 插件的更多相关文章

  1. BootStrap一页通（样式+组件+插件）

    bootstrap是一种前端框架,实现美观的页面效果.使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步. ...

  2. Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址

    Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...

  3. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  4. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  5. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  6. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  7. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  8. bootstrap学习以及其插件

    Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习boots ...

  9. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

随机推荐

  1. springmvc复习笔记----springmvc最简单的第一个例子：RequestMapping试水

    结构 用到的包 web.xml <url-pattern>/</url-pattern>中可以换成其他的后缀*.do ,*. sb  …… <?xml version=& ...

  2. web前端（5）—— 常用标签2

    以下三个不仅是常用标签了,还非常重要,所以请务必好好看,重要性从高到低: 盒模型div div标签是最常用最重要的,它可以把web页面分割成很多的小块分别管理 测试代码: <!DOCTYPE h ...

  3. c/c++ 模板与STL小例子系列<一 >自建Array数组

    c/c++ 模板与STL小例子系列 自建Array数组 自建的Array数组,提供如下对外接口 方法 功能描述 Array() 无参数构造方法,构造元素个数为模板参数个的数组 Array(int le ...

  4. 用好lua+unity，让性能飞起来——关于《Unity项目常见Lua解决方案性能比较》的一些补充

    <Unity项目常见Lua解决方案性能比较>,这篇文章对比了现在主流几个lua+unity的方案 http://blog.uwa4d.com/archives/lua_perf.html ...

  5. PHP匿名函数

    PHP匿名函数 匿名函数(Anonymous functions),也叫闭包函数(closures),允许临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值. 举例: &l ...

  6. May 27. 2018 Week 22nd Sunday

    All things come to those who wait. 苍天不负有心人. It is said that those who are patient can see what their ...

  7. Spring的AOP开发入门,Spring整合Junit单元测试(基于ASpectJ的XML方式)

    参考自 https://www.cnblogs.com/ltfxy/p/9882430.html 创建web项目,引入jar包 除了基本的6个Spring开发的jar包外,还要引入aop开发相关的四个 ...

  8. Codeforces Round #542 C. Connect 搜索

    C. Connect time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  9. ueditor百度编辑器中，多图上传后，图片顺序乱掉的处理方法

    上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.pus ...

  10. 【CQOI2011】放棋子

    [CQOI2011]放棋子 在一个n行m列的棋盘里放一些彩色的棋子,使得每个格子最多放一个棋子,且不同颜色的棋子不能在同一行或者同一列.有多少种方法? 例如\(,n=m=3\),有两个白棋子和一个灰棋 ...