目录
前言：
即使我们有了HTML+CSS+JavaScript，但是开发起来还是代码比较多的，所以呢，我们就有了Bootstrap，来自Twitter，是目前最受欢迎的前端框架。它是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
一、简介
1、什么是Bootstrap？
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jacob Thornton开发的。在2011年八月在GitHub上发布的开源产品。
2、Bootstrap包的内容
1）基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。
2）CSS：Bootstrap自带一下特性：全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。
3）组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
4）JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件，你可以直接包含所有的插件，也可以逐个包含这些插件。
5）定制：你可以定制Bootstrap的组件、LESS变量和jQuery插件来得到你自己的版本。
我们依旧是先看一个例子：
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小，查看响应式效果！</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
</div>
</div><div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Street</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>二、环境安装
1、下载Bootstrap
从hrrp://getbootstrap.com/上下载Bootstrap的最新版本。其中有：
1）Download Bootstrap:你可以下载Bootstarp CSS、JavaScript和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
2）Download Source：可以直接得到最新的Bootstrap LESS和JavaScript源代码，如果是未编译的源代码，需要编译LESS文件夹生成可重用的CSS文件，对于编译LESS文件，官方只支持Recess，这个Twitter的基于less.js的CSS提示（为了更好的开发理解，我们基本都是使用的预编译版本）。
下载解压之后有：
当然，如果你下载的是最新版的Bootstrap4.x可能也没有字体，这个是一个可选的Bootstrap主题。
2、HTML模板
一个使用了Bootstrap的基本的HTML模板如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>3、Staticfile CDN推荐
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>三、Bootstrap CSS概览
1、HTML5文档类型（Doctype)
Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，因为需要使用HTML5文档类型，其实就是在项目开头包含<!DOCTYPE html，这个规范我们也一直都有的。
2、移动设备优先
移动设备优先是Bootstrap3的最显著的变化，Bootstrap开发的网站对移动设备友好，确保了适当的绘制和触屏缩放，只需要在网页的head中添加 viewport meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">，其中width属性控制设备的宽度，加入你的网站将被不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页被加载时，以1:1的比例呈现，不会有任何的缩放。通常，maximum-scale=1.0与user-scalable=no一起使用。可以禁止缩放功能，用户只能滚动屏幕，让网站更像原生应用。
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">3、响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加img-responsive class可以让Bootstrap3中的图像对响应式布局的支持更友好。下面例子，为图像赋予了max-width:100%;和height:auto；属性，可以让图形按比例缩放，不超过其父类元素的尺寸。
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}4、全局显示、排版和链接
1）基本的全局显示
Bootstrap3使用body{margin:0;}来移除body的边距。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}第一条规则设置body的默认字体为“Helvetica Neue"，Helvetica,Arial,sans-serif。
第二条规矩设置文本的默认字体大小为14像素
第三条规矩设置默认的行高为14.28571429
第四条规矩设置默认的文本颜色为#333333
最后一条规矩设置默认的背景颜色为白色
2）排版
使用@font-family-base、@font-size-base和@line-heitht-base属性作为排版样式。
3）链接样式
通过属性@link-color设置全局链接的颜色
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}4）避免跨浏览器的不一致
Bootstrap使用Normalize来建立跨浏览器的一致性，Normalize.css是一个很小的CSS文件，在HTML元素的默认样式中提供了很好的跨浏览器一致性。
5）容器（Container)
<div class="container">
...
</div>Bootstrap3的container class用于包裹页面上的内容。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}.container:before,
.container:after {
display: table;
content: " ";
}四、Bootstrap网格系统
Bootstrap提供了一套响应式、移动设备优先的流式网络系统，随着屏幕或视口（viewport)尺寸的增加，系统会自动分为最多12列。
1、Bootstrap网格系统（Grid System）的工作原理
-
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
-
使用行来创建列的水平组。
-
内容应该放置在列内，且唯有列可以是行的直接子元素。
-
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
-
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
-
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
2、媒体查询
媒体查询是非常别致的“有条件的CSS规则”。它只适用于一些基于某些规定条件的CSS。Bootstrap中媒体查询允许你基于视口大小移动、显示并隐藏内容。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }3、网格选项：
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
4、基本的网络结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....五、排版
1、标题：Bootstrap中定义了所有的HTML标题（h1-h6)的样式。
1）内联子标题：如果需要向任何标题添加一个内联子标题，只需要简单的在元素两旁天剑<small>，或者添加.small class，这样子你就可以得到一个字号更小的颜色更浅的文本：
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>2、引导主题副本
为了给段落添加强调文本，则可以添加class="lead",这里将得到更大更粗、行高更高的文本：
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>3、强调
HTML的强调标签<small>（设置文本为父文本大小的85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>4、缩写
HTML元素提供了用于缩写的标记，比如WWW或HTTP。Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要你为<abbr>title属性添加了文本）。
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>5、地址
使用<address>标签，你可以在网页上显示联系信息，由于<address>默认为display:block;，你需要使用<br>标签来为封闭的地址文本添加换行。
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>6、引用
你可以在任意的HTML文本旁使用默认的<blockquote>。其它选项包括，添加一个<small>标签来标识引用的来源，使用class.pull-right向右对齐引用。
<blockquote>
<p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
</p>
</blockquote>
<blockquote>
这是一个带有源标题的引用。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
这是一个向右对齐的引用。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
7、列表
-
有序列表：有序列表是指以数字或其他有序字符开头的列表。
-
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
-
定义列表：在这种类型的列表中，每个列表项可以包含
<dt>和<dd>元素。<dt>代表 定义术语，就像字典。接着，<dd>是<dt>的描述。.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>六、代码
Bootstrap允许你以两种方式显示代码：
1）第一种是<code>标签。如果你想要内联显示代码，那么就使用此标签。
2）第二种是<pre>标签。如果代码需要被显示为一个独立的块元素或者代码有多少行，那么应该使用此标签。例如：
p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>七、表格
Bootstrap提供了一个清晰的创建表格的布局，下表列出了Bootstrap支持的一些表格元素：
| 标签 | 描述 |
|---|---|
<table> |
为表格添加基础样式。 |
<thead> |
表格标题行的容器元素（<tr>），用来标识表格列。 |
<tbody> |
表格主体中的表格行的容器元素（<tr>）。 |
<tr> |
一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。 |
<td> |
默认的表格单元格。 |
<th> |
特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在<thead>内使用。 |
<caption> |
关于表格存储内容的描述或总结。 |
1、表格类
| 类 | 描述 |
|---|---|
| .table | 为任意 <table>添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
2、<tr>,<th>,<td>类
| .active | 将悬停的颜色应用在行或者单元格上 |
|---|---|
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
3、基本的表格
如果你想要一个只带有内边框和水平分割的基本表，添加class.table，例如：
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>4、可选的表格类
除了基本的表格标记和.table class,还有一些可以用来标记定义样式的类
1）条纹表格：通过添加.table-striped class，就可以在<tbody>内的行上看到条纹：
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
2）边框表格：通过添加.table-bordered class，你可以看到每个元素周围都有边框，且占整个表格是圆角的。
<table class="table table-bordered">
<caption>边框表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>3)悬停表格：通过添加.table-hover class，当指针悬停在行上时会出现浅灰色背景：
<table class="table table-hover">
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>4）精简表格：通过添加.table-condensed class，行内边距被切为两半，以便看起来更紧凑：
<table class="table table-condensed">
<caption>精简表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th></tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td></tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td></tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td></tr>
</tbody>
</table>5)上下文类
下表中所列出的上下文类允许你改变表格行或单元格的背景颜色：
| 类 | 描述 |
|---|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
这些类可以被应用到tr,rd,th。
<table class="table">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>6)响应式表格：通过把任意的.table包在.table-responsive class内，你可以让表格水平滑动以适应小型设备（小于768px)。当在大于768px宽的大型设备上查看时，没有任何差别。
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr>
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
</div>八、表单
1、表单布局：垂直表单（默认），内联表单，水平表单
1）垂直或基本表单
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。
创建步骤：
-
向父
<form>元素添加 role="form"。 -
把标签和控件放在一个带有 class .form-group 的
<div>中。这是获取最佳间距所必需的。 -
向所有的文本元素
<input>、<textarea>和<select>添加 class ="form-control" 。
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>2）内联表单
如果需要创建一个表单，它的所有元素都是内联的，向左对齐的，标签是并排，请想<form>标签价class.form-inline。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>3）水平表单
水平表单与其它表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，步骤：
-
向父
<form>元素添加 class .form-horizontal。 -
把标签和控件放在一个带有 class .form-group 的
<div>中。 -
向标签添加 class .control-label。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>2、支持的表单控件
Bootstrap支持最常见的表单控件，主要是input、textarea、checkbox、radio和select。
1）输入框
Bootstrap提供了对所有原生的HTML5的input类型的支持，包括：text,password,datetime,datetime-local,date,month,time,week,number,email,url,serch,tel和color。适当的type声明是必需的，这样才能让input获得完整的样式。
<form role="form">
<div class="form-group">
<label for="name">标签</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
</form>2）文本框
当你需要多行输入时，就可以使用文本框，必要时可以改变rows属性。
<form role="form">
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>3）复选框和单选框
复选框和单选框按钮用于让用户从一系列设置的选项中进行选择。
label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
</label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
</label>
</div>4）选择框
如果你想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，可以使用选择框。
<form role="form">
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>5）静态控件
当你需要在一个水平表单内的表单标签后放置纯文本时，请在<p>上使用class.form-control-static。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
</div>
</div>
</form>3、表单空间状态
除了:focus状态，Bootstrap还为禁止的输入框定义了样式，并提供了表单验证的class。
1）输入框焦点
当输入框input接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。
2）禁用的输入框input
如果你需要禁用一个输入框input，只需要简单的添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及但鼠标的指针悬停在元素上时鼠标指针的样式。
3）禁用的字段集fieldset
对<fieledset>添加disable属性来禁用<fieldset>内所的所有空间。
4）验证状态
Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单的添加适当的class(.has-warning、has-error或.has-success)即可使用验证状态。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">输入错误</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>4、调整表单空间大小
可以使用class.input-lg和.col-lg-*来设置表单的高度和宽度。
<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="默认输入">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
<div class="form-group"></div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">默认选择</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>5、表单帮助文本
Bootstrp表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在<input>后使用.help-block。
九、按钮
任何带有class.btn的元素都会继承圆角灰色按钮的默认外观，但是Bootstrap也提供了选项可以自定义样式。
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>1、按钮大小
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度。 |
2、按钮状态
1）激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 .active class 来显示它是激活的。 |
| 锚元素 | 添加 .active class 到 <a> 按钮来显示它是激活的。 |
2）禁用状态
当你禁用一个按钮时，它的颜色会变淡50%，并失去渐变。
| 元素 | Class |
|---|---|
| 按钮元素 | 添加 disabled 属性 到 <button> 按钮。 |
| 锚元素 | 添加 disabled class 到 <a> 按钮。 |
3）按钮标签
你可以在<a>、<button>或<input>元素上使用按钮class。
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">4）按钮组
在div中直接使用.btn-group可以创建按钮组：
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>5)自适应大小的按钮组
可以通过.btn-group-justified类来设置自适应大小的按钮组。
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>6）内嵌下拉菜单的按钮组
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>7）分割按钮
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>十、图片
Bootstrap提供了三个可对图片应用简单样式的class:
-
img-rounded：添加 border-radius:6px 来获得图片圆角。
-
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
-
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
1、<img>类
| 类 | 描述 |
|---|---|
| .img-rounded | 为图片添加圆角 (IE8 不支持) |
| .img-circle | 将图片变为圆形 (IE8 不支持) |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
2、响应式图片
通过<img>标签添加.img-responsive类来让图片支持响应式设计。图片可以很好的扩展到父元素。.img-responsive类将max-width:100%;和height:auto；样式应用在图片上：
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
十一、Bootstrap辅助类
1、文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
| 类 | 描述 |
|---|---|
| .text-muted | "text-muted" 类的文本样式 |
| .text-primary | "text-primary" 类的文本样式 |
| .text-success | "text-success" 类的文本样式 |
| .text-info | "text-info" 类的文本样式 |
| .text-warning | "text-warning" 类的文本样式 |
| .text-danger | "text-danger" 类的文本样式 |
2、背景
下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
| 类 | 描述 |
|---|---|
| .bg-primary | 表格单元格使用了 "bg-primary" 类 |
| .bg-success | 表格单元格使用了 "bg-success" 类 |
| .bg-info | 表格单元格使用了 "bg-info" 类 |
| .bg-warning | 表格单元格使用了 "bg-warning" 类 |
| .bg-danger | 表格单元格使用了 "bg-danger" 类 |
3、其它
| 类 | 描述 |
|---|---|
| .pull-left | 元素浮动到左边 |
| .pull-right | 元素浮动到右边 |
| .center-block | 设置元素为 display:block 并居中显示 |
| .clearfix | 清除浮动 |
| .show | 强制元素显示 |
| .hidden | 强制元素隐藏 |
| .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 |
| .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 |
| .close | 显示关闭按钮 |
| .caret | 显示下拉式功能 |
十二、字体图标（Glyphicons）
1、什么是字体图标
字体图标是在Web项目中使用的图标字体。虽然，Glyphicons Halfings需要商业许可，但是你看呀通过基于项目的Bootstrap来免费获取这些图标。
2、获取图标
下载Bootstrap3.x版本，在fonts文件夹内就可以找到字体图标：
-
glyphicons-halflings-regular.eot
-
glyphicons-halflings-regular.svg
-
glyphicons-halflings-regular.ttf
-
glyphicons-halflings-regular.woff
3、CSS规则解释
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}所以font-face规则实际上是找到glyphicons地方声明font-family和位置。
4、用法
如需使用图标，只需要简单的使用下面的代码即可。
<span class="glyphicon glyphicon-search"></span>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>十三、下拉菜单（Dropdowns）
下拉菜单时可切换的，是以列表格式显示链接的上下文菜单。这里可以通过与下拉菜单JavaScript插件的互动来实现。
如需使用下拉菜单，只需要在class.dropdown内加上下拉菜单即可。
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>更多：
| 类 | 描述 |
|---|---|
| .dropdown | 指定下拉菜单，下拉菜单都包裹在 .dropdown 里 |
| .dropdown-menu | 创建下拉菜单 |
| .dropdown-menu-right | 下拉菜单右对齐 |
| .dropdown-header | 下拉菜单中添加标题 |
| .dropup | 指定向上弹出的下拉菜单 |
| .disabled | 下拉菜单中的禁用项 |
| .divider | 下拉菜单中的分割线 |
十四、按钮组
按钮组允许多个按钮被堆叠在同一行上，当你想要把按钮对齐在一起时，这就显得很有用。可以通过Bootstrap按钮插件添加可选的JavaScript单选框和复选框样式行为。
| Class | 描述 | 代码示例 |
|---|---|---|
| .btn-group | 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 | <div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div> |
| .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 | <div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 | <div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div> |
| .btn-group-vertical | 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 | <div class="btn-group-vertical"> ... </div> |
1、基本的按钮组：使用class.btn-group
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>2、按钮工具栏：使用class.btn-toolbar
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>3、按钮的大小：使用class.btn-group-*
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>4、嵌套
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>5、垂直的按钮组：使用class.btn-group-vertical
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>十五、按钮下拉菜单
如需向按钮添加下拉菜单，只需要简单的在一个btn-group容器中放置按钮和下拉菜单即可。你也可以使用<span class="caret"></span>来指示按钮作为下拉菜单。
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>十六、输入框组
Bootstrap支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，你可以很容易的向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀或后缀的内容，你可以向用户添加公共元素。
向.form-control添加前缀或后缀元素的步骤如下：
-
把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
-
接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
-
把该 <span> 放置在 <input> 元素的前面或者后面
1、基本的输入框组
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>2、导航元素
Bootstrap提供的用于定义导航元素的选项，都是使用相同的标记和基类.nav。Bootstrap也提供了一个用于共享标记和状态的帮助器类。
1）表格导航或标签
创建一个标签式的导航菜单：
-
以一个带有 class .nav 的无序列表开始。
-
添加 class .nav-tabs。
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>2）胶囊式的导航菜单
如果需要把标签改成胶囊的样式，只需要使用class.nav-pills代替.nav-tabs即可。
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>3）垂直的胶囊式导航菜单
使用class.nva、.nav-pills的同时使用class.nav-stacked，让胶囊垂直堆叠。
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>4、下拉菜单
导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有.dropdown-menu class的无序列表。
1）带有下拉菜单的标签：
向标签添加下拉菜单的步骤如下：
-
以一个带有 class .nav 的无序列表开始。
-
添加 class .nav-tabs。
-
添加带有 .dropdown-menu class 的无序列表。
<p>带有下拉菜单的标签</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>2）带有下拉菜单的胶囊
只需要把.nav-tabs class改为.nav-pills
<p>带有下拉菜单的胶囊</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>十七、导航栏
1、默认的导航栏
创建一个默认的导航栏的步骤如下：
-
向 <nav> 标签添加 class .navbar、.navbar-default。
-
向上面的元素添加 role="navigation"，有助于增加可访问性。
-
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
-
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
2、响应式的导航栏
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
十八、面包屑导航（Breadcrumbs）
面包屑导航是一种基于网站层次信息的显示方式。带有.breadcrumb class的无序列表：
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}实例：
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>十九、分页
Bootstrap支持分页特性，分页，是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 | <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
| .disabled, .active | 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 | <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
1、默认分页
用到了class.pagination
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>2、分页的状态
用到了class.disabled、.active：
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><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="#">»</a></li>
</ul>3、翻页
如果你想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。
| Class | 描述 | 示例代码 |
|---|---|---|
| .pager | 添加该 class 来获得翻页链接。 | <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
| .previous, .next | 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。 | <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
| .disabled | 添加该 class 来设置对应按钮禁止使用。 | <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
默认的翻页：
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>二十、标签
标签用class.label来显示：
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>二十一、徽章（Badges）
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章主要用于突出显示新的或未读的项。只需要把<span class="badge">添加到链接、Bootstrap导航等这些元素上即可。
例如：展示未读邮件
<a href="#">Mailbox <span class="badge">50</span></a>
1、激活导航状态
你可以在激活状态的胶囊式导航和列表导航中放置徽章，通过使用<span class="badge">来激活链接：
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页
<span class="badge">42</span>
</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">消息
<span class="badge">3</span>
</a>
</li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>首页</a>
</li>
<li>
<a href="#">简介</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">3</span>消息
</a>
</li>
</ul>二十二、超大屏幕（Jumbotron）
该组件可以增加标题的大小，并为登录页面内容添加更多的外边距。步骤如下：
-
创建一个带有 class .jumbotron. 的容器
<div>。 -
除了更大的
<h1>，字体粗细 font-weight 被减为 200。
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>二十三、页面标题
如需使用Page Header，只需要把标题放置带有class.page-header的<div>中：
<div class="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>二十四、缩略图
使用Bootstrap创建缩略图的步骤如下：
-
在图像周围添加带有 class .thumbnail 的 <a> 标签。
-
这会添加四个像素的内边距（padding）和一个灰色的边框。
-
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
</a>
</div>
</div>1、添加自定义的内容
当我们有了一个基本的缩略图，我们可以向缩略图添加各种HTML内容，比如标题、段落或按钮。具体步骤如下：
-
把带有 class .thumbnail 的 <a> 标签改为 <div>。
-
在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
-
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
</div>
</div>二十五、Bootstrap警告
创建一个内联的可取消的警告框，可以使用警告jQuery插件。通过创建一个<div>，并向其添加一个.alert class和四个上下文class（.alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>1、可取消的警告
创建一个可取消的警告（Dismissal Alert）步骤如下：
-
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
-
同时向上面的 <div> class 添加可选的 .alert-dismissable。
-
添加一个关闭按钮。
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功！很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
信息！请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
警告！请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
错误！请进行一些更改。
</div>二十六、进度条
呜呜呜，Bootstrap的进度条当然花里胡哨了，太多了，所以这里我们就看看默认的吧~
创建一个基本的进度条的步骤如下：
-
添加一个带有 class .progress 的 <div>。
-
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
-
添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>二十七、多媒体对象
我们来看一个简单的文本图片实例：
<！- 左对齐-> < div class = “ media ” > < div class = “ media-left ” > < img src = “ img_avatar1.png ” class = “ media-object ” 样式= “ width：60px ” > </ div > < div class = “ media-body ” > <h4 class = “
media-heading “ > 左对齐</ h4 > < p > 这是一些示例文本... </ p > </ div > </ div > <！- 右对齐-> < div class = ” media “ > < div class = “ media-body ” > < h4 class = “ media-heading ” > 左对齐</ h4 > <p >
这是一些示例文本... </ p > </ div > < div class = “ media-right ” > < img src = “ img_avatar1.png ” class = “ media-object ” 样式= “ width：60px ” > </ div > </ div >二十八、创建一个网页
使用Bootstrap3来创建一个简单的响应式网页
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置浏览器窗口大小查看效果！</p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站名</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">页面 2</a></li>
<li><a href="#">页面 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>关于我</h2>
<h5>我的照片:</h5>
<div class="fakeimg">这边插入图像</div>
<p>关于我的介绍..</p>
<h3>链接</h3>
<p>描述文本。</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
<li><a href="#">链接 3</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
<div class="col-sm-8">
<h2>标题</h2>
<h5>副标题</h5>
<div class="fakeimg">图像</div>
<p>一些文本..</p>
<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
<br>
<h2>标题</h2>
<h5>副标题</h5>
<div class="fakeimg">图像</div>
<p>一些文本..</p>
<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>底部内容</p>
</div>二十九、插件
Bootstrap自带12种jQuery插件，扩展了功能。你可以利用Bootstrap数据API(Bootstrap Data API)，大部分插件可以在不编写任何代码的情况下触发。
站点引入Bootstrap插件的方式有两种：
-
单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
-
编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。
1、data属性
你可以通过data属性API就能使用所有的Bootstrap插件，无需一行JavaScript代码。
关闭data属性API的方法：
$(document).off('.data-api')
关闭一个特定的插件的方法：
$(document).off('.alert.data-api')
2、编程方式的API
所有Bootstrap插件提供了纯JavaScript方式的API。所有公开的API都是单独支持或链式调用，并且返回其所操作的元素结合。例如：
$(".btn.danger").button("toggle").addClass("fat")
3、事件
Bootstrap为大多数插件的独特行为提供了自定义事件，一般来说，有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。
$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
if (!data) return e.preventDefault()
})过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。
三十、插件
1、过渡效果插件（Transition）
2、模态框（Modal）插件
3、下拉菜单（Dropdown）插件
4、滚动监听（Scrollspy）插件
5、标签页（Tab）插件
6、提示工具（Tooltip）插件
7、弹出框（Popover）插件
8、警告框（Alert）插件
9、按钮（Button）插件
10、折叠（Collapse）插件
11、轮播（Carousel）插件
12、附加导航（Affix）插件
三十一、Bootstrap UI编辑器
1、Bootstrap Magic
2、BootSwatchr
3、Bootstrap Live Editor
4、Fancy Boot
总结：
最新的Bootstrap4更新了很多的组件功能，大家可以去看看。了解了基本原理之后，其实Bootstrap提供的便捷的可视化编程老香了，哈哈哈。