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

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. Spark之UDAF

    import org.apache.spark.sql.{Row, SparkSession} import org.apache.spark.sql.expressions.{MutableAggr ...

  2. Scrapy代码实战

    1.Spider爬虫代码 # -*- coding: utf-8 -*- import scrapy from yszd.items import YszdItem class YszdSpiderS ...

  3. spring4笔记----报错publicid systemid之间要有空格的解决方法

    <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www. ...

  4. python3+beautifulsoup4爬取汽车信息

    import requests from bs4 import BeautifulSoup response = requests.get("https://www.autohome.com ...

  5. LeetCode算法题-Reverse Vowels of a String（Java实现-四种解法）

    这是悦乐书的第206次更新,第218篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第74题(顺位题号是345).编写一个函数,它将一个字符串作为输入,并仅反转一个字符串的 ...

  6. webpack模块定义和使用的模式

    在使用webpack作为模块加载工具时,我在想module.exports的模块应该是一种什么模式,最直接地思考是单例.不太确定,所以写一个简单例子做测试. 测试代码 singleton.js: va ...

  7. C#基础知识之读取xlsx文件Excel2007

    读取Excel 2007的xlsx文件和读取老的.xls文件是一样的,都是用Oledb读取,仅仅连接字符串不同而已. 具体代码实例: public static DataTable GetExcelT ...

  8. 使用Vuex心得

    之前一直都是看别人写的vuex感觉还挺好理解的,今天自己根据需求写了下vuex,一下子不知道怎么写了, 想要用好vuex还是先要知道原理: 参考好博客写的非常到位:https://www.cnblog ...

  9. js模块化规范—概念和模块化进化史以及模块化的问题

    模块的概念 一个复杂的项目开发中,会写很多js文件,一个js文件执行某些特定的功能,那么每个js都可以称为一个模块,这就是模块的概念 每个js模块内部数据/实现是私有的, 只是向外部暴露一些接口(方法 ...

  10. Loj #3055. 「HNOI2019」JOJO

    Loj #3055. 「HNOI2019」JOJO JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 ...