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

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. SQL Server 2016新特性： 对JSON的支持

     SQL Server 2005开始支持XML数据类型,提供原生的XML数据类型.XML索引及各种管理或输出XML格式的函数.随着JSON的流行,SQL Server2016开始支持JSON数据类 ...

  2. Incorrect key file for table错误解决方法

    问题现象: alter table portal_app_xxxx_xxx add devno varchar(64) NOT NULL DEFAULT '' COMMENT '设备机编',add s ...

  3. irc 关键操作

    IRC 客户端: Textual 5 HexChat  IRC 用户密码常用命令: 用户密码: 忘记密码 如果太长时间没登录IRC,难免会忘记密码,那IRC有重置密码的功能吗?当然有,不过也是通过命令 ...

  4. [Hive_6] Hive 的内置函数应用

    0. 说明 Hive 的内置函数的基本操作 | 时间函数 | String 函数 | 条件语句 | explode | split | substring 1. 基本操作 查看函数 show func ...

  5. [Hive_3] Hive 建表指定分隔符

    0. 说明 Hive 建表示例及指定分隔符 1. Hive 建表 Demo 在 Hive 中输入以下命令创建表 user2 create table users2 (id int, name stri ...

  6. java.util.LinkedHashMap cannot be cast to xxx 和 net.sf.ezmorph.bean.MorphDynaBean cannot be cast to xxx

    java.util.LinkedHashMap cannot be cast to com.entity.Person 使用mybatis, resultMap映射的是实体类Person, 查询出来的 ...

  7. nodejs前后分离

    proxy: { '/api': { target: 'http://localhost:3000/', pathRewrite: {'^/api' : ''}, changeOrigin: true ...

  8. go标准库的学习-os

    参考https://studygolang.com/pkgdoc 导入方式: import "os" os包提供了操作系统函数的不依赖平台的接口 一开始简单举个例子: packag ...

  9. Redo丢失的4种情况及处理方法

    这篇文章重点讨论Redo丢失的几种情况,及每种情况的处理方法. 一.说明:1.以下所说的当前日志指日志状态为CURRENT,ACTIVE,非当前日志指日志状态为INACTIVE2.不用考虑归档和非归档 ...

  10. Python 文件编译为字节码的方法

    一般情况下 python 不需要手动编译字节码.但是如果不想直接 release 源代码给其他人,将文件编译成字节码,可以实现一定程度的信息隐藏. 1) 使用模块 py_compile 编译一个单文件 ...