Bootstrap教程（基于Bootstrap3）~~~一文完结系列
目录
前言：
一、简介
二、环境安装
三、Bootstrap CSS概览
四、Bootstrap网格系统
五、排版
六、代码
七、表格
八、表单
九、按钮
十、图片
十一、Bootstrap辅助类
十二、字体图标（Glyphicons）
十三、下拉菜单（Dropdowns）
十四、按钮组
十五、按钮下拉菜单
十六、输入框组
十七、导航栏
十八、面包屑导航（Breadcrumbs）
十九、分页
二十、标签
二十一、徽章（Badges）
二十二、超大屏幕（Jumbotron）
二十三、页面标题
二十四、缩略图
二十五、Bootstrap警告
二十六、进度条
二十七、多媒体对象
二十八、创建一个网页
二十九、插件
三十、插件
三十一、Bootstrap UI编辑器
总结：
前言：
即使我们有了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插件来得到你自己的版本。
我们依旧是先看一个例子：
我的第一个 Bootstrap 页面
重置窗口大小，查看响应式效果！
Column 1
学的不仅是技术，更是梦想！
再牛逼的梦想,也抵不住你傻逼似的坚持！
Column 2
学的不仅是技术，更是梦想！
再牛逼的梦想,也抵不住你傻逼似的坚持！
Column 3
学的不仅是技术，更是梦想！
再牛逼的梦想,也抵不住你傻逼似的坚持！
#
Name
Street
1
Anna Awesome
Broome Street
2
Debbie Dallas
Houston Street
3
John Doe
Madison Street
二、环境安装
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模板如下：
Bootstrap 模板
Hello, world!
3、Staticfile CDN推荐
三、Bootstrap CSS概览
1、HTML5文档类型（Doctype)
Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，因为需要使用HTML5文档类型，其实就是在项目开头包含，这个规范我们也一直都有的。
2、移动设备优先
移动设备优先是Bootstrap3的最显著的变化，Bootstrap开发的网站对移动设备友好，确保了适当的绘制和触屏缩放，只需要在网页的head中添加 viewport meta标签：，其中width属性控制设备的宽度，加入你的网站将被不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页被加载时，以1:1的比例呈现，不会有任何的缩放。通常，maximum-scale=1.0与user-scalable=no一起使用。可以禁止缩放功能，用户只能滚动屏幕，让网站更像原生应用。
3、响应式图像
通过添加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)
...
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、基本的网络结构
...
....
五、排版
1、标题：Bootstrap中定义了所有的HTML标题（h1-h6)的样式。
1）内联子标题：如果需要向任何标题添加一个内联子标题，只需要简单的在元素两旁天剑
我是标题1 h1. 我是副标题1 h1
我是标题2 h2. 我是副标题2 h2
我是标题3 h3. 我是副标题3 h3
我是标题4 h4. 我是副标题4 h4
我是标题5 h5. 我是副标题5 h5
我是标题6 h6. 我是副标题6 h6
2、引导主题副本
为了给段落添加强调文本，则可以添加class="lead",这里将得到更大更粗、行高更高的文本：
引导主体副本
这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
3、强调
HTML的强调标签
本行内容是在标签内
本行内容是在标签内
本行内容是在标签内，并呈现为斜体
向左对齐文本
居中对齐文本
向右对齐文本
本行内容是减弱的
本行内容带有一个 primary class
本行内容带有一个 success class
本行内容带有一个 info class
本行内容带有一个 warning class
本行内容带有一个 danger class
4、缩写
HTML元素提供了用于缩写的标记，比如WWW或HTTP。Bootstrap定义
WWW
RSS
5、地址
使用display:block;，你需要使用
Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
[email protected]
6、引用
你可以在任意的HTML文本旁使用默认的
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
这是一个带有源标题的引用。
Someone famous in Source Title
这是一个向右对齐的引用。
Someone famous in Source Title
7、列表
-
有序列表：有序列表是指以数字或其他有序字符开头的列表。
-
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
-
定义列表：在这种类型的列表中，每个列表项可以包含 .dl-horizontal 可以让
有序列表
- Item 1
- Item 2
- Item 3
- Item 4
无序列表
- Item 1
- Item 2
- Item 3
- Item 4
未定义样式列表
- Item 1
- Item 2
- Item 3
- Item 4
内联列表
- Item 1
- Item 2
- Item 3
- Item 4
定义列表
- Description 1
- Item 1
- Description 2
- Item 2
水平的定义列表
- Description 1
- Item 1
- Description 2
- Item 2
六、代码
Bootstrap允许你以两种方式显示代码：
1）第一种是
2）第二种是
p><header> 作为内联元素被包围。
如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：
<article>
<h1>Article Heading</h1>
</article>
七、表格
Bootstrap提供了一个清晰的创建表格的布局，下表列出了Bootstrap支持的一些表格元素：
标签
描述
为表格添加基础样式。
表格标题行的容器元素（），用来标识表格列。
表格主体中的表格行的容器元素（）。
一组出现在单行上的表格单元格的容器元素（ 或 ）。
默认的表格单元格。
特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在内使用。
关于表格存储内容的描述或总结。
1、表格类
类
描述
.table
为任意 添加基本样式 (只有横向分隔线)
.table-striped
在 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered
为所有表格的单元格添加边框
.table-hover
在 内的任一行启用鼠标悬停状态
.table-condensed
让表格更加紧凑
2、,,类
.active
将悬停的颜色应用在行或者单元格上
.success
表示成功的操作
.info
表示信息变化的操作
.warning
表示一个警告的操作
.danger
表示一个危险的操作
3、基本的表格
如果你想要一个只带有内边框和水平分割的基本表，添加class.table，例如：
基本的表格布局
名称
城市
Tanmay
Bangalore
Sachin
Mumbai
4、可选的表格类
除了基本的表格标记和.table class,还有一些可以用来标记定义样式的类
1）条纹表格：通过添加.table-striped class，就可以在内的行上看到条纹：
条纹表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
2）边框表格：通过添加.table-bordered class，你可以看到每个元素周围都有边框，且占整个表格是圆角的。
边框表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
3)悬停表格：通过添加.table-hover class，当指针悬停在行上时会出现浅灰色背景：
悬停表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
4）精简表格：通过添加.table-condensed class，行内边距被切为两半，以便看起来更紧凑：
精简表格布局
名称
城市
邮编
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
5)上下文类
下表中所列出的上下文类允许你改变表格行或单元格的背景颜色：
类
描述
.active
对某一特定的行或单元格应用悬停颜色
.success
表示一个成功的或积极的动作
.warning
表示一个需要注意的警告
.danger
表示一个危险的或潜在的负面动作
这些类可以被应用到tr,rd,th。
上下文表格布局
产品
付款日期
状态
产品1
23/11/2013
待发货
产品2
10/11/2013
发货中
产品3
20/10/2013
待确认
产品4
20/10/2013
已退货
6)响应式表格：通过把任意的.table包在.table-responsive class内，你可以让表格水平滑动以适应小型设备（小于768px)。当在大于768px宽的大型设备上查看时，没有任何差别。
响应式表格布局
产品
付款日期
状态
产品1
23/11/2013
待发货
产品2
10/11/2013
发货中
产品3
20/10/2013
待确认
产品4
20/10/2013
已退货
八、表单
1、表单布局：垂直表单（默认），内联表单，水平表单
1）垂直或基本表单
基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。
创建步骤：
-
向父
-
把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。
-
向所有的文本元素
3）复选框和单选框
复选框和单选框按钮用于让用户从一系列设置的选项中进行选择。
label for="name">默认的复选框和单选按钮的实例
4）选择框
如果你想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，可以使用选择框。
5）静态控件
当你需要在一个水平表单内的表单标签后放置纯文本时，请在
3、表单空间状态
除了:focus状态，Bootstrap还为禁止的输入框定义了样式，并提供了表单验证的class。
1）输入框焦点
当输入框input接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。
2）禁用的输入框input
如果你需要禁用一个输入框input，只需要简单的添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及但鼠标的指针悬停在元素上时鼠标指针的样式。
3）禁用的字段集fieldset
对
4）验证状态
Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单的添加适当的class(.has-warning、has-error或.has-success)即可使用验证状态。
4、调整表单空间大小
可以使用class.input-lg和.col-lg-*来设置表单的高度和宽度。
5、表单帮助文本
Bootstrp表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在
九、按钮
任何带有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
禁用按钮
1、按钮大小
Class
描述
.btn-lg
这会让按钮看起来比较大。
.btn-sm
这会让按钮看起来比较小。
.btn-xs
这会让按钮看起来特别小。
.btn-block
这会创建块级的按钮，会横跨父元素的全部宽度。
2、按钮状态
1）激活状态
按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
元素
Class
按钮元素
添加 .active class 来显示它是激活的。
锚元素
添加 .active class 到 按钮来显示它是激活的。
2）禁用状态
当你禁用一个按钮时，它的颜色会变淡50%，并失去渐变。
元素
Class
按钮元素
添加 disabled 属性 到
锚元素
添加 disabled class 到 按钮。
3）按钮标签
链接
4）按钮组
在div中直接使用.btn-group可以创建按钮组：
5)自适应大小的按钮组
可以通过.btn-group-justified类来设置自适应大小的按钮组。
6）内嵌下拉菜单的按钮组
7）分割按钮
十、图片
Bootstrap提供了三个可对图片应用简单样式的class:
-
img-rounded：添加 border-radius:6px 来获得图片圆角。
-
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
-
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
1、![]()
类
描述
.img-rounded
为图片添加圆角 (IE8 不支持)
.img-circle
将图片变为圆形 (IE8 不支持)
.img-thumbnail
缩略图功能
.img-responsive
图片响应式 (将很好地扩展到父元素)
2、响应式图片
通过![]()
十一、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、用法
如需使用图标，只需要简单的使用下面的代码即可。
十三、下拉菜单（Dropdowns）
下拉菜单时可切换的，是以列表格式显示链接的上下文菜单。这里可以通过与下拉菜单JavaScript插件的互动来实现。
如需使用下拉菜单，只需要在class.dropdown内加上下拉菜单即可。
更多：
类
描述
.dropdown
指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu
创建下拉菜单
.dropdown-menu-right
下拉菜单右对齐
.dropdown-header
下拉菜单中添加标题
.dropup
指定向上弹出的下拉菜单
.disabled
下拉菜单中的禁用项
.divider
下拉菜单中的分割线
十四、按钮组
按钮组允许多个按钮被堆叠在同一行上，当你想要把按钮对齐在一起时，这就显得很有用。可以通过Bootstrap按钮插件添加可选的JavaScript单选框和复选框样式行为。
Class
描述
代码示例
.btn-group
该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar
该 class 有助于把几组 结合到一个
.btn-group-lg, .btn-group-sm, .btn-group-xs
这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
... ... ...
.btn-group-vertical
该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
...
1、基本的按钮组：使用class.btn-group
2、按钮工具栏：使用class.btn-toolbar
3、按钮的大小：使用class.btn-group-*
4、嵌套
5、垂直的按钮组：使用class.btn-group-vertical
十五、按钮下拉菜单
如需向按钮添加下拉菜单，只需要简单的在一个btn-group容器中放置按钮和下拉菜单即可。你也可以使用
十六、输入框组
Bootstrap支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，你可以很容易的向基于文本的输入框添加作为前缀和后缀的文本或按钮。
通过向输入域添加前缀或后缀的内容，你可以向用户添加公共元素。
向.form-control添加前缀或后缀元素的步骤如下：
-
把前缀或后缀元素放在一个带有 class .input-group 的
中。
-
接着，在相同的
内，在 class 为 .input-group-addon 的 内放置额外的内容。
-
把该 放置在 元素的前面或者后面
1、基本的输入框组
2、导航元素
Bootstrap提供的用于定义导航元素的选项，都是使用相同的标记和基类.nav。Bootstrap也提供了一个用于共享标记和状态的帮助器类。
1）表格导航或标签
创建一个标签式的导航菜单：
-
以一个带有 class .nav 的无序列表开始。
-
添加 class .nav-tabs。
标签式的导航菜单
2）胶囊式的导航菜单
如果需要把标签改成胶囊的样式，只需要使用class.nav-pills代替.nav-tabs即可。
基本的胶囊式导航菜单
3）垂直的胶囊式导航菜单
使用class.nva、.nav-pills的同时使用class.nav-stacked，让胶囊垂直堆叠。
垂直的胶囊式导航菜单
4、下拉菜单
导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有.dropdown-menu class的无序列表。
1）带有下拉菜单的标签：
向标签添加下拉菜单的步骤如下：
-
以一个带有 class .nav 的无序列表开始。
-
添加 class .nav-tabs。
-
添加带有 .dropdown-menu class 的无序列表。
带有下拉菜单的标签
2）带有下拉菜单的胶囊
只需要把.nav-tabs class改为.nav-pills
带有下拉菜单的胶囊
十七、导航栏
1、默认的导航栏
创建一个默认的导航栏的步骤如下：
-
向
-
向上面的元素添加 role="navigation"，有助于增加可访问性。
-
向
元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 元素。这会让文本看起来更大一号。
-
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
2、响应式的导航栏
十八、面包屑导航（Breadcrumbs）
面包屑导航是一种基于网站层次信息的显示方式。带有.breadcrumb class的无序列表：
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
实例：
十九、分页
Bootstrap支持分页特性，分页，是一种无序列表，Bootstrap像处理其他界面元素一样处理分页。
Class
描述
示例代码
.pagination
添加该 class 来在页面上显示分页。
.disabled, .active
您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。
- «
- 1(current)
.......
.pagination-lg, .pagination-sm
使用这些 class 来获取不同大小的项。
1、默认分页
用到了class.pagination
2、分页的状态
用到了class.disabled、.active：
3、翻页
如果你想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。
Class
描述
示例代码
.pager
添加该 class 来获得翻页链接。
.previous, .next
使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。
.disabled
添加该 class 来设置对应按钮禁止使用。
默认的翻页：
二十、标签
标签用class.label来显示：
Example Heading Label
Example Heading Label
Example Heading Label
Example Heading Label
二十一、徽章（Badges）
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章主要用于突出显示新的或未读的项。只需要把
例如：展示未读邮件
1、激活导航状态
你可以在激活状态的胶囊式导航和列表导航中放置徽章，通过使用
胶囊式导航中的激活状态
列表导航中的激活状态
二十二、超大屏幕（Jumbotron）
该组件可以增加标题的大小，并为登录页面内容添加更多的外边距。步骤如下：
-
创建一个带有 class .jumbotron. 的容器。
-
除了更大的
二十三、页面标题
如需使用Page Header，只需要把标题放置带有class.page-header的中：
页面标题实例
子标题
这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。
二十四、缩略图
使用Bootstrap创建缩略图的步骤如下：
-
在图像周围添加带有 class .thumbnail 的 标签。
-
这会添加四个像素的内边距（padding）和一个灰色的边框。
-
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
1、添加自定义的内容
当我们有了一个基本的缩略图，我们可以向缩略图添加各种HTML内容，比如标题、段落或按钮。具体步骤如下：