### 什么是`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="#">&laquo;</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="#">&raquo;</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`标签，添加一个预定义样式的标题。

*