排版

标题

Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签<h1>到<h6>,只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：

通过比较可以发现，Bootstrap 标题样式进行了以下显著的优化重置：

1、重新设置了 margin-top 和 margin-bottom 的值， h1~h3 重置后的值都是 20px；h4~h6 重置后的值都是 10px。
2、所有标题的行高都是 1.1（也就是 font-size 的 1.1 倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px 和 h6=12px。

在 Bootstrap 中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名

<div class="h1">Bootstrap标题一</div>
<div class="h3">Bootstrap标题三</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

除此之外，我们在 Web 的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在 Bootstrap 中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式：

1、行高都是 1，而且 font-weight 设置了 normal 变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、如果<small>内的文本字体在 h1~h3 内，其大小都设置为当前字号的 65%；而在 h4~h6 内的字号都设置为当前字号的 75%；

1	`<h1>孤儿院无私奉献30年<small>一曲人性的赞歌</small></h1>`

文本

段落是排版中另一个重要元素之一。在 Bootstrap 中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为 14px(font-size)。
2、行高为 1.42857143（line-height），大约是 20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。 3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，在实际项目中，可以根据自己的需求进行重置。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以 Web 页面中文本（包括段落 p 元素）如无重置都会具有这些样式效果。

另外在 Bootstrap 中，为了让段落 p 元素之间具有一定的间距，便于用户阅读文本，特意设置了 p 元素的 margin 值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）

在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap 同样对这部分做了一些轻量级的处理。

如果想让一个段落 p 突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。用法如下：

1	`<p class="lead">我是特意要突出的文本，我的样子长成这样。</p>`

除此之外，Bootstrap 还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。

1 2	`<p>我是一个段落，这个段落中“<strong>强调</strong>”一词将会加粗显示。</p> <p>我是一个段落，这个段落中“<b>强调</b>”一词将会加粗显示。</p>`

在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式 font-style 值为 italic 实现之外，在 Bootstrap 中还可以通过使用标签<em>或<i>来实现

1 2	`<p>我正在学习<i>Bootstrap</i>。</p> <p>我正在学习<em>Bootstrap</em>。我发现<em>Bootstrap</em>真的好强大。</p>`

在 Bootstrap 中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap 还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

1	`<p class="text-danger">我是一段危险信息，请用Bootstrap框架中的危险风格显示</p>`

Bootstrap 通过定义四个类名来控制文本的对齐风格

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐 .text-justify：两端对齐

1	`<p class="text-right">给我加个类，我就向右对齐。</p>`

列表

Bootstrap 提供了六种形式的列表：

普通列表
有序列表
去点列表
内联列表
描述列表
水平描述列表

无序列表和有序列表使用方式和我们平时使用的一样（无序列表使用 ul，有序列表使用 ol 标签），在样式方面，Bootstrap 只是在此基础上做了一些细微的优化

在 Bootstrap 中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap 为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格

Bootstrap 像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

水平定义列表就像内联列表一样，Bootstrap 可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
只有屏幕大于 768px 的时候，添加类名“.dl-horizontal”才具有水平定义列表效果

代码

在 Bootstrap 主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。

<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap 也考虑到这一点，你只需要在 pre 标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为 340px，一旦超出这个高度，就会在 Y 轴出现滚动条。

表格

表格是 Bootstrap 的一个基础组件之一，Bootstrap 为表格提供了1种基础样式和 4 种附加样式以及1个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

Bootstrap 还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果：

1
2
3

<tr class="active">
    <td>…</td>
</tr>

特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态，需要在<table>标签上加入table-hover类。

“.table”主要有三个作用：
给表格设置了 margin-bottom:20px 以及设置单元内距
在 thead 底部设置了一个 2px 的浅灰实线
每个单元格顶部设置了一个 1px 的浅灰实线

带边框的表格

<table class="table">
  <thead>
    <tr>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格单元格</td>
      <td>表格单元格</td>
      <td>表格单元格</td>
    </tr>
  </tbody>
</table>

鼠标悬浮高亮表格，可以和 Bootstrap 其他表格混合使用。简单点说，只要你想让你的表格具备悬浮高亮效果，你只要给这个表格添加“table-hover”类名就好了。例如，将前面介绍的几种表格结合使用：

1
2
3

<table class="table table-striped table-bordered table-hover">
…
</table>

不管制作哪种表格都离不开类名“table”。所以大家在使用 Bootstrap 表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。

随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在 Bootstrap 中也为表格提供了响应式的效果，将其称为响应式表格。

Bootstrap 提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap 中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>