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

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. java 获取当前系统可用字体名称

    //获取系统的字体 public static void getLocalFontFamily(){ GraphicsEnvironment ge=GraphicsEnvironment.getLoc ...

  2. 遍历结构体内部元素和值(Name and Value)

    代码: DataStruct.MessageStruct ms = new DataStruct.MessageStruct();//实例化结构体   //遍历结构体  foreach (System ...

  3. aspectj 简单的模拟权限检查、事务、日志记录

    package com.ij34.service; public class Hello { public void he() { System.out.println("执行Hello的h ...

  4. 数据库之mysql篇（2）—— mysql常识引入/用户授权

    常识引入 1.概念: 数据库:本质上是一个文件夹 1)查看本机所有数据库:show databases; 结束符:分号[:],一切数据行的结尾都以分号作为结束 2)创建数据库:create  数据库名 ...

  5. Linux Rsyslog日志集中管理

    Linux Rsyslog日志集中管理 一.Rsyslog简介 ryslog 是一个快速处理收集系统日志的程序,提供了高性能.安全功能和模块化设计.rsyslog 是syslog 的升级版,它将多种来 ...

  6. 【爬坑】远程连接 MySQL 失败

    问题描述 远程连接 MySQL 服务器失败 报以下错误 host 192.168.23.1 is not allowed to connect to mysql server 解决方案 在服务器端打开 ...

  7. ubantu下安装pip,python,pycharm,numpy,scipy,matplotlibm,pandas 以及sklearn

    ubuntu 安装 pip 及 pip 常用命令: https://blog.csdn.net/danielpei1222/article/details/62969815 ubuntu下不同版本py ...

  8. Kali 2.0 Web后门工具----WebaCoo、weevely、PHP Meterpreter

    注:以下内容仅供学习使用,其他行为均与作者无关!转载请注明出处,谢谢! 本文将介绍 Kali 2.0 版本下的三款Web后门工具:WebaCoo.weevely.PHP Meterpreter,这类工 ...

  9. mysql统计一年12月的数据

    效果图: select end) as 一月份, end) as 二月份, end) as 三月份, end) as 四月份, end) as 五月份, end) as 六月份, end) as 七月 ...

  10. Cobalt Strike 服务器搭建及使用

    Cobalt Strike使用中的一些坑(一) http://www.cnblogs.com/miaodaren/articles/7829793.html cobaltstrike3.8服务器搭建及 ...