4.1 Bootstrap排版
本节我们先介绍Bootstrap排版样式方面的内容，主要包括标题、强调、缩略语、地址、引用和列表等元素，是Bootstrap样式设计的基础内容。
4.1.1 标题
HTML中的所有标题标签（从<h1>到<h6>）均可使用标题样式。另外，Bootstrap也提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。
【代码4-1】一个页面标题的布局设计（详见源代码ch04目录中ch04.cssHx.html文件）
上面的代码展示了标题样式，页面效果如图4.1所示。
图4.1 标题样式
在标题内还可以包含<small>标签或赋予.small类的元素，可以用来标记副标题。
【代码4-2】一个页面副标题的布局设计（详见源代码ch04目录中ch04.cssHxSmall.html文件）
上面的代码展示了副标题样式，页面效果如图4.2所示。
图4.2 副标题样式
4.1.2 页面主体
Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并且这些属性会直接赋予<body>中的元素和所有段落元素。
此外，段落（<p>）元素还被设置了等于0.5倍行高（即10px）的底部外边距（margin）；同时，通过添加.lead类可以让段落突出显示。
【代码4-3】一个页面主体样式的设计（详见源代码ch04目录中ch04.bodyCopy.html文件）
上面的代码展示了页面主体的段落样式，其中06行代码通过增加.lead类实现了突出显示，页面效果如图4.3所示。
图4.3 页面主体样式
4.1.3 强调
Bootstrap框架针对页面需要强调的元素优化设计了加粗、斜体、对齐和颜色强调等样式，使用时直接使用HTML元素标签并辅助一些样式即可。
【代码4-4】一个使用强调样式的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）
在上面的代码中，02行代码通过<strong>标签实现了文本加粗显示，05行代码通过<em>标签实现了文本斜体显示，08行代码通过<small>标签针对不需要强调的文本实现了缩小显示，页面效果如图4.4所示。
图4.4 强调样式（一）
【代码4-5】一个通过文本对齐方式实现强调样式的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）
在上面的代码中，03～05行代码分别通过“.text-left”“.text-center”和“.text-right”样式类实现了文本的3种对齐方式，页面效果如图4.5所示。
图4.5 强调样式（二）
【代码4-6】一个通过颜色样式强调文本的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）
在上面的代码中，03～07行代码分别通过“.muted”“.text-warning”“.text-error”“.text-info”和“.text-success”样式类实现了通过颜色强调文本的效果，页面效果如图4.6所示。
图4.6 强调样式（三）
4.1.4 缩略语
Bootstrap框架实现了对缩略语<abbr>元素的增强样式，当鼠标悬停在缩写或缩写词上时就会显示出完整文本内容。缩略语元素带有title属性，外观展现为带有浅色的虚线框，当鼠标移至上面时会变成带有“问号”的指针。
【代码4-7】一个使用缩略语样式的设计（详见源代码ch04目录中ch04.abbr.html文件）
在上面的代码中，02行代码通过<abbr>标签实现了缩略语样式，同时通过title属性实现了完整文本的显示，页面效果如图4.7所示。
图4.7 缩略语样式
4.1.5 地址
Bootstrap框架为地址<address>标签设置了增强样式，相关地址信息会以常规的形式呈现在页面上。
【代码4-8】一个使用地址标签的样式设计（详见源代码ch04目录中ch04.address.html文件）
在上面的代码中，通过<address>标签实现了增强型的地址样式，页面效果如图4.8所示。
图4.8 地址样式
4.1.6 引用
目前有很多专业的学术网站，其中包含很多的文献、论文或文档资源，因此页面中实现引用功能就是必不可少的了。Bootstrap框架为引用<blockquotes>标签实现了增强样式。下面看一段示例代码。
【代码4-9】一个应用引用的样式设计（详见源代码ch04目录中ch04.blockquotes.html文件）
在上面的代码中，通过<blockquotes>标签实现了增强型的引用样式，并在09行代码中通过.pull-right类实现了另一种风格的引用样式。【代码4-9】的页面效果如图4.9所示。
图4.9 引用样式
4.1.7 列表
Bootstrap框架针对列表同样实现了增强样式，包括无序列表、有序列表、无样式列表和内联式列表等，下面分别进行介绍。
【代码4-10】一个应用无序列表的样式设计（详见源代码ch04目录中ch04.unorderedList.html文件）
在上面的代码中，通过<ul>-<li>标签组实现了增强型的有序列表样式，页面效果如图4.10所示。
图4.10 无序列表样式
【代码4-11】一个应用有序列表的样式设计（详见源代码ch04目录中ch04.orderedList.html文件）
在上面的代码中，通过<ol>-<li>标签组实现了增强型的有序列表样式，页面效果如图4.11所示。
图4.11 有序列表样式
【代码4-12】一个应用无样式列表的样式设计（详见源代码ch04目录中ch04.unstyled.html文件）
在上面的代码中，02行通过.list-unstyled类实现了无样式列表样式，页面效果如图4.12所示。
图4.12 无样式列表样式
【代码4-13】一个应用内联式列表的样式设计（详见源代码ch04目录中ch04.inlineList.html文件）
在上面的代码中，02行代码通过.list-inline类实现了内联式列表样式，页面效果如图4.13所示。
图4.13 内联式列表样式
4.1.8 描述
描述是HTML 5新增的功能标签，是对列表标签的功能延伸。Bootstrap框架对描述标签同样进行了功能增强。
【代码4-14】一个应用默认描述样式的设计（详见源代码ch04目录中ch04.description.html文件）
在上面的代码中，通过<dl>-<dt>-<dd>标签组实现了默认描述样式列表，页面效果如图4.14所示。
图4.14 默认描述列表样式
4.1.9 代码
代码是HTML 5新增的功能标签，可以在文本中显示代码样式的内容。Bootstrap框架对代码标签进行了功能增强，主要包括内联式代码（<code>标签）和基本代码块（<pre>标签）两类。下面分别进行介绍。
【代码4-15】一个应用内联式代码的设计（详见源代码ch04目录中ch04.inlineCode.html文件）
01 <div class="bs-docs-example">
02 inline code: <code>alert('this is inline code.')</code>.
03 </div>
在上面的代码中，通过<code>标签实现了内联式代码样式的文本，页面效果如图4.15所示。
图4.15 内联式代码样式
【代码4-16】一个应用基本代码块的设计（详见源代码ch04目录中ch04.precode.html文件）
01 <div class="bs-docs-example">
02 pre code: <pre>var i=1;<br>var j=2;<br>alert(i+j);</pre>
03 </div>
在上面的代码中，通过<pre>标签实现了基本代码段样式的文本，页面效果如图4.16所示。
图4.16 基本代码段样式
【代码4-17】（详见源代码ch04目录中ch04.precode.html文件）
一个应用基本代码块的设计，其特点是专为多行代码而设计的，呈现一个最大高度为340px的带滚动条的区域来显示多行代码
在上面的代码中，通过在<pre>标签添加.pre-scrollable类实现了带滚动条的基本代码段样式的文本，页面效果如图4.17所示。
图4.17 带滚动条的基本代码段样式