Bootstrap是Twitter推出的一个简单灵活的，基于HTML5和CSS3的用于搭建WEB前端页面的html、css、javascript工具集。拥有友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特点。Bootstrap让Web开发更迅速、更简单。
1.Bootstrap下载
官网：http://getbootstrap.com/；新手入门：http://getbootstrap.com/getting-started/
我们可以在官网下载到Bootstrap，Bootstrap的源码，如果不想下载，还可以使用Bootstrap提供的CDN。
2.Bootstrap文件结构
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3.Bootstrap的HTML标准模板
Bootstrap的HTML标准模板 Hello, world!
4.Bootstrap的标题
和普通的HTML页面一样，Bootstrap定义标题也是使用标签h1到h6，只不过Bootstrap覆盖了其默认的样式，使其在所有浏览器下显示的效果是一样的，定义的具体规则如下表所示：
标题一 标题二 标题一副标题 标题二副标题 标题一 标题二 标题三
注意：副标题行高都是1，font-weight不加粗，颜色为灰色（#999）；h1~h3的副标题，大小为标题的65%，h4~h6的副标题，大小为标题的75%；详细代码请参阅bootstrap.css文件中第407行~第443行。
5.Bootstrap的内容
1）强调内容
在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。
通过添加类名“.lead”让一个段落p突出显示，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：
普通文本
强调文本
2）通过颜色来表示强调
例如：
普通文本
3）粗体和斜体
粗体使用b标签或strong标签来实现；斜体使用em标签或i标签来实现。
普通文本粗体普通文本
普通文本粗体普通文本
普通文本斜体普通文本
普通文本斜体普通文本
4）文本对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：
我居左
我居中
我居右
我两端对齐
6.Bootstrap的列表
Bootstrap根据平时的使用情形提供了六种形式的列表：普通列表、有序列表、去点列表、内联列表、定义列表、水平定义列表。
1）普通列表
- 普通列表1
- 普通列表2
2）有序列表
- 有序列表1
- 有序列表2
- 有序列表1
- 有序列表2
- 有序列表2.1
- 有序列表2.2
- 有序列表3
3）去点列表
给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
- 有序列表1
- 有序列表2
4）内联列表（为制作水平导航而生）
像去点列表一样，通过添加类名“.list-inline”来实现内联列表，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
- 导航栏条目1
- 导航栏条目2
5）定义列表
Bootstrap定义列表只是调整了行间距，外边距和字体加粗效果。
- 北京
- 中国的首都。
- 上海
- 国家中心城市，超大城市。
6）水平定义列表
水平定义列表就像内联列表一样，Bootstrap可以给dl标签添加类名“.dl-horizontal”给定义列表实现水平显示效果。
- 北京
- 中国的首都。
- 上海
- 国家中心城市，超大城市。
7.Bootstrap的表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。具体如下：
基础表格 基础表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
这部分代码包含了Bootstrap常用的表格，效果图如下所示：
Bootstrap还为表格的行元素tr提供了五种不同的类名（对应的源码，请查看bootstrap.css文件中第1484行~第1583行），每种类名控制了行的不同背景颜色，具体说明如下表所示：
其使用非常的简单，只需要在元素中添加上表对应的类名，就能达到效果：
注意：
1.要实现悬浮状态，需要在
