### 什么是`Bootstrap`？
`bootstrap`是一个最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。通俗的讲，`bootstrap`就是预先定义好了一套优美的`CSS`样式和一套`组件`，前端开发者可以直接拿来使用，加速开发效率，并且他是响应式布局的，所以写的一套代码可以在多种设备中进行使用。
### 如何使用`bootstrap`？
要使用`bootstrap`很简单，只要[下载](https://github.com/twbs/bootstrap "")源代码，然后把`bootstrap.min.css`和`bootstrap.min.js`以及`jquery.min.js`导入到`html`文件中即可使用。或者是使用[bootcss](http://www.bootcss.com/ "")网站提供的`CDN`加速服务，把链接导入到`HTML`文件中即可，要注意的事情是，`jquery`必须放在`bootstrap.min.js`之前，因为`bootstrap.min.js`依赖`jquery`，那么以下将使用`CDN`的方式展示样例代码：
```html
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
```
### `bootstrap`中的栅格系统：
`bootstrap`中最强大也是最核心的一个东西就是响应式，而响应式是通过一个叫做**栅格系统**的东西实现的。栅格系统把一个页面分成12列，bootstrap会根据媒体查询获取当前的浏览器的宽度，然后再把宽度平均分配给12列，html中一个盒子可以占用多列。要使用栅格系统，需要使用到`container/container-fluid`和`row`以及`col-xs-/col-sm-/col-md-/col-lg-`类。`container`相当于一个`table`盒子，装着许许多多的`row`，每个row里面装着许许多多的`col`，通过这样一种结构，构成了一个栅格系统，而`container`和`container-fluid`的唯一区别是，`container-fluid`是全屏的，而`container`不是全屏的，左右两边会有一个间距。
* `col-lg-n`:浏览器大于1200px时候的显示方式.
* `col-md-n`:浏览器大于992px时候的显示方式.
* `col-sm-n`:浏览器>=768px时候的显示方式.
* `col-xs-n`:浏览器小鱼768时候的限时方式.
### `bootstrap`中的表格：
这个用起来相当简单，只要给表格添加一个`table`类就可以了。然后根据需要再添加其他的类。
1. `table-striped`：条纹状表格。
2. `table-bordered`：带边框的表格。
3. `table-hover`：鼠标放上去有悬停效果。
可以通过`css`样式来给表格的具体列指定宽度。
### 30个你必须知道的选择器:
```
http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/
```
### `bootstrap`中的表单：
1. `form`类的种类：
* `form`：这个类使表单元素填充100%的宽度。
* `form-inline`：这个类使所有表单元素水平排列，表现出`inline-block`的样式。
* `form-horizontal`：这个类使得他的子`form-group`盒子表现出水平排列的效果。
2. `form`子盒子的类：
* 直接子类通过`form-group`来将`label`和`表单元素`包裹起来可以获得最好的排列。
* `input/textarea/select`等元素需要添加`form-control`类，才能使用`bootstrap`的定义好的样式。
* `checkbox`：这个比较特殊，需要使用label进行包裹来获得最好的展示效果。
* `form`相当于有`container`的功能，`form-group`有`row`的功能，可以直接在`form-group`中加一层`div`，然后添加`class='col-md-10'`这样的代码来设置栅格布局。
### 按钮：
使用按钮很简单，只需要给`button`添加一个`btn`的类就可以了，然后根据需要添加其他的有特殊效果的`class`。
例如：
```html
<button type="button" class="btn btn-default">Default</button>
```
带有特殊效果的预定义的类有：
1. `btn-default`：默认的白色效果。
2. `btn-primary`：蓝色的效果。
3. `btn-success`：绿色的表示成功的效果。
4. `btn-info`：浅蓝色的表示信息的效果。
5. `btn-warning`：黄色的表示警告的效果。
6. `btn-danger`： 红色的表示危险的效果。
另外，如果想让一个按钮表现出和父盒子一样的宽度，添加`btn-block`可以把按钮拉升到100%的宽度。还有一点需要注意的事，为了在所有浏览器中表现一致，官方推荐在`input`为`submit`的时候，应该尽量使用`button`来代替。
### 辅助类：
1. 具有情景颜色意义的文本：
* `text-muted`：颜色比较柔和的文本。
* `text-primary`：蓝色的文本。
* `text-success`： 代表成功的绿色文本。
* `text-info`： 表示信息的浅蓝色文本。
* `text-warning`： 表示警告信息的黄色文本。
* `text-danger`：表示危险的红色文本。
2. 具有情景颜色意义的文本背景：
* `bg-primary`：蓝色的背景，字体是白色的。
* `bg-success`：绿色的背景，字体是黑色的。
* `bg-info`： 浅蓝色的背景，字体是黑色的。
* `bg-warning`：黄色的背景，字体是黑色的。
* `bg-danger`：红色的背景，字体是黑色的。
### `svg`字体图标：
一种矢量字体图标，为什么说是字体，因为它的大小可以随着字体的大小变化而变化，并且放大不会出现锯齿。使用一个`span`标签包裹起来。
使用方式：
```html
<span class="glyphicon glyphicon-search"></span>
```
### 下拉菜单：
下拉菜单的`触发器`和`下拉列表`，需要放在一个`class`为`dropdown`的盒子里面。
1. 触发器：必须有一个`data-toggle='dropdown'`的属性，否则`bootstrap`不能给你收缩。并且为了更好的效果，需要给触发器一个`dropdown-toggle`的`class`。
2. 下拉列表：下拉列表需要添加一个`dropdown-menu`类。
### 输入框组：
通过在文本输入框`<input>`前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。使用 `.input-group` 包裹 `.input-group-addon` 类，可以给 `.form-control` 的前面或后面添加额外的元素。
基本使用：
```html
<div class="form-group">
<div class="input-group">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
</div>
</div>
```
**注意**：
1. 不支持在输入框的单独一侧添加多个额外元素。
2. 不支持在单个输入框组中添加多个表单控件。
### 导航条：
1. 标签页：使用`nav`类定义一个标签页。然后使用`nav-tabs`定义一个普通的标签页，`nav-pills`来定义一个胶囊式的标签页。示例代码如下：
```html
**普通标签页**
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
```html
**胶囊式标签页**
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
2. 导航条：
* 导航条使用`navbar`类来作为导航条盒子。
* 然后在里面使用`container`或者是`container-fluid`平铺的来作为容器。
* 使用`navbar-header`来装`brand`。
* 使用`collapse`这个盒子包装链接，可以在缩小的时候，有一个弹出按钮。
* 使用`nav navbar-nav`来包裹真正的链接。
* 使用`navbar-fixed-top`可以让导航条固定在顶部。
* 使用`navbar-static-top`来静止在顶部，如果往下面滚动就会消失。
* 使用`navbar-inverse`改变导航条的外观。
3. 分页：
```
<nav>
<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>
</nav>
```
`active`表示当前按钮是选中的，`disabled`表示当前按钮不可用。
4. 标签：
使用`label`类来表示一个标签。
```
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
```
5. 警告框：
使用`alert`类来表示一个警告框。
```
<div class="alert alert-success" role="alert">...</div>
```
* `alert-success`:绿色的成功的。
* `alert-info`：浅蓝色的表示信息。
* `alert-warning`：黄色的表示警告。
* `alert-danger`：红色的表示危险的，一般是失败的。
6. 面板：
* 通过使用`panel`类来添加一个面板。
* 通过使用`panel-heading`来给面板添加一个标题，也可以通过使用`panel-title`类的`h1-h6`标签，添加一个预定义样式的标题。
*