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

day 51

Bootstrap  官方网站:   bootcss.com/

  1. <!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>
  2.  
  3.     <div class="row">
  4.  
  5.         <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>
  6.  
  7.     </div>
  8.  
  9.     <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>
  10.  
  11. </div>
  12.  
  13. <hr>
  14.  
  15. <h4> 列偏移</h4>
  16.  
  17.  <div class="row ">
         <div class="col-md-3 item col-md-offset-3">Yuan</div>
     </div>
  18.  
  19. <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>
  20.  
  21. <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>
  22.  
  23. <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>
  24.  
  25.                 </tbody>
                </table>
            </div>
  26.  
  27.     </div>
    </div>
  28.  
  29. </body>
    </html>
  1. <!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>
  2.  
  3. </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>
  4.  
  5.         <!-- 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>
  6.  
  7.             <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>
  8.  
  9. <div class="container">
  10.  
  11.     <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
  12.  
  13.     <!-- 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>
  14.  
  15.     <span class="glyphicon glyphicon-shopping-cart"></span>
    </div>
    </body>
    </html>
  1. <!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;
              }
  2.  
  3.           .right{
                  float: left;
                  width: 85%;
                  height: 600px;
                  background-color: lightgray;
  4.  
  5.           }
  6.  
  7.            .title{
                   text-align: center;
                   line-height: 30px;
                   background-color: #0e90d2;
                   color: white;
               }
            .item{
                padding: 10px;
            }
  8.  
  9.         .hide{
                display: none;
            }
        </style>
  10.  
  11.     <script src="jquery-3.3.1.js"></script>
    </head>
    <body>
  12.  
  13. <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>
  14.  
  15. <script>
  16.  
  17.      $(".title").click(function () {
  18.  
  19.          // $(this).next().removeClass("hide");
             // $(this).parent().siblings().children(".con").addClass("hide")
             //  jquery 的链式操作
              $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")
         })
  20.  
  21. </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. Android Demo Android ActionBarCompat-ListPopupMenu

    示例显示如何使用v7 appcompat库中的PopupMenu显示弹出式菜单.主界面使用V4支持库的ListFragment显示数据列表,当点击列表子项时,在子项下方弹出下拉菜单,并通过设置setO ...

  2. sql prompt 缩写 快捷键

    快捷键代码 1. df DELETE FROM 2. ssf SELECT * FROM  3. be BEGIN  END 4. ij INNER JOIN  5. ap ALTER PROCEDU ...

  3. Navicat 连接MySQL数据库 报错2059 - authentication plugin 'caching_sha2_password'的解决办法

    #在数据库的命令行中输入以下代码即可解决,密码必须要修改 可以再次执行将密码改回来. use mysql; ALTER USER 'root'@'localhost' IDENTIFIED WITH ...

  4. python高级（1）—— 基础回顾1

    Python基础回顾 认识变量 在学习了之前的Python零基础入门系列[洗礼灵魂,修炼Python](说明一下,这个系列现在回过来再来看这个名字确实好土啊,然后有些知识点感觉还不太精准,后期看如果有 ...

  5. 修正Percona Monitoring Plugins for Zabbix的一处脚本Bug

    今天小试了一把Percona Monitoring Plugins for Zabbix模板,自己辛辛苦苦写的那一大堆Python脚本,貌似用这个模板全都覆盖到了.但是,我也发现最新的版本percon ...

  6. MacOS远程Windows提示：远程桌面连接无法验证您希望连接的计算机的身份

    解决方法: 1.在Windows端,运行输入 “gpedit.msc”,打开本地组策略编辑器 2.依次打开[计算机配置]→[管理模板]→[windows组件]→[远程桌面服务]→[远程桌面会话主机]→ ...

  7. LeetCode算法题-String Compression（Java实现）

    这是悦乐书的第230次更新,第242篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第97题(顺位题号是443).给定一组字符,就地压缩它.压缩后的长度必须始终小于或等于原 ...

  8. Golang 并发简介

    并发概要 随着多核CPU的普及, 为了更快的处理任务, 出现了各种并发编程的模型, 主要有以下几种: 模型名称 优点 缺点 多进程 简单, 隔离性好, 进程间几乎无影响 开销最大 多线程 目前使用最多 ...

  9. Nmap参考指南(Man Page)

    Table of Contents 描述 译注 选项概要 目标说明 主机发现 端口扫描基础 端口扫描技术 端口说明和扫描顺序 服务和版本探测 操作系统探测 时间和性能 防火墙/IDS躲避和哄骗 输出 ...

  10. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...