基本的HTML模板
Bootstrap的HTML标准模板 Hello, world!
bootstrap不支持IE兼容模式，在IE运行最新的渲染模式
初始化移动浏览显示
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可
同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码
全局样式
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
排版
1、标题：
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：
在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式
2、段落：
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）
可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
3、强调内容、加粗、斜体
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理<p class="lead"></p>
除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。
<b></b><strong></strong>
<em></em><i></i>
4、强调相关类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
5、对齐风格
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
6.列表
在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下：
无序列表- …
有序列表
- …
定义列表
- …
- …
☑ 普通列表
☑ 有序列表
☑ 去点列表class="list-unstyled"
☑ 内联列表
通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
☑ 描述列表
☑ 水平描述列表
只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果
- 北京
- 北京是中国的首都
- 上海
- 东方的巴黎
7、代码
在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码2、使用<pre></pre>来显示多行块代码3、使用<kbd></kbd>来显示用户输入代码在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码2、<pre>：一般是针对于多行代码（也就是成块的代码）3、<kbd>:一般是表示用户要通过键盘输入的内容只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
8、表格
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
主要包括：
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
基础表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
斑马线表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
带边框的表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
鼠标悬浮高亮的表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
紧凑型表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
响应式表格
| 表格标题 | 表格标题 | 表格标题 |
|---|---|---|
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
| 表格单元格 | 表格单元格 | 表格单元格 |
Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色
除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。
注意要实现悬浮状态，需要在<table>标签上加入table-hover类。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。