bootstrap_bootstrap.min.js-CSDN博客

本文链接：https://blog.csdn.net/zhao_crystal/article/details/81124057

一、bootstrap简单介绍

1.Bootstrap介绍

Bootstrap 是stwitter公司的两名前端设计师设计的

基于html css javascript的超强的前端框架

2.Bootstrap特点

Bootstrap 是一移动设备为优先，pc机，平板，手机。

Bootstrap所有的主流浏览器都支持，解决了浏览器兼容问题。

3.引入Bootstrap环境

登录网址https://v3.bootcss.com/

下载并解压

Fonts文件夹中为字体文件库

Css文件夹中：

Js文件夹中

另外，还需要通过http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js

下载jquery.min.js文件。

引入bootstrap环境的方法一：（在我的电脑上此方法不起作用，疑惑）

文档要求必须是html5
将必要的文件添加到代码中，如下introBoot1.html所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!--引入外部的bootstrap中的css文件-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <!--jquery文件，务必在bootstrap.min.js 之前引入-->
    <script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
    <!--再引入bootstrap.min.js -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body style="background: gray">
    <div class="container-fluid" style="background: white">
        <h1>产品展示</h1>
    </div>

</body>
</html>

引入bootstrap环境的方法二：

在联网的情况下，可以用下列方法实现：

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>

</body>
</html>

注意：以（移动）设备为优先的代码，需要在<meta charset="UTF-8">下边加入下面内容。

二、bootstrap布局容器：

1. 两个容器

(1)

<div class=”container”>固定宽度：1170px

所有的内容都写在此处

</div>

(2)

<div class=”container-fluid”>宽度为100%

所有内容都放在此处

</div>

2.排版的标签：

(1)标题默认字体的大小

(2)样式

.page-header 设置页头，给标题加一个分割线

<small></small> 副标题小一号

<big></big> 副标题大一号

<strong></strong> 推荐使用的加粗

<em></em>推荐使用的

<del></del>在字体上加删除线

(3)文本对齐方式

.text-left 左对齐

.text-center居中对齐

.text-right 右对齐

(4)英文大小写问题

.text-uppercase 大写

.text-lowercase 小写

.text-capitalize 首字母大写

3.列表：

(1)样式

.list-unstyled 去掉列表前面的符号，和去掉原有的格式

.list-inline 把列表的内容横向排列

4.自定义列表：

(1)样式

. dl-horizontal 使自定义列表中的内容横向排列

5.表格

(1)样式

.table 表格的一个基类（基本的类），如果加其他样式，都在.table的基础上。

.table-brodered 给表格加上外边框

.table-hover 鼠标悬停效果，鼠标移动到某行或单元格，该行变色

.table-striped 斑马线效果，即隔行换色

.table-condensed 使表格变得更加紧凑，（主要是缩小padding的值）

.table-responsive 给table的父元素加

以移动设备为优先，如果内容不能完全显示，会出现滚动条。

（2）状态类设置的是行tr或td，通过这些状态类可以为行或单元格设置颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

案例：（集合了标题“二”中1—5的内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!--&lt;!&ndash;引入外部的bootstrap中的css文件&ndash;&gt;-->
    <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">-->
    <!--&lt;!&ndash;jquery文件，务必在bootstrap.min.js 之前引入&ndash;&gt;-->
    <!--<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>-->
    <!--&lt;!&ndash;再引入bootstrap.min.js &ndash;&gt;-->
    <!--<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body style="background: gray">
<div class="container-fluid" style="background: white">
    <h1 class="page-header">产品展示</h1>
    <h2 class="panel-danger text-right">新闻<small>内容</small></h2>
    <p>
        但是后来我在调试的时候，遇到了一个问题就是（因为这个close-navbar的高度是0，所以我根本就不能选中他，
        <del>也就不能触发它上面</del>的动作了）
    </p>
    <h2 class="page-header">英文大小写</h2>
    <p class="text-uppercase">
        但是后来我在调试的时候html，PHP遇到了一个问题就是（因为这个close-navbar的高度是0，所以我根本就不能选中他，
        <del>也就不能触发它上面</del>的动作了）
    </p>
    <p class="text-lowercase">
        但是后来我在调试的时候html，PHP遇到了一个问题就是（因为这个close-navbar的高度是0，所以我根本就不能选中他，
        <del>也就不能触发它上面</del>的动作了）
    </p>
    <p class="text-capitalize">
        但是后来我在调试的时候html，PHP遇到了一个问题就是（因为这个close-navbar的高度是0，所以我根本就不能选中他，
        <del>也就不能触发它上面</del>的动作了）
    </p>
    <h3 class="page-header">列表</h3>
    <ul class="list-unstyled list-inline">
        <li>html</li>
        <li>css</li>
        <li>mysql</li>
    </ul>
    <h3 class="page-header">自定义列表</h3>
    <dl class="dl-horizontal">
        <dt>标题</dt>
        <dd>标题解释</dd>
    </dl>
    <div class="table-responsive">
    <table class="table table-bordered table-hover table-striped table-condensed">
        <tr class="active">
            <td>编号</td>
            <td>产品名称</td>
            <td>产品状态</td>
        </tr>
        <tr class="success">
            <td>001</td>
            <td>奥迪</td>
            <td>已发货</td>
        </tr>
        <tr class="info">
            <td>002</td>
            <td>傲宇哦</td>
            <td>未发货</td>
        </tr>
        <tr class="warning">
            <td>003</td>
            <td>绿箭</td>
            <td>正在调度</td>
        </tr>
        <tr class="danger">
            <td>004</td>
            <td>格力</td>
            <td>发货中</td>
        </tr>
    </table>
    </div>
</div>

</body>
</html>

6.响应式图片：

(1)样式

.img-responsive 响应式图片

.img-circle 把图片变成椭圆形

.img-rounded 将图片的角变为圆角

.img-thumbnail 给图片加圆角的边框（比较常用）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body style="background: gray">
<div class="container-fluid" style="background: white">
   <img src="images/Desert.jpg" class="img-responsive img-thumbnail"/>
</div>

</body>
</html>

7.栅格系统

注意：栅格系统一定要放入容器（<div class="container"></div> 或<div class="container-fluid"></div>）中

(1)栅格系统的简介及简单案例

Bootstrap 提供了一套响应式、移动设备优先的流式（即正常文档流）栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

响应式图片通常是要结合栅格系统使用。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->   
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->   
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->   
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

       
    <style>

/*等价于*/
        div[class^="col"]{
        border: 1px solid blue;
        }
    </style>
</head>

<body style="background: gray"> 
    <div class="container" style="background: white">     
        <div class="row">           
            <div class="col-md-1">col-1</div>           
            <div class="col-md-1">col-2</div>           
            <div class="col-md-1">col-3</div>          
            <div class="col-md-1">col-4</div>           
            <div class="col-md-1">col-5</div>          
            <div class="col-md-1">col-6</div>          
            <div class="col-md-1">col-7</div>          
            <div class="col-md-1">col-8</div>         
            <div class="col-md-1">col-9</div>           
            <div class="col-md-1">col-10</div>          
            <div class="col-md-1">col-11</div>           
            <div class="col-md-1">col-12</div>
            <!--超出12个的自动换到下一行-->          
            <div class="col-md-1">col-13</div>           
            <div class="col-md-1">col-14</div>        
        </div>
         <!--分成三块。一块占4列-->
           
        <div class="row">           
            <div class="col-md-4">44</div>           
            <div class="col-md-4">44</div>           
            <div class="col-md-4">44</div>       
        </div>

                <!--分成两块。一块占6列-->      
        <div class="row">           
            <div class="col-md-6">66</div>           
            <div class="col-md-6">66</div>       
        </div>

                <!--分成三块。第一块占2列，第二块占3列，第三块占6列-->      
        <div class="row">           
            <div class="col-md-2">22</div>          
            <div class="col-md-3">33</div>          
            <div class="col-md-7">77</div>      
        </div> 
    </div>
</body>
</html>

案例：Pc端的中等屏幕，一行显示3张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->   
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->   
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->   
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

       
    <style>

        /*等价于*/
        div[class^="col"] {
            border: 1px solid blue;
        }
    </style>
</head>

<body style="background: gray">  
<div class="container" style="background: white">       
    <div class="row">           
         <div class="col-md-4">
       <img src="images/Jellyfish.jpg" alt="说明" class="img-reaponsive img-thumbnail">
             <h3 class="page-header">从堆叠到水平排列</h3>
             <p>
                 如果想做成响应式效果，要使用栅格系统的参数
                 分辨率小于768 即手机端 col-xs
                 768分辨率992 即平板 col-sm
                 992分辨率1200   col-md
                 分辨率>1200    col-lg
             </p>
        </div>
        <div class="col-md-4">
                   <img src="images/Hydrangeas.jpg" alt="说明" class="img-reaponsive img-thumbnail">
            <p>
                如果想做成响应式效果，要使用栅格系统的参数
                分辨率小于768 即手机端 col-xs
                768分辨率992 即平板 col-sm
                992分辨率1200   col-md
                分辨率>1200    col-lg
            </p>
        </div>
        <div class="col-md-4">
                   <img src="images/Desert.jpg" alt="说明" class="img-reaponsive img-thumbnail">
            <p>
                如果想做成响应式效果，要使用栅格系统的参数
                分辨率小于768 即手机端 col-xs
                768分辨率992 即平板 col-sm
                992分辨率1200   col-md
                分辨率>1200    col-lg
            </p>
        </div>       
    </div>   
</div>

</body>
</html>

(2)栅格参数及响应式效果

参数详见：https://v3.bootcss.com/css/

如果想做成响应式效果，要使用栅格系统的参数，案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <!--pc机大屏幕显示4张图片，PC机中等屏幕显示3张图片，平板显示2张图片，手机显示1张图片-->
    <div class="container" style="background: gray">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="images/Chrysanthemum.jpg" class="img-responsive">
            <p>
                注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
            </p>
        </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
        </div>
    </div>
</body>
</html>

(3)栅格偏移：offset

注意：只能向右偏移

语法：col-xs/sm/md/lg-offset-数值

eg：col-md-offset-2 pc机中等屏幕向右偏移两个列。

注意案例中：盛不下的情况，如果盛不下，会另起一行，重新查够偏移的格数，所以，事先一定要查好。

（4）排列（了解）：

语法：col-xs/sm/md/lg-pull 向左偏移

· col-xs/sm/md/lg-push 向右偏移

如案例中：4444和8888互换了位置。

(3)栅格偏移和（4）排列的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        div[class*="col-md"]{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!--pc机大屏幕显示4张图片，PC机中等屏幕显示3张图片，平板显示2张图片，手机显示1张图片-->
    <div class="container" style="background: gray">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="images/Chrysanthemum.jpg" class="img-responsive">
            <p>
                注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
            </p>
        </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="images/Chrysanthemum.jpg" class="img-responsive">
                <p>
                    注意：以（移动）设备为优先的代码，需要在下边加入下面内容。
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
        </div>
        <div class="row">
            <div class="col-md-4">4444</div>
            <div class="col-md-2 col-md-offset-5">2222</div>
        </div>
        <!--如果盛不下，会另起一行，重新查够偏移的格数。-->
        <div class="row">
            <div class="col-md-4">4444</div>
            <div class="col-md-2 col-md-offset-7">2222</div>
        </div>
        <div class="row">
            <div class="col-md-4">4444</div>
            <div class="col-md-8">8888</div>
        </div>
        <!--排列（了解）-->
        <div class="row">
            <div class="col-md-4 col-md-push-8">4444</div>
            <div class="col-md-8 col-md-pull-4">8888</div>
        </div>
    </div>
</body>
</html>

8.辅助类：

参考：https://v3.bootcss.com/css/

(1)情境文本颜色：

.text-muted(柔和)

.text-success

.text-info

.text-primary

.text-warning

.text-danger

(2)情境背景颜色：

.bg-success

.bg-info

.bg-primary

.bg-warning

.bg-danger

(3)下拉三角

语法：<span class="caret"></span> 注意：标签中间不加内容

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<!--pc机大屏幕显示4张图片，PC机中等屏幕显示3张图片，平板显示2张图片，手机显示1张图片-->
    <div class="container" style="background: rgba(128,128,128,0.44);">
        <p class="text-muted">Twitter, Inc.</p>
        <p class="text-primary bg-success">1355 Market Street, Suite 900</p>
        <p class="text-success bg-danger">San Francisco, CA 94103</p>
        <p class="text-info bg-primary">P: (123) 456-7890</p>
        <p class="text-danger bg-warning">Twitter, Inc.</p>
        <p class="text-warning bg-info">1355 Market Street, Suite 900</p>
        <span class="caret"></span>
    </div>
</body>
</html>

(4)浮动

快速浮动 pull-left 左浮动；pull-right右浮动
清除浮动 .clearfix 给父盒子加自然高（另一种方法，在父盒子的样式中加overflow：hidden）(可参考案列理解)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .top{
            width:500px;
            border:2px solid green;
            margin:10px auto;
            /*overflow: hidden;!*使得父盒子获得自然高（方法一）*!*/
        }
        .pull-left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .pull-right{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
<!--pc机大屏幕显示4张图片，PC机中等屏幕显示3张图片，平板显示2张图片，手机显示1张图片-->
    <div class="container" style="background: rgba(128,128,128,0.44);">
        <!--<div class="top clearfix">   父盒子中加clearfix ，使得父盒子获得自然高（方法二）-->
          <div class="top clearfix">
              <div class="pull-left">
                  我在左边
              </div>
              <div class="pull-right">
                  我在右边
              </div>

          </div>
    </div>
</body>
</html>

9.表单

(1)输入框

.form-group 给输入框的父元素加（即给外面包的盒子加，使得各项之间有间隔） eg：<div class=”form-group”>
.form-control 给输入框加，把输入框变为圆角 eg：<input> <textarea></teatarea>

(2)复选框

.check-inline 给lable加（是给包含<input>和内容加样式）

(3)单选框

.radio-inline 给lable标签加（是给包含<input>和内容加样式）

(4)输入框组

.input-group-addon 给组合的内容加 eg：<span class="input-group-addon"></span>
.input-group 给输入框组的父元素加 eg：<div class="input-group"></div>
如果想要加入图标（比如搜索图标）参考网址https://v3.bootcss.com/components/
.form-line 给表单加，表单行内显示 eg <form class="form-inline"></form> 不常用

显示效果：

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container" style="background: rgba(128,128,128,0.54)">
    <!--class="form-inline" 行内显示所有表单的内容，横向，不常用-->
    <form class="form-inline">
        <!--分组class="form-group" 目的是使各项产生一定的距离-->
        <div class="form-group">
            <label for="cemail">邮箱</label>
            <input type="email" name="cemail" id="cemail" class="form-control">
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" name="pwd" id="pwd" class="form-control">
        </div>
        <div class="form-group">
            <label for="tel">手机号</label>
            <input type="text" name="tel" id="tel" class="form-control">
        </div>
        <!--复选框-->
        <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby">打游戏</label>
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled>旅欧</label>
        </div>
        <!--单选框-->
        <div class="form-group">
            <label class="checkbox-inline"><input type="radio" name="sex" value="男">男</label>
            <label class="checkbox-inline disabled"><input type="radio" name="sex" value="女" disabled>女</label>
        </div>
        <div class="form-group">
        <!--输入框组-->
        <div class="input-group">
            <span class="input-group-addon">搜索</span>
            <input type="search" name="sc" id="sc" class="form-control">
        </div>
        </div>
        <!--输入框组-->
        <div class="form-group">
        <div class="input-group">
            <input type="search" name="sear" id="sear" class="form-control">
            <div class="input-group-addon">查询内容</div>
        </div>
        </div>
        <!--输入框组:加入搜索图标-->
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                <input type="search" name="username" id="username" class="form-control">
                <!--<div class="input-group-addon">查询内容</div>-->
            </div>
        </div>
    </form>

</div>

</body>
</html>

(5)响应式表单：

.form-horizontal给表单加,变成响应式效果，但必须结合栅格系统，才能实现响应式效果。

注意：输入框<input>不能使用栅格系统，可以给<div><span>这类标签加。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <div class="container"  style="background: darkgray">
        <form class="form-horizontal">
            <div class="form-group">
                <!--做表单的时候，栅格系统的行可以省略，直接在lable中写列-->
                <lable class="col-md-2 text-right" for="username">账号</lable>
                <!--不能直接在input中写栅格系统的列，需要在input 外边加一个div盒子在div中写-->
                <div class="col-md-10">
                    <input type="text" name="username" id="username" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <!--做表单的时候，栅格系统的行可以省略，直接在lable中写列-->
                <lable class="col-md-2 col-sm-2 col-xs-2 text-right" for="pwd">密码</lable>
                <!--不能直接在input中写栅格系统的列，需要在input 外边加一个div盒子在div中写-->
                <div class="col-md-10 col-sm-10 col-xs-10">
                    <input type="password" name="pwd" id="pwd" class="form-control">
                </div>
            </div>
        </form>
    </div>

</body>
</html>

10.按钮

(1)普通按钮，并且可以加按钮样式

<input type=”button”value=””>
<button>按钮</button>
<a href=”#”></a>

.btn 是按钮样式的基类

(2)按钮样式

.btn-primary
.btn-default
.btn-success
.btn-warning
.btn-danger

(3)按钮大小从大到小排列（默认就不设置即可）

.btn-lg
.btn-md
.btn-sm
.btn-xs

(4)按钮组：

.btn-group 给父元素加 eg：<div class=”btn-group”></div>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<!--按钮-->
<div class="container"  style="background: darkgray">
    <button class="btn btn-primary">确定要删除吗</button>
    <input type="button" value="修改" class="btn btn-default">
    <a href="#" class="btn btn-danger btn-lg">修改内容</a>
    <a href="#" class="btn btn-warning btn-md">修改内容</a>
    <a href="#" class="btn btn-success btn-sm">修改内容</a>
    <a href="#" class="btn btn-success active btn-xs">修改内容</a>
    <!--按钮组-->
    <div class="btn-group">
        <button class="btn btn-success">确定要删除吗</button>
        <button class="btn btn-success">确定要删除吗</button>
        <button class="btn btn-success">确定要删除吗</button>
    </div>
    <!--按钮组-->
    <div class="btn-group">
        <button class="btn btn-primary">可以看看</button>
        <button class="btn btn-warning">不要买</button>
        <button class="btn btn-danger">不买</button>
    </div>
</div>
</body>
</html>

11.响应式综合案例：

实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<!--按钮-->
<div class="container"  style="background: darkgray">
   <div class="row">
       <!--start-->
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
           <!--class="thumbnail"加上圆角的边框-->
           <div class="thumbnail">
               <img src="images/Chrysanthemum.jpg" class="img-responsive">
               <!--class="caption" 即里边要加标题了-->
               <div class="caption">
                   <h3 class="bg-info">Thumbnail lbale</h3>
                   <p class="text-muted">
                       .form-horizontal给表单加,变成响应式效果，但必须结合栅格系统，才能实现响应式效果。
                   </p>
               </div>
               <div class="text-right">
                   <button class="btn btn-success btn-xs">去看看</button>
                   <button class="btn btn-info btn-xs">可以购买</button>
               </div>
           </div>
       </div>
       <!--end-->
       <!--start-->
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
           <!--class="thumbnail"加上圆角的边框-->
           <div class="thumbnail">
               <img src="images/Hydrangeas.jpg" class="img-responsive">
               <!--class="caption" 即里边要加标题了-->
               <div class="caption">
                   <h3 class="bg-info">Thumbnail lbale</h3>
                   <p class="text-muted">
                       .form-horizontal给表单加,变成响应式效果，但必须结合栅格系统，才能实现响应式效果。
                   </p>
               </div>
               <div class="text-right">
                   <button class="btn btn-success btn-xs">去看看</button>
                   <button class="btn btn-info btn-xs">可以购买</button>
               </div>
           </div>
       </div>
       <!--end-->
       <!--start-->
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
           <!--class="thumbnail"加上圆角的边框-->
           <div class="thumbnail">
               <img src="images/Koala.jpg" class="img-responsive">
               <!--class="caption" 即里边要加标题了-->
               <div class="caption">
                   <h3 class="bg-info">Thumbnail lbale</h3>
                   <p class="text-muted">
                       .form-horizontal给表单加,变成响应式效果，但必须结合栅格系统，才能实现响应式效果。
                   </p>
               </div>
               <div class="text-right">
                   <button class="btn btn-success btn-xs">去看看</button>
                   <button class="btn btn-info btn-xs">可以购买</button>
               </div>
           </div>
       </div>
       <!--end-->
       <!--start-->
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
           <!--class="thumbnail"加上圆角的边框-->
           <div class="thumbnail">
               <img src="images/Desert.jpg" class="img-responsive">
               <!--class="caption" 即里边要加标题了-->
               <div class="caption">
                   <h3 class="bg-info">Thumbnail lbale</h3>
                   <p class="text-muted">
                       .form-horizontal给表单加,变成响应式效果，但必须结合栅格系统，才能实现响应式效果。
                   </p>
               </div>
               <div class="text-right">
                   <button class="btn btn-success btn-xs">去看看</button>
                   <button class="btn btn-info btn-xs">可以购买</button>
               </div>
           </div>
       </div>
       <!--end-->
   </div>
</div>
</body>
</html>

12.下拉菜单：

（1）样式

.dropdown-menu 给下拉列表中的内容，即给ul加样式
.dropdown 给包含触发的按钮和下拉列表加样式-----父元素
Data-toggle 按钮的触发器
.dropdown-menu-left 下拉列表的左对齐
.dropdown-menu-right 下拉列表的右对齐
.divider 给<li>加 <li></li>之间没有内容，在下拉表单中起分割线的作用。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--屏幕和设备的屏幕保持一致，初始缩放为1:1（即百分之百），禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body style="background: gray">
<div class="container" style="background: white">
    <h2 class="page-header">下拉列表</h2>
    <div class="dropdown open">
        <!--触发器点谁给谁加-->
        <button class="btn btn-default" data-toggle="dropdown">
            登录<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">qq</a></li>
            <li><a href="#">微信</a></li>
            <li class="divider"></li>
            <li><a href="#">qq</a></li>
        </ul>
    </div>
</div>

</body>
</html>

注意：

程序中，触发器点谁给谁加
下拉表单中加分隔线：<li class="divider"></li>

13.标签页/导航：

（1）样式

.nav 是标签页的一个基类-------给ul加
.nav-tabs 普通的标签页
.nav-pills 胶囊式的标签页
.nav-stacked 垂直排列
.nav-left 或.nav-right:组件排列。导航链接、按钮或文本对齐
.nav-inverse:可以实现反色导航，用于<nav>元素
.active 给<li>加，默认显示的是哪个标签页的内容
.navbar:导航栏的基类，用于<nav>元素
.navbar-default:导航栏的默认样式，用于<nav> 元素。
.container 是<nav>的子元素，导航栏内容都放入其中。
.navbar-header:导航栏头部样式
.collapse 是折叠导航栏的样式的基类---给列表<ul>的父元素加
.navbar-collapse是折叠导航栏样式---给列表<ul>的父元素加
.navbar-nav 是导航栏的链接样式 <ul>
.navbar-fixed-top:导航栏固定在顶部；用于<nav>元素，需要为body设置padding-top:70px
.navbar-fixed-bottom: 导航栏固定在底部，用于<nav> 元素

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
   <div class="container">
      <!--页面的头部-->
      <div class="class=navbar-header">
            <a href="#"><img src="zhao/image/mark.png"/></a>
        </div>
      <!--导航链接-->
      <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">home首页</a></li>
                <li><a href="#">免费视频</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">home</a></li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

14.分页

.pagination 产生分页的样式  eg：<ul class="pagination">

达到效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!--jQuery文件，务必在bootstrap.min.js之前引入-->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
    <h2>分页</h2>
    <div class="">
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>

    </div>
</body>
</html>