1 安装与使用

网址：https://www.bootcss.com/

1.1 简介

Bootstrap是一套现成的CSS样式集合。是两个推特的员工干出来的。

Bootstrap 是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。2011年，twitter的”一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集BootStrap。

Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork 的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站:界面清新、简洁;要素排版利落大方。

Bootstrap特别适合那种没有设计师的团队（甚至说没有前端的团队)，可以快速的出一个网页。

1.2 特点

简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web开发更速、简单。
基于html5、css3的bootstrap，具有大量的诱人特性:友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
自定义JQuery插件，完整的类库，bootstrap3基于Less,bootstrap4基于Sass的CSS预处理技术
Bootstrap响应式布局设计;让一个网站可以兼容不同分辨率的设备。Bootstrap响应式布局设计，给用户提供更好的视觉使用体验。
丰富的组件

1.3 下载

Bootstrap - 图1

Bootstrap - 图2

Bootstrap - 图3

1.4 使用

1.4.1 离线

将bootstrap-3.4.1-dist文件夹中的css的bootstrap.min.css放入项目中

将bootstrap-3.4.1-dist文件夹中的js,fonts放入项目中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--使用X-UA-Compatible来设置IE浏览器兼容模式，最新的渲染模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!--
            viewport表示用户可以缩放页面
            width指定视区的逻辑宽度
            device-width指示市区宽度应为设备的屏幕宽度
            initial-scale指令用于设置web页面的初始缩放比例
            initial-scale=1将显示未经缩放的web文档
        -->
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>模板</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <body>
    </body>
</html>

1.4.2 在线

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

2 布局容器和栅格网络系统

参考：https://v3.bootcss.com/css/#grid-media-queries

2.1 布局容器

.container用于固定宽度并支持响应式布局的容器

<div class="container">

</div>

Bootstrap - 图4

.container-fluid类似于100%宽度，占据全部视口的容器

<div id="" class="container-fluid" style="background: red;">
    .container-fluid类似于100%宽度，占据全部视口的容器
</div>

Bootstrap - 图5

2.2 栅格网络系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

Bootstrap - 图6

注意:网格系统必须使用到css

container、row , xs (xsmall phones),sm (small tablets)，md (middle desktops)， lg (larger desktops)即:超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)

数据行(.row必须包含在容器（.contamer)中，以便为其赋予合适的对齐方式和内距(padding)。

在行(.row)中可以添加列(.column)，只有列(column)才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。

具体内容应当放置在列容器(column)之内

<div class="container">
    <!--行元素-->
    <div class="row">
    <!--列元素-->
            <div class="col-md-4" style="background: red;">4</div>
        <div class="col-md-8" style="background: yellow;">8</div>
    </div>
</div>

Bootstrap - 图7

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12	12	12	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）
可嵌套	是	是	是	是
偏移（Offsets）	是	是	是	是
列排序	是	是	是	是

列组合

更改数字来合并列

列总数不能超过12

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">
            <!--行元素-->
            <div class="row">
                <!--列元素-->
                <div class="col-md-4" style="background: red;">4</div>
                <div class="col-md-8" style="background: yellow;">8</div>
            </div>
            <div class="row">
                <!--列元素-->
                <div class="col-md-4" style="background: yellowgreen;">4</div>
                <div class="col-md-4" style="background: greenyellow;">4</div>
                <div class="col-md-4" style="background: lightskyblue;">4</div>
            </div>
        </div>
    </body>

</html>

Bootstrap - 图8

列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset)功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名”col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

例如，你在列元素上添加”col-md-offset-8”，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>列偏移</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">
            <!--行元素-->
            <div class="row">
                <!--列元素-->
            </div>
            <div class="row">
                <!--列元素-->
                <div class="col-md-4" style="background: yellowgreen;">4</div>
                <div class="col-md-1 col-md-offset-2" style="background: greenyellow;">1</div>
                <div class="col-md-4" style="background: lightskyblue;">4</div>
            </div>
        </div>
    </body>

</html>

Bootstrap - 图9

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>列排序</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">
            <!--行元素-->
            <div class="row">
                <!--列元素-->
            </div>
            <div class="row">
                <!--列元素-->
                <div class="col-md-2 col-md-push-1" style="background: yellowgreen;">2</div>
                <div class="col-md-2 col-md-push-2" style="background: greenyellow;">2</div>
                <div class="col-md-1" style="background: lightskyblue;">2</div>
            </div>
        </div>
    </body>

</html>

列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>列嵌套</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">
            <div class="row">
                <!--列元素-->
                <div class="col-md-8" style="background: yellowgreen;">
                    <div class="row">
                        <div class="col-lg-2"  style="background:bisque">2</div>
                        <div class="col-lg-4"  style="background:blueviolet">4</div>
                        <div class="col-lg-2"  style="background:burlywood">2</div>
                        <div class="col-lg-4"  style="background:teal">4</div>
                    </div>
                </div>
                <div class="col-md-4 " style="background: greenyellow;">4</div>
            </div>
        </div>
    </body>

</html>

Bootstrap - 图10

3 常用样式

3.1 排版

3.1.1 标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <h1>我是标题h1<small>副标题</small></h1>
        <h2>我是标题h2<small>副标题</small></h2>
        <h3>我是标题h3<small>副标题</small></h3>
        <h4>我是标题h4<small>副标题</small></h4>
        <h5>我是标题h5<small>副标题</small></h5>
        <h6>我是标题h6<small>副标题</small></h6>

        <div class="h1">
            我是bootstrap标题h1
            <small>我是bootstrap副标题</small>
        </div>
        <div class="h2">
            我是bootstrap标题h2
            <small>我是bootstrap副标题</small>
        </div>
        <div class="h3">
            我是bootstrap标题h3
            <small>我是bootstrap副标题</small>
        </div>
        <div class="h4">
            我是bootstrap标题h4
            <small>我是bootstrap副标题</small>
        </div>
        <div class="h5">
            我是bootstrap标题h5
            <small>我是bootstrap副标题</small>
        </div>
        <div class="h6">
            我是bootstrap标题h6
            <small>我是bootstrap副标题</small>
        </div>
    </body>

</html>

Bootstrap - 图11

3.1.2 段落

通过==.lead== 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

可以使用以下标签给文本做突出样式处理：

<small>小号字</small>
<b>加粗</b>
<strong>加粗</strong>
<i>斜体</i>
<em>斜体</em>

<mark>高亮</mark>
<del>被删除的文本</del>
<s>无用文本</s>
<ins>插入文本</ins>
<u>带下划线的文本</u>

改变大小写
<p class="text-lowercase">大写转小写</p>
<p class="text-uppercase">小写转大写</p>
<p class="text-capitalize">首字母大写</p>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <small>小号字</small>
        <b>加粗</b>
        <strong>加粗</strong>
        <i>斜体</i>
        <em>斜体</em>
        <br />

        <p>我是段落</p>
        <p class="lead">通过.lead来突出强调内容</p>
    </body>

</html>

Bootstrap - 图12

3.1.3 强调

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息，使用浅蓝色(#31788f)
.text-warning:警告，使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="text-muted">.text-muted:提示,使用浅灰色(#999)</div>
        <div class="text-primary">.text-primary:主要,使用蓝色(#428bca)</div>
        <div class="text-success">.text-success:成功,使用浅绿色(#3c763d)</div>
        <div class="text-info">.text-info:通知信息，使用浅蓝色(#31788f)</div>
        <div class="text-warning">.text-warning:警告，使用黄色(#8a6d3b)</div>
        <div class="text-danger">.text-danger:危险,使用褐色(#a94442)</div>
    </body>

</html>

Bootstrap - 图13

3.1.3对齐效果

.text-left左对齐
.text-center居中对齐
.text-right
.text-justify两端对齐

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <p class="text-left">text-left左对齐</p>
        <p class="text-center">text-center居中对齐</p>
        <p class="text-right">text-right右对齐</p>
        <p class="text-justify">text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐text-justify两端对齐</p>
    </body>

</html>

Bootstrap - 图14

3.1.4 列表

3.1.4.1 html列表结构

<ul>
    <li>我是html的无序列表</li>
    <li>我是html的无序列表</li>
    <li>我是html的无序列表</li>
</ul>

<ol>
    <li>我是html的有序列表</li>
    <li>我是html的有序列表</li>
    <li>我是html的有序列表</li>
</ol>

<dl>
    <dt>我是html的定义列表标题</dt>
    <dd>我是html的定义列表</dd>
    <dd>我是html的定义列表</dd>
    <dd>我是html的定义列表</dd>
</dl>

3.1.4.2 去点列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
    <li>我是去点列表</li>
    <li>我是去点列表</li>
    <li>我是去点列表</li>
</ul>

Bootstrap - 图15

3.1.4.3 内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">
    <li>我是内联列表</li>
    <li>我是内联列表</li>
    <li>我是内联列表</li>
</ul>

Bootstrap - 图16

3.1.4.4 定义列表

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal" >
    <dt>我是定义列表标题</dt>
    <dd>我是定义列表</dd>
    <dd>我是定义列表</dd>
    <dd>我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表我是定义列表</dd>
</dl>

Bootstrap - 图17

3.1.5 代码

<code>我是单行内联代码</code>

 <kbd>我是快捷键</kbd>


<pre>我是多行快代码</pre> 
<!--当长度超过指定值时，可以添加滚动条-->

<var>变量</var>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        我是代码<br />
        <code>我是单行内联代码</code>
        <br />
        <p>使用快捷键<kbd>Ctrl</kbd>+<kbd>s</kbd></p>

        <!--当长度超过指定值时，可以添加滚动条-->

<pre>我是多行快代码</pre>

        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
    </body>

</html>

Bootstrap - 图18

3.1.6 表格

3.1.6.1 表格样式

.table:基础表格
.table-striped:斑马线表榴
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <p>我是html表格</p>
        <table>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>

        <hr>
        <p>.table:基础表格</p>
        <table class="table">
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>

        <hr>
        <p>.table-striped:斑马线表榴</p>
        <table class="table-striped">
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>

        <hr>
        <p>.table-bordered:带边框的表格</p>
        <table class="table-bordered">
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>

        <hr>
        <p>.table-hover:鼠标悬停高亮的表格</p>
        <table class="table-hover">
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>

        <hr>
        <p>.table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小</p>
        <table class="table-condensed">
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>zhangsan</td>
                <td>$80</td>
            </tr>
        </table>
    </body>

</html>

Bootstrap - 图19

3.1.6.2 状态类

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

<table class="table">
    <tr>
        <td class="active">active</td>
        <td class="success">success</td>
        <td class="warning">warning</td>
        <td class="danger">danger</td>
        <td class="info">info</td>
    </tr>
    <tr>
        <td class="active">active</td>
        <td class="success">success</td>
        <td class="warning">warning</td>
        <td class="danger">danger</td>
        <td class="info">info</td>
    </tr>    
</table>

Bootstrap - 图20

3.1.6.3 响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

注意：

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="table-responsive">
            <table class="table">
                <tr>
                    <th>Month</th>
                    <th>Savings</th>
                </tr>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>zhangsan</td>
                    <td>$80</td>
                </tr>
            </table>
        </div>

    </body>

</html>

Bootstrap - 图21

3.2 表单

3.2.1 表单控件

.form-control

表单控件的大小
.input-lg 较大
.input-sm 较小

3.2.1.1输入框text

<input type="text" class="form-control">

3.2.1.2 下拉框

<select class="form-control">
    <option>请选择</option>
    <option>河北</option>
    <option>河南</option>
    <option>重庆</option>
</select>

3.2.1.3 文本域

<textarea class="form-control"></textarea>

3.2.1.4 复选框

.checkbox 垂直显示
.checkbox-inline 水平显示

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form class="col-lg-4">
            <div class="row">
                <div class="col-lg-3">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" />唱歌
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" />跳舞
                        </label>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3">
                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox" />唱歌
                        </label>
                    </div>
                    <div class="checkbox-inline">
                        <label>
                            <input type="checkbox"/>唱歌
                        </label>
                    </div>
                </div>
            </div>

        </form>
    </body>

</html>

Bootstrap - 图22

3.2.1.5 单选按钮

.radio垂直显示
.radio-inline水平显示

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form class="col-lg-4">            
            <div class="row">
                <div class="col-lg-3">
                    <div class="radio">
                        <label>
                            <input type="radio" />男
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" />女
                        </label>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-3">
                    <div class="radio-inline">
                        <label>
                            <input type="radio" />男
                        </label>
                    </div>
                    <div class="radio-inline">
                        <label>
                            <input type="radio" />女
                        </label>
                    </div>
            </div>

        </form>
    </body>

</html>

Bootstrap - 图23

3.2.1.6 按钮

3.2.1.6.1 使用button实现

.btn 基础样式
.btn-default默认样式
.btn-primary首选项
.btn-success成功
.btn-info一般信息
.btn-warning警告
.btn-danger危险
.btn-link链接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form>
            <button class="btn">按钮</button>

            <button type="button" class="btn btn-default">（默认样式）Default</button>

            <button type="button" class="btn btn-primary">（首选项）Primary</button>

            <button type="button" class="btn btn-success">（成功）Success</button>

            <button type="button" class="btn btn-info">（一般信息）Info</button>

            <button type="button" class="btn btn-warning">（警告）Warning</button>

            <button type="button" class="btn btn-danger">（危险）Danger</button>

            <button type="button" class="btn btn-link">（链接）Link</button>
        </form>
    </body>

</html>

Bootstrap - 图24

3.2.1.6.2 大小

.btn-lg大按钮
.btn-sm小按钮
.btn-xs超小尺寸

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form>
            <p>
                <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
            </p>
            <p>
                <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
            </p>
            <p>
                <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
            </p>
            <p>
                <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
            </p>
        </form>
    </body>

</html>

Bootstrap - 图25

3.2.1.6.2 禁用

disabled="disabled"

<button class="btn" disabled="disabled">禁用</button>

3.2.2 表单布局

基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父< form>元素添加role=”form”
把标签和控件放在一个带有class .form-group的< div>中。这是获取最佳间距所必需的。
向所有的文本元素< input>、< textarea>和< select>添加class =”form-control”

3.2.2.1 水平布局

.form-horizontal

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form class="form-horizontal">
            <p class="h2" align="center">学生信息</p>
            <!--表单中的表单元素组-->
            <div class="form-group">
                <label for="uname" class="control-label col-lg-2">姓名：</label>
                <div class="col-lg-8">
                    <input id="upawd" class="form-control"  type="text"/>
                </div>
            </div>

            <div class="form-group">
                <label for="uname" class="control-label col-lg-2">密码：</label>
                <div class="col-lg-8">
                    <input type="text" id="uname" class="form-control"/>
                </div>
            </div>
        </form>
    </body>

</html>

Bootstrap - 图26

3.2.2.2 内联表单

.form-inline

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <form class="form-inline">
            <p class="h2" align="center">学生信息</p>
            <div class="form-group">
                <label for="uname" class="control-label col-lg-2">姓名：</label>
                <div class="col-lg-8">
                    <input id="upawd" class="form-control" type="text" />
                </div>
            </div>

            <div class="form-group">
                <label for="uname" class="control-label col-lg-2">密码：</label>
                <div class="col-lg-8">
                    <input type="text" id="uname" class="form-control" />
                </div>
            </div>
        </form>
    </body>

</html>

Bootstrap - 图27

3.3 字体图标

网址：https://v3.bootcss.com/components/

<span class=" glyphicon glyphicon-heart">wo</span>

3.4 面板

https://v3.bootcss.com/components/#panels

.panel
.panel-default 默认样式

.panel-heading面板头
.panel-body面板主体内容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="panel">
            <div class="panel-heading">
                head
            </div>
            <div class="panel-body">
                body
            </div>
        </div>

        <div class="panel-default">
            <div class="panel-heading">
                head
            </div>
            <div class="panel-body">
                body
            </div>
        </div>

        <div class="panel-success">
            <div class="panel-heading">
                head
            </div>
            <div class="panel-body">
                body
            </div>
        </div>
    </body>

</html>

Bootstrap - 图28