注意：所有文章除特别说明外，转载请注明出处.
Bootstrap 包的内容
1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
2.CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统
3.组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等
4.JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件
5.定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本
扩展
meta标签中http-equiv属性
meta是head区的一个辅助性标签，而这个标签的作用是：搜索引擎优化(SEO)、定义页面使用语言、自动刷新并且指向新的页面。meta标签有两个属性：http-equiv/name属性 其中name属性用于描述网页，对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
Bootstrap CSS
1.HTML5文档类型(doctype)
Bootstrap 使用了一些 HTML5 元素和 CSS 属性，所以为了让这些属性元素正常工作，需要使用HTML5文档类型。
<!DOCTYPE html>
<html></html>
注意：如果在boostrap创建的页面中不使用文档类型(doctype)，页面会出现显示不一致的问题
2.移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加viewport meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.width属性让网站能正确不同屏幕分辨率的设备上浏览显示
2.initial-scale 保证网页在加载的时候是以1:1的比例显示
注意：在移动设备浏览器上，通过为
viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能.通常情况下，参数maximum-scale=1.0与user-scalable=no一起使用，禁用缩放功能，用户只能滚动屏幕进行网页查看。
3.响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
通过添加 img-responsive class 可以让 Bootstrap 3
中的图像对响应式布局的支持更友好。在img-responsive class 中为图像设置的属性 max-width: 100%; 和height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸这说明了图像显示以block的方法，在设置元素的显示display为block时，以块级元素显示
注意：如果需要使.img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center
4.全局显示、排版和链接
1.基本的全局显示
Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距,一般的全局显示是body{}中设置，然后属性有：
1.font-family: //用于设置默认字体样式
2.font-size: //设置文本默认字体大小
3.line-height: //设置默认行高
4.color: //设置默认的文本颜色
5.background-color: //设置默认的背景颜色
2.排版
使用@font-family-base @font-size-base 和 @line-height-base 属性作为排版样式
3.链接样式
使用 @link-color 设置全局链接的颜色
例子：
//表示在鼠标悬停或者点击过链接时，颜色会变，然后会呈现一条下划线。然后点击过得链接还会出现样式
a:hover,a:focus{color:#253544 text-decoration:underline}
a:focous{outline:thin dotted #333;outline:5px auto --webkit-focus-ring-color;outline-offset: -2px;}
4.避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性，而 Normalize.css 文件是一个很小的css文件，在HTML元素默认的样式中提供更好的跨浏览器一致性
5.容器
<div class="container"></div> 表示引用容器，然后再看cnotainer容器的属性：
.container {
padding-right: 15px;//内边距
padding-left: 15px;
margin-right: auto;//页边距，由浏览器决定
margin-left: auto;
}
注意：Bootstrap 3 CSS 有一个申请响应的
媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配网格系统。
@media (min-width: 768px) {
.container {
width: 750px;
}
注意：container与container-fluid之间的区别
1.
container类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
2.container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度
6.Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作，然后在旧的浏览器可能无法很好的支持 bootstrap 网格系统.Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
1.网格(Grid)
表示在网页设计过程中用于组织内容，让网站更容易浏览，降低用户端的负载
2.bootstrap的网格系统
bootstrap3 是移动设备优先的，然后再扩展到大屏幕设备(pc端)上的组件和网格
3.移动设备优先策略
1.内容
2.布局
1.优先设计更小的宽度
2.基础的css是移动设备优先
3.渐进增强
随着屏幕的大小的增加而添加元素
注意：响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
4.bootstrap网格系统的工作原理
网格系统通过一系列包含内容的行和列来创建页面布局
1.行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
2.使用行来创建列的水平组
3.内容应该放置在列内，且唯有列可以是行的直接子元素
4.
5.媒体查询
bootstrap的媒体查询允许我们基于视口大小移动、显示并隐藏内容
/* 超小设备（手机，小于 768px） */
/* 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) { ... }//限制css的影响
@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) { ... }
注意：媒体查询包括：1.设备规范 2.大小规则
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
表示：对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理
6.网格选项
class前缀：
.col-xs- 表示超小设备手机（<768px）
.col-sm- 表示小型设备平板电脑（≥768px）
.col-md- 表示中型设备台式电脑（≥992px）
.col-lg- 表示大型设备台式电脑（≥1200px）
基本的网格选项
案例：
注意：
1.`<div class="container">...</div>` 元素被添加，确保居中和最大宽度
2.在添加容器之后，需要考虑以行为单位，添加 `<div class="row">...</div>`，并在行内添加列 `<div class="col-md-6"></div>`
col-md-6 表示设备为中型台式设备(>992px)，然后6表示一个列由六个单元组成
3.网格中的每一行是由12个单元组成，我们可以使用这些单元定义列的尺寸，但是要确保最后的列所组成的单元的总和为12
7.响应式的列重置
在案例中包含多个网格，在小设备浏览时无法确定网格显示的位置，所以我们可以使用 `.clearfix class` 和 `响应式实用工具` 来解决这个问题
1.响应式使用工具：
8.偏移列
如果希望在大屏幕显示器上使用偏移，使用 `.col-md-offset-*` 类,这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11（也就是整个列向右移*单元）
9.嵌套列
在内容上嵌套默认的网格，需要添加一个新的 `.row` 然后在已有的 `.col-md-*` 列内添加一组 `.col-md-*` 列
10. 列排序
我们可以以一种顺序编写列，然后以另一种顺序显示列 我们可以使用使用 `.col-md-push-*` 和 `.col-md-pull-*` 类来互换这两列的顺序
Bootstrap 排版
1.标题
在bootstrap定义了所有的HTML标题(h1-h6)样式
2.
Bootstrap 代码
Bootstrap 允许我们以两种方式显示代码：
1.使用<code>标签，如果需要内联显示代码，那么需要使用<code>标签
2.使用<pre>标签，如果代码需要被显示为一个独立的块元素或者代码有多行，需要使用<pre>标签
注意：当我们确认是使用
<pre>标签还是<code>标签，我们在开始以及结束需要使用：<和>表示 < 与 >
<var> 表示变量显示
<kbd> 表示强调字体高亮
<pre> 表示多行代码
<pre class="pre-scrollable"> 表示多行代码且带有滚动条
<samp> 表示一种样式，电脑输出
<code> 表示代码高亮，突出显示
Bootstrap 表格
bootstrap提供给我们一个清晰的创建表格的布局
<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>），用来标识表格列
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 行
<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.基本的表格
4.可选的表格类
5.响应式表格
通过把任意的 .table 包在 .table-responsive class 内，我们可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。
扩展
HTML属性hidden：该属性表示隐藏，是布尔属性，浏览器不显示已规定的hidden属性的元素，防止用户查看元素
Bootstrap 表单
1.表单布局
1.垂直表单(默认)
2.内联表单
3.水平表单
2.垂直或基本表单
基本的表单借结构是bootstrap自带的，个别的表单空间自动接收全局样式
创建基本表单的步骤：
1.向父<form>元素添加role="form" <form role="form">
2.将标签和控制放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的 <div class="form-group">
3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" <input type="text" class="form-control" id="name" placeholder="请输入名称">
3.内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，需要向<form>标签添加`class.form-inline` 如：<form class="form-inline" role="form">
注意：1.默认情况下，Bootstrap 中的 input、select 和 textarea 标签有 100% 宽度。所以在使用内联表单时，需要在表单控件上设置一个宽度
2.使用class .sr-only，可以隐藏内联表单的标签
4.水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。
创建一个水平布局的表单步骤：
1.向父 <form> 元素添加 class .form-horizontal
如：`<form class="form-horizontal" role="form">`
2.把标签和控件放在一个带有 `class .form-group` 的 <div> 中
如：`<div class="form-group">`
3.向标签添加 class .control-label
如：<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
5.支持的表单控件
bootstrap支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select
1.输入框（Input）
<input type="hidden" value="${grade}" id="slected-grade">
这段程序表示：隐藏域在页面中对于用户不可见，在表单中插入隐藏域的目的在于搜集或发送信息，以利于被处理表单的程序所使用。虽然在页面中隐藏了，但是还是具有form传值功能。
2.文本框（Textarea）
3.复选框（Checkbox）和单选框（Radio）
注意：对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上
5.选择框（Select）
注意：1.使用<select>标签展示列表选项，通常是那些用户很熟悉的选择列表 2.使用 multiple="multiple" 允许用户选择多个选项
6.静态控件
需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static
7.表单控件状态
8.表单控件大小
分别用 class.input-lg 和.col-lg-* 来设置表单的高度和宽度
9.表单帮助文本
bootstrap表单控件可以在输入框input上有一个块级帮助文本。如果要添加一个占用整个宽度的内容块，需要在<input>之后使用.help-block 如：<span class="help-block"></span>
Bootstrap 按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，同时这些样式还能够用于<a> <button> 或 <input> 元素。
如果一个按钮有多个属性，需要在class中将所有的属性都加上
设置按钮的颜色
.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 禁用按钮
class="btn btn-primary" 原始按钮
1.按钮状态
bootstrap提供激活、禁用等按钮状态class
1.激活状态：按钮在被激活时将会呈现被按压状态，使用.active class 来显示它是激活的。
2.禁用状态：一个按钮被禁用时，它的颜色会变淡50%，失去渐变 将disabled属性添加到<button>按钮实现禁用。
Bootstrap 图片
Bootstrap 提供了三个可对图片应用简单样式的 class :
1. .img-rounded：添加 border-radius:6px 来获得图片圆角
2. .img-circle：添加 border-radius:50% 来让整个图片变成圆形
3. .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; 样式应用在图片上。
如：
Bootstrap 辅助类
1.文本
不同的类展示了不同的文本颜色，如果文本是个链接鼠标移动到上面文本将会变暗
.text-muted
.text-primary
2.背景
不同的类展示不同的背景颜色，如果文本是个链接，鼠标移动到文本上文本会变暗
.bg-primary
.bg-success
.bg-info
.bg-warning
3.其他
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block
并居中显示(设置显示为块，并且居中显示)
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮 只是一个标识
.caret 显示下拉式功能 一个标识
4.更多
内容居中：使用 class center-block 来居中元素
Bootstrap 响应式实用工具
bootstrap提供一些辅助类，通过媒体查询结合大型、中型和小型设备，实现内容对设备的显示和隐藏。
Bootstrap 字体图标Glyphicons
Bootstrap 捆绑了 200 多种字体格式的字形，字体图标是在WEB项目中使用的图标字体
1.获取字体图标
2.使用方法
如果需要使用图标，只需要使用代码： <span class="glyphicon glyphicon-search"></span> 此外，还需要在文本和图标之间保持适当的空间
3.定制字体图标(只需要在所应用的类中标注class的属性即可)
开始：
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
1.定制字体尺寸
可以通过增加或减少图标的字体尺寸让图标看起来更大或更小
在原先的基础上加上属性：style="font-size:90px"
2.定制字体颜色
在原先的基础上加上属性：style="color:rgb(212,106,64);"
3.应用文本阴影
在原先的基础上加上属性：style="text-shadow:black 5px 3px 3px;"
Bootstrap 下拉菜单（Dropdowns）
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单
如果需要使用下拉菜单，在 class .dropdown 内加上下拉菜单即可。
2.更多
.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线
Bootstrap 按钮组
按钮组允许多个按钮被叠放在同一行里
按钮组中的重要类：
.btn-group 形成基本按钮组，在其中放置一系列带有 class.btn 的按钮
.btn-toolbar 将几组 .btn-group 结合到一个<div>中，获得更复杂的组件
.btn-group-lg .btn-group-sm .btn-group-xs 用于对按钮组的大小调整
.btn-group-vertical 让一组按钮垂直堆叠显示，不是水平堆叠显示
class="btn-group-xs" btn-group-sm btn-group-lg 按钮组从小到大的显示
Bootstrap 按钮下拉菜单
如果需要向按钮中添加下拉菜单，只需要简单的在一个.btn-group 中放置按钮和下拉菜单即可。此外，也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单
1.分割的按钮下拉菜单
按钮左边是原始的功能，右边显示下拉菜单的切换
2.按钮下拉菜单的大小
3.按钮上拉菜单
在父 .btn-group 容器添加 .dropup 即可
Bootstrap 输入框组
使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮
通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如，可以添加美元符号，或者应用程序接口所需要的其他公共的元素。
向 .form-control 添加前缀或后缀元素的步骤：
1.把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中
2.在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容
3.把该 <span> 放置在 <input> 元素的前面或者后面
如：
<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>
2.输入框组大小
可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小
3.复选框和单选插件
我们可以将复选框和单选插件作为输入框组的前缀或者后缀元素
4.按钮插件
将按钮作为输入框组的前缀或者后缀元素，这时不是添加 .input-group-addon class，而是需要使用 class .input-group-btn 来包裹按钮。注意：这是必需的，因为默认的浏览器样式不会被重写
5.带下拉菜单的按钮
输入框组添加带有下拉菜单的按钮，只需要在 .input-group-btn class 中包裹按钮和下拉菜单即可
Bootstrap 导航元素
使用相同的标记和基类 .nav
1.表格导航或标签
步骤：
1.创建一个带有 class .nav 的无序列表
2.添加 class .nav-tabs
2.胶囊式的导航菜单
1.基本的导航菜单
如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，创建步骤与上面相同
步骤：
1.引入文件
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2.编写导航栏，active 表示默认此
3.在class一栏有 class="nav 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><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
2.垂直的胶囊式导航菜单
在使用class .nav .nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠 在上面例子中加入class="nav nav-pills nav-stacked"
3.两端对齐的导航
通过使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽
4.禁用连接
对于每个 .nav class 如果添加.disabled class 则会创建一个灰色的链接，同时禁用该链接的 :hover 状态
5.下拉菜单
默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表
带有下拉菜单的标签
步骤：
1.以一个带有 class .nav 的无序列表开始
2.添加 class .nav-tabs
3.添加带有 .dropdown-menu class 的无序列表
1.带有下拉菜单的胶囊
步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills
6.更多
标签页与胶囊标签页
.tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改
.tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
Bootstrap 导航栏
1.默认导航栏创建步骤：
1.向 <nav> 标签添加 class .navbar、.navbar-default
2.向上面的元素添加 role="navigation"，有助于增加可访问性
3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可
2.响应式的导航栏
给导航栏添加响应特性，要折叠的内容必须包裹在带有class .collapse、.navbar-collapse 的 <div> 中，折叠起来的导航栏实际是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件
3.导航栏的表单
使用 class .navbar-form 以至于能够确保表单适当的垂直对齐和在较窄的视口中折叠的行为，使用对齐方式来决定导航栏中的内容放置在哪。
4.导航栏中的按钮
使用 class .navbar-btn 向不在<form>中的<button>元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上
注意：不要在
.navbar-nav内的<a>元素上使用.navbar-btn，因为它不是标准的 button class。
5.导航栏中的文本
如果导航栏中需要包含文本字符串，使用 class .navbar-text 这通常与 <p> 标签一起使用，确保适当的前导和颜色。
6.结合图标的导航链接
如果需要在常规的导航栏导航组件中使用图标，使用 class glyphicon glyphicon-* 来设置图标。
7.组件的对齐方式
使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。
8.固定到顶部
如果需要将导航栏固定在页面的顶端，在 .navbar class 添加 class .navbar-fixed-top
注意：放置导航栏与主体页面主体中的其他内容的顶部交错，在
<body>标签中添加至少50px的内边距(padding)视情况而定。
9.固定到底部
向 .navbar class 添加 class .navbar-fixed-bottom
10.静态的顶部
如果需要创建能够随着页面一起滚动的导航栏，添加.navbar-static-top class。该 class 不要求向 <body> 添加内边距（padding）
11.反色的导航栏
创建一个带有黑色背景白色文本的反色导航栏，向 .navbar class 添加 .navbar-inverse class 即可
注意：为了防止导航栏与页面主体中的其他内容的顶部相交错，向
标签添加至少50px的内边距(padding) 内边距值视情况而定
Bootstrap 面包屑导航（Breadcrumbs）
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表(只需要在使用的时候在class中加上class=”breadcrumb”)
Bootstrap 分页
分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页
1.分页
.pagination 添加该 class 来在页面上显示分页
.disabled .active 我们可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面
pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项
2.默认的分页
在class属性为pagination 表示默认的分页功能
3.分页的状态
class属性为disabled/active
4.分页的大小
表示 pagination-* 的用法 class 大：pagination-lg 中：pagination 小：pagination-sm
5.翻页
如果需要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现
.pager 添加该 class 来获得翻页链接
.previous .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐
.disabled 添加该 class 来设置对应按钮禁止使用
6.对齐的链接
.previous .next
Bootstrap 标签
标签可用于计数、提示或页面上其他的标记显示，使用 class .label 来显示标签。
我们可以使用修饰的class label-default/label-primary/label-success/label-info/label-warning/label-danger 来改变标签的外观
label-default 默认灰色标签
label-primary 蓝色标签
label-warning 黄色标签
Bootstrap 徽章（Badges）
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把<span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
1.激活导航状态
可以在激活状态的胶囊导航和列表导航中放置徽章，通过使用<span class="badge"> 来激活链接。
Bootstrap 超大屏幕（Jumbotron）
该组件可以增加标题的大小，并且为登录页面内容添加更多的外边距(margin)
步骤：
1.创建一个带有 class .jumbotron 的容器 <div>
2.除了更大的 <h1>，字体粗细 font-weight 被减为 200
注意：为了获得占用全部宽度且不带圆角的超大屏幕，需要在
.container class外使用.jumbotron class
Bootstrap 页面标题（Page Header）
它会在网页标题四周添加适当的间距，当一个网页中有多个标题且每个标题之间需要添加一定的间距时，这个功能就有很强的作用。如果需要使用页面标题这个功能，我们需要将我们的标题放在带有 class .page-header 的<div>中
Bootstrap 缩略图
使用bootstrap创建缩略图步骤：
1.在图像周围添加带有 class .thumbnail 的 <a> 标签
2.这会添加四个像素的内边距(padding)和一个灰色的边框 特点
3.当鼠标悬停在图像上时，会动画显示出图像的轮廓 结果
1.添加自定义的内容
我们有一个基本缩略图，我们可以向缩略图中添加各种HTML内容(标题、段落、按钮)
步骤：
1.把带有 class .thumbnail 的 <a> 标签改为 <div>
2.在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小
3.如果需要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动
Bootstrap 警告（Alerts）
我们可以通过创建一个
1.可取消的警告(dismissal Alert)
创建步骤：
1.通过创建一个<div> 同时向其中添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框
2.在上面的<div> class 添加可选的 .alert-dismissable
3.添加一个关闭按钮
2.警告中的链接
在上面的例子中成功添加好一个警告框之后，然后使用 .alert-link 实体类来快速提供带有匹配颜色的链接
Bootstrap 进度条
注意：Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。
1.默认的进度条
步骤：
1.添加一个带有class.progress的<div>
2.在上面创建好了的<div>中添加一个带有 class.progress-bar 的空的</div>
3.添加一个带有百分比表示的宽度的style属性。如：style="width:60%";表示进度条在60%的位置
2.交替的进度条
步骤：
1.添加带有 class.progress的<div>
2.在已经建好的<div>中添加 class.progress-bar和class.progress-bar-*的空的<div> 其中，*可以是：success/info/warning/danger
3.添加一个带有百分比表示的宽度的style属性。如：style="60%";用来表示进度条的位置
3.条纹进度条
步骤：
1.添加一个带有 class .progress 和 .progress-striped 的 <div>
<div class="progress progress-striped">
2.在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。
其中，* 可以是 success、info、warning、danger。
div class="progress-bar progress-bar-success" role="progressbar"
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置
4.动画进度条
步骤：
1.添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active
<div class="progress progress-striped active">
2.然后在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>
<div class="progress-bar progress-bar-success"
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
style="width: 40%;"> //这将会使条纹具有从右向左的运动感。
5.堆叠的进度条
将多个进度条放在相同的 .progress 中即可实现堆叠 <div class="progress">
Bootstrap 多媒体对象（Media Object）
.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表
Bootstrap 列表组
列表组件用于以列表的形式呈现复杂的和自定义的内容
创建步骤：
1.向元素<ul>中添加 class .list-group
2.向<li>添加 class .list-group-item
1.向列表组添加徽章
我们可以向任意的列表项中添加徽章组件，其会自动定义到右边，我们只需要在<li>元素中添加<span class="badge">即可
2.向列表组添加链接
通过使用锚点标签代替列表项，我们可以向列表组添加链接 通过添加<a>标签
3.向列表组添加自定义内容
表示此后为列表组：<a href="#" class="list-group-item">
添加一标题：<h4 class="list-group-item-heading">24*7 支持</h4>
添加一个段落：<p class="list-group-item-text">我们提供 24*7 支持。</p>
Bootstrap 面板（Panels）
面板组件作用于将DOM组件插入到一个盒子中，而创建一个基本的面板只需要向
class .panel 和 class .panel-default 即可1.面板标题
可以通过两种方式添加面板标题：
1.使用 .panel-heading class 可以很简单的向面板添加标题容器
2.使用带有 .panel-title class 的<h1>-<h6>来添加预定义样式的标题
注意：class .panel-body 标注面板内容块
2.面板脚注
我们可以向面板中添加脚注，我们只需要将按钮或者副文本放在带有 class .panel-footer 的<div>中便可
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
<div class="panel-footer">面板脚注</div>
</div>
注意：面板脚注不会从带语境色彩的面板中继承颜色和边框，因为其不是前景中的内容
3.带语境色彩的面板
语境状态类：可以通过 panel-primary、panel-success、panel-info、panel-warning、panel-danger 这些语境状态类来设置带语境色彩的面板
4.带表格的面板
如果希望在面板中创建一个没有边框的表格，我们可以在面板中使用 class .table 如果有个<div>中包含 .panel-body 我们可以向表格的顶部添加额外的边框用来分隔
如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格
5.带有列表组的面板
可以在任何面板中包含列表组，通过在<div>元素中添加 .panel 和 .panel-default 类来创建面板，同时在面板中添加列表项
在<class="panel-body">之后创建一个列表组<list-group>
Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器<div>如果需要创建 Well，只需要简单地把内容放在带有 class .well 的<div> 中即可
<div class="well">您好，我在 Well 中！</div>
1.尺寸大小
我们可以使用 well-lg 或者 well-sm 来改变well尺寸的大小 此外，这两个类是结合 .well 类使用的，这两个类会影响内边距(padding)，根据使用的类，well会显示的更大或者更小
Bootstrap 创建一个网页
1.创建一个简单的响应式网页
总结
bootstrap本地引用：
1.引用的包有：
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
注意：1.在IDEA中创建静态工程，在这个工程下面直接创建HTML文档，然后放在dist目录下，这样就能够使用了
2.src="dist/js/bootstrap.min.js"不能写成 src="/dist/js/bootstrap.min.js" 因为是相对路径
3.jquery-1.9.1.min.js不需要改成jquery.min.js也是可以的
bootstrap 远程 CDN
引入远程文件的顺序：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
BootStrap 插件
Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。
站点引用bootstrap的方式两种：
1.单独引用：使用 Bootstrap 的个别的 *.js 文件 注意：一些插件和 CSS 组件依赖于其他插件，所以在单独引用插件的时候需要确保插件之间的依赖关系
2.编译的同时引用：使用 bootstrap.js 或者是压缩版的 bootstrap.min.js
注意：所有的插件都是依赖于jQuery，所以我们在引入插件文件之前需要引入jQuery 注意版本之间的支持
1.data属性
通过data属性API使用所有的bootstrap插件(首选)
2.编程方式的API(重要)
所有的bootstrap插件都提供了纯JavaScript方式的API，所以公开的API都是支持单独或链式调用方式，并且返回其所操作元素的集合
所有的方法都可以接受一个可选的选项对象作为参数或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为）
1.$("#myModal").modal() //初始化默认行为
2.$("#myModal").modal({ keyboard: false }) //初始化不支持键盘
3.$("#myModal").modal('show') //初始化并立即调用show
注意：如果需要获取某个特定插件的实例，可以直接通过页面元素调取： $('[rel=popover]').data('popover')
3.避免命名空间冲突
某些时候bootstrap插件可能要与UI框架插件一起使用，如果在使用过程中发生命名空间冲突，可以通过调用插件 .noConflict 方法恢复期原始值
4.事件
bootstrap为大多数的插件的独特行为提供了自定义的插件，两种形式：
1.动词不定式，这会在事件开始时被触发 如：ex:show 动词不定式事件提供了preventDefault功能，使得在事件开始前可以停止操作的执行
$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
if (!data) return e.preventDefault()
})
2.过去分词形式，这会在动作执行完毕之后被触发。例如 ex: shown
Bootstrap 过渡效果（Transition）插件
这一插件提供了简单的过渡效果
注意：如果需要单独引用该插件的功能，除了其它的JS文件之外，还需要引用 transition.js 或者是引用bootstrap.js或者压缩版的 bootstrap.min.js
Bootstrap 模态框（Modal）插件
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
1.使用方法
切换模态框(modal)插件的隐藏内容：
1.通过data属性：将控制器元素(如：按钮或者链接)上设置属性 data-toggle="modal"，同时设置 data-target="#identifier"或者是href="#identifier"来指定要切换的特定的模态框(id="identifier")
2.通过JavaScript：使用这种技术，我们可以通过简单的一行JavaScript来调用带有 id="identifier"的模态框
$('#identifier').modal(options)
3.源码分析
1.使用模态窗口需要触发某种触发器(可以是按钮或者链接)
2.data-target="#mymodal" 表示向要在页面上加载的模态框目标，所以可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器
注意：虽然不能同时使用多个模块，但是可以在页面上创建多个模块不同时间加载
3.注意两点：
1. .modal用来将<div>的内容识别为模态框
2. .fade class 当模态框切换时，它会引起内容淡入淡出
4.aria-labelledby="myModalLabel" 该属性引用模态框的标题(引用会在后面创建的标题)
5.属性 aria-hidden="true"
用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）
6.<div class="modal-header"> modal-header 是为模态窗口的头部定义样式的类
7.class="close" close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式
8.data-dismiss="modal" 在这里它被用于关闭模态窗口，是一个自定义 HTML5 属性
9.class="modal-body" 是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式
10.class="modal-footer" 是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式
11.data-toggle="modal" HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口
2.选项
选项可以用来定制模态窗口的外观和感观，通过data属性或者JavaScript来传递
1.backdrop (data-backdrop) 指定一个静态背景，当用户点击模态框外部时不会关闭模态框
2.keyboard (data-keyboard) 当按下escape键时，设置为false时无效
3.show (data-show) 当初始化时显示模态框
4.remote (data-remote)
3.方法
1. .modal(options) 将内容作为模态框激活，接受一个可选的选项对象
$('#identifier').modal({
keyboard: false
})
2. .modal('toggle') 手动切换模态框 $('#identifier').modal('toggle')
3. .modal('show') 手动打开模态框 $('#identifier').modal('show')
4. .modal('hide') 手动隐藏模态框 $('#identifier').modal('hide')
4.事件
1.show.bs.modal 在调用 show 方法后触发
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
2.shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
})
3.hide.bs.modal 当调用 hide 实例方法时触发
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
})
4.hidden.bs.modal 当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})
5.loaded.bs.modal
Bootstrap 下拉菜单（Dropdown）插件
使用下拉菜单插件可以向任何组件添加下拉菜单，如果想要单独引用该插件的功能，需要引用dropdown.js
1.使用方法
可以切换下拉菜单的隐藏内容
通过data属性：通过向链接或者按钮添加 data-toggle="dropdown" 来切换下拉菜单
通过JavaScript：$('.dropdown-toggle').dropdown()
2.方法
下拉菜单切换有一个简单的方法(显示隐藏下拉菜单) $().dropdown('toggle')
3.扩展
bootstrap给 a 之类的元素都绑定上事件，终止链接默认行为。
1.data-toggle 表示以什么事件触发，常用的有：modal/popover/tooltips等
2.data-target 表示事件的目标
所以上面的两者一起使用表示data-target所指的元素以data-toggle指定的形式显示
Bootstrap 滚动监听（Scrollspy）插件
滚动监听也就是自动更新导航插件，根据滚动条的位置自动更新对应的导航目标 基于滚动条的位置向导航栏中添加 .active class
注意：如果需要单独引用该插件的功能，需要引用
scrollspy.js
1.使用方法
通过data属性：向我们想要监听的元素(body)中添加 data-spy="scroll" 然后添加带有bootstrap .nav 组件的父元素的ID或者class属性 data-target
<body data-spy="scroll" data-target=".navbar-example">
<div class="navbar-example">
通过JavaScript：$('body').scrollspy({ target: '.navbar-example' })
2.方法
通过JavaScript调用scrollspy方法时，需要调用 .refresh 方法更新DOM
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
3.事件
滚动监听要用到的事件，这些事件可以在函数中当做钩子使用
activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
4.选项
通过data属性或JavaScript来传递
Data属性名称：data-offset 作用：当计算滚动位置时，距离顶部的偏移像素
Bootstrap 标签页（Tab）插件
通过这个插件我们可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中
1.使用方法
通过data属性：需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式
通过JavaScript：
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
2.淡入淡出效果
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-panel 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
3.方法
.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href
4.事件
show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。
分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})
shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。
分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // 激活的标签页
e.relatedTarget // 前一个激活的标签页
})
5.tabindex
模态框中tabindex属性规定元素的tab键控制顺序(此时tab键用于导航)，出了safari浏览器之外，其他浏览器都有tabindex属性
Bootstrap 提示工具（Tooltip）插件
1.使用方法
通过data属性：如果需要添加提示工具(tooltip)放在他们的触发元素里面，只需要向一个锚标签添加 data-toggle="tooltip" 即可 默认情况下，插件将提示工具(tooltip)设置在顶部
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
通过JavaScript
$('#identifier').tooltip(options)
注意：使用该插件需要激活 $(function () { $("[data-toggle='tooltip']").tooltip(); });
2.选项
Bootstrap 弹出框（Popover）插件
1.使用方法
通过data属性：向一个锚标签添加 data-toggle="popover" 即可 锚的title="弹出框(popover)"的文本 默认情况下，插件将弹出框（popover）设置在顶部
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>
通过JavaScript
$('#identifier').popover(options)
注意：使用该插件需要使用脚本来启用页面中的所有的弹出框(popover) $(function () { $("[data-toggle='popover']").popover(); });
Bootstrap 警告框（Alert）插件
使用警告框（Alert）插件，可以向所有的警告框消息添加可取消（dismiss）功能
1.使用方法
两种方式启用警告框的可取消功能
通过data属性：向关闭按钮中添加 data-dismiss="alert" 就会自动为警告框添加关闭功能
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
通过JavaScript：$(".alert").alert()
2.方法
.alert() 该方法让所有的警告框都带有关闭功能 语法：$('#identifier').alert();
.alert('close') 关闭所有的警告框 语法：$('#identifier').alert('close');
注意：如果需要在关闭时启用动画效果，需要添加
.fade和.in class
3.事件
close.bs.alert 当调用 close 实例方法时立即触发该事件
$('#myalert').bind('close.bs.alert', function () {
// 执行一些动作...
})
closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）
$('#myalert').bind('closed.bs.alert', function () {
// 执行一些动作...
})
Bootstrap 按钮（Button）插件
通过按钮（Button）插件，我们可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组
1.加载状态
如果我们需要向按钮中添加加载状态，向button元素添加 data-loading-text="loading..." 作为其属性便可
2.单个切换
如果需要激活单个按钮的切换(即改变按钮的正常状态为按压状态，反之亦然)，向 button 元素添加 data-toggle="button" 作为其属性即可
3.复选框
创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换
4.单选按钮
创建单选按钮组，通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换
注意：可以通过JavaScript启用按钮插件 $('.btn').button()
Bootstrap 折叠（Collapse）插件
折叠（Collapse）插件可以很容易地让页面区域折叠起来
1.data-toggle="collapse" 添加到想要展开或折叠的组件的链接上
2.href 或 data-target 属性添加到父组件，它的值是子组件的 id
3.data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上
1.使用方法
.collapse 隐藏内容
.collapse.in 显示内容
.collapsing 当过渡效果开始时被添加，当过渡效果完成时被移除
注意：通过两种方式使用折叠插件
1.通过data属性：向元素添加 data-toggle=”collapse” 和 data-target，自动分配可折叠元素的控制，确保可折叠元素已经添加了class .collapse 同时如果希望在默认情况下是打开的，需要添加额外的class .in。
2.通过JavaScript：$(‘.collapse’).collapse()
2.方法
3.事件
Bootstrap 轮播（Carousel）插件
1.可选的标题
可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题
2.使用方法
通过 data 属性：
使用 data 属性可以很容易控制轮播（Carousel）的位置
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用
语法：$('.carousel').carousel()
Bootstrap 附加导航（Affix）插件
该插件允许指定<div>固定在页面的某个位置，不会随着页面其他部分一起滚动
1.使用方法
通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix）
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
通过data属性：如果要向元素添加附加导航行为，只需要向需要监听的元素添加 data-spy="affix" 同时需要使用偏移来定义何时切换元素的锁定和移动
2.通过CSS定位
注意：在使用附加导航插件的方式中，需要通过CSS定位内容，然后每种class都呈现特定的状态：.affix .affix-top .affix-bottom
步骤：1.在插件添加 .affix-top 来指定元素在它最顶端位置
2.当滚动经过添加了附加导航的元素时，应触发实际的附加导航(affix)，此时的 .affix 会替代 .affix-top 同时设置 position:fixed;
3.如果定义了底部偏移，当滚动到此位置时，应该将 .affix 替换为 .affix-bottom 注意：如果此时设置了此偏移，那么需要设置适当的css。在这种情况下，必要时候添加 position:absolute;
3.选项
选项：offset data属性名称：data-offset 当计算机滚动位置时，距离顶部的偏移像素。如果设置了属性值，则该偏移量将被应用到顶部或底部
扩展
freemaker FTL指令常用标签及语法 注意：使用freemarker要求所有标签必须闭合，否则freemarker标签无法解析。
1.注释：<#–注释内容–>(格式) 2.取值：代替输出数据模型的部分，格式：${数据模型}或#{数据模型}
freemarker语法及使用方法：
1. ${var} Java基本类型及String引用类型。
2. ${var!} 对null或者不存在的对象进行取值，可以设置默认值。如：${var! '我是默认值'} 表示有值时显示正常值，无值时显示默认值。
3. ${封装对象.属性} 用于对封装对象进行取值。
4. ${date?String('yyyy-MM-dd')} 用于对日期格式进行取值，需要注意的是，定义Date类型的变量时，java.util.Date无法输出日期，必须使用java.sql.Date。
5. ${var?html} 转移HTML。
6. <#assign num = 100 /> 定义变量，支持计算和赋值。
7.对List集合进行取值
<#list list集合 as item>
${item} --取值
</#list>
8.对Map集合进行取值
<#list map?keys as key>
${key}:${map[key]}
</#list>
如：Map<String,Object> map = new HashMap<String,Object>();
m.put("name","姓名");
m.put("age",18);
m.put("sex","男");
然后在页面中获取变量：
<#list m?keys as key>
${key}:${m[key]}
</#list>
然后得到结果：
name:姓名
age:18
sex:男
9.条件判断指令
1.<#if 条件>
输出
<#else>
输出
</#if>
2.switch指令，经常与case、break和default指令一起使用，参数可以为字符串。
<#switch var>
<#case 条件1>
输出
<#break>
<#case 条件2>
输出
<#break>
<#default>
输出
</#switch>
10.自定义指令
<@自定义指令名称 入参(key-value格式) ; 出参(list格式)>
运行条件
</@自定义指令名称>
PS:不同的返回值用逗号间隔开
11.常用内建函数、macro(宏指令)、function(函数指令)
