4.1 Bootstrap排版
本节我们先介绍Bootstrap排版样式方面的内容，主要包括标题、强调、缩略语、地址、引用和列表等元素，是Bootstrap样式设计的基础内容。
4.1.1 标题
HTML中的所有标题标签，从<h1>到<h6>均可以使用标题样式。另外，从Bootstrap 3还提供了．h1到．h6类，为的是给内联（inline）属性的文本赋予标题的样式。
【代码4-1】是一个页面标题的布局设计（详见源代码ch04目录中ch04.cssHx.html文件）：
01 <div class="bs-example bs-example-type">
02 <table class="table">
03 <tbody>
04 <tr>
05 <td><h1>h1. Bootstrap heading</h1></td>
06 </tr>
07 <tr>
08 <td><h2>h2. Bootstrap heading</h2></td>
09 </tr>
10 <tr>
11 <td><h3>h3. Bootstrap heading</h3></td>
12 </tr>
13 <tr>
14 <td><h4>h4. Bootstrap heading</h4></td>
15 </tr>
16 <tr>
17 <td><h5>h5. Bootstrap heading</h5></td>
18 </tr>
19 <tr>
20 <td><h6>h6. Bootstrap heading</h6></td>
21 </tr>
22 </tbody>
23 </table>
24 </div>
上面的代码展示了标题样式，页面效果如图4.1所示。
图4.1 标题样式
在标题内还可以包含<small>标签或赋予．small类的元素，可以用来标记副标题。
【代码4-2】是一个页面副标题的布局设计（详见源代码ch04目录中ch04.cssHxSmall.html文件）：
01 <div class="bs-example bs-example-type">
02 <table class="table">
03 <tbody>
04 <tr>
05 <td><h1>h1. Bootstrap heading <small>Secondary
text</small></h1></td>
06 </tr>
07 <tr>
08 <td><h2>h2. Bootstrap heading <small>Secondary
text</small></h2></td>
09 </tr>
10 <tr>
11 <td><h3>h3. Bootstrap heading <small>Secondary
text</small></h3></td>
12 </tr>
13 <tr>
14 <td><h4>h4. Bootstrap heading <small>Secondary
text</small></h4></td>
15 </tr>
16 <tr>
17 <td><h5>h5. Bootstrap heading <small>Secondary
text</small></h5></td>
18 </tr>
19 <tr>
20 <td><h6>h6. Bootstrap heading <small>Secondary
text</small></h6></td>
21 </tr>
22 </tbody>
23 </table>
24 </div>
上面的代码展示了副标题样式，页面效果如图4.2所示。
图4.2 副标题样式
4.1.2 页面主体
Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并且这些属性会直接赋予<body>中的元素和所有段落元素。
此外，段落（<p>）元素还被设置了等于0.5倍行高（即10px）的底部外边距（margin）；同时，通过添加．lead类可以让段落突出显示。
【代码4-3】是一个页面主体样式的设计（详见源代码ch04目录中ch04.bodyCopy.html文件）：
01 <div class="bs-docs-example">
02 <p>Bootstrap框架默认将全局的字体大小设置为14px，行高度设置为20px，并且
这些属性会直接赋予<body>中的元素和所有段落元素。</p>
03 <p>此外，段落元素还被设置了等于0.5倍行高（即10px）的底部外边距
（margin）；同时，通过添加．lead类可以让段落突出显示。</p>
04 </div>
05 <div class="bs-docs-example">
06 <p class="lead">通过添加 <code>.lead</code> 让段落突出显示</p>
07 </div>
上面的代码展示了页面主体的段落样式，其中第07行代码通过增加．lead类实现了突出显示，页面效果如图4.3所示。
图4.3 页面主体样式
4.1.3 强调
Bootstrap框架针对页面需要强调的元素，优化设计了加粗、斜体、对齐和颜色强调等样式，使用时直接使用HTML元素标签并辅助一些样式即可。
【代码4-4】是一个使用强调样式的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）：
01 <div class="bs-docs-example">
02 <p><strong>用增加font-weight值的方式加粗强调一段文本</strong>.</p>
03 </div>
04 <div class="bs-docs-example">
05 <p><em>还可以用斜体字强调一段文本</em>.</p>
06 </div>
07 <div class="bs-docs-example">
08 <p><small>对于不需要强调的inline或block类型的文本使用small标签
</small>.</p>
09 </div>
在上面的代码中，第02行代码通过<strong>标签实现了文本加粗显示，第05行代码通过<em>标签实现了文本斜体显示，08行代码通过<small>标签针对不需要强调的文本实现了缩小显示，页面效果如图4.4所示。
图4.4 强调样式（一）
【代码4-5】是一个通过文本对齐方式实现强调样式的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）：
01 <div class="bs-docs-example">
02 <p><strong>通过对齐方式也可以强调一段文本</strong>.</p>
03 <p class="text-left">左对齐文字</p>
04 <p class="text-center">中间对齐文字</p>
05 <p class="text-right">右侧对齐文字</p>
06 </div>
在上面的代码中，第03～05行代码分别通过“.text-left”“.text-center”和“.text-right”样式类实现了文本的三种对齐方式，页面效果如图4.5所示。
图4.5 强调样式（二）
【代码4-6】是一个通过颜色样式强调文本的设计（详见源代码ch04目录中ch04.emphasizeTag.html文件）：
01 <div class="bs-docs-example">
02 <p><strong>通过工具类使用颜色来强调不同类别文本</strong>.</p>
03 <p class="muted">This is muted text by '.muted' class.</p>
04 <p class="text-warning">This is warning text by '.text-
warning' class.</p>
05 <p class="text-error">This is error text by '.text-error'
class.</p>
06 <p class="text-info">This is info text by '.text-info'
class.</p>
07 <p class="text-success">This is success text by '.text-
success' class.</p>
08 </div>
在上面的代码中，第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文件）：
01 <div class="bs-docs-example">
02 <p>当把鼠标悬停在缩略语<abbr title="abbreviation">abbr</abbr>标签上
需要看到完整文本内容就要使用title属性．</p>
03 </div>
在上面的代码中，第02行代码通过<abbr>标签实现了缩略语样式，同时通过title属性实现了完整文本的显示，页面效果如图4.7所示。
图4.7 缩略语样式
4.1.5 地址
Bootstrap框架为地址<address>标签设置了增强样式，相关地址信息会以常规的形式呈现在页面上。
【代码4-8】是一个使用地址标签的样式设计（详见源代码ch04目录中ch04.address.html文件）：
01 <div class="bs-docs-example">
02 <address>
03 <strong>Bootstrap, Inc.</strong><br>
04 ABC Street 688号，北京，中国<br>
05 <abbr title="Telphone Number">tel:</abbr> (12)3456-7890
06 </address>
07 <address>
08 <strong>姓名</strong><br>
09 <a href="mailto:#">email@bootstrap.com</a>
10 </address>
11 </div>
在上面的代码中，通过<address>标签实现了增强型的地址样式，页面效果如图4.8所示。
图4.8 地址样式
4.1.6 引用
目前有很多专业的学术网站，其中包含很多的文献、论文或文档资源，因此页面中实现引用功能就是必不可少的了。Bootstrap框架为引用<blockquotes>标签实现了增强样式，下面看一段示例代码。
【代码4-9】是一个应用引用的样式设计（详见源代码ch04目录中ch04.blockquotes.html文件）：
01 <div class="bs-docs-example">
02 <blockquote>
03 <p>在标准的引用里，可以很简单地改变风格和内容．</p>
04 <p>添加small标签来注明引用来源，来源名称可以放在cite标签里
面．</p>
05 <small>Cite in <cite title="Bootstrap
Inc.">bootstrap.com</cite></small>
06 </blockquote>
07 </div>
08 <div>
09 <blockquote class="pull-right">
10 <p>在标准的引用里，可以很简单地改变风格和内容．</p>
11 <p>添加small标签来注明引用来源，来源名称可以放在cite标签里
面．</p>
12 <small>Cite in <cite title="Bootstrap
Inc.">bootstrap.com</cite></small>
13 </blockquote>
14 </div>
在上面的代码中，通过<blockquotes >标签实现了增强型的引用样式，并在第09行代码中通过使用．pull-right类实现了另一种风格的引用样式。【代码4-9】的页面效果如图4.9所示。
图4.9 引用样式
4.1.7 列表
Bootstrap框架针对列表同样实现了增强样式，包括无序列表、有序列表、无样式列表和内联式列表等，下面分别进行介绍。
【代码4-10】是一个应用无序列表的样式设计（详见源代码ch04目录中ch04.unorderedList.html文件）：
01 <div class="bs-docs-example">
02 <ul>
03 <li>Tom</li>
04 <li>Jack</li>
05 <li>Sub List
06 <ul>
07 <li>Football</li>
08 <li>NBA</li>
09 <li>Baseball</li>
10 </ul>
11 </li>
12 <li>123.com</li>
13 <li>abc.com</li>
14 </ul>
15 </div>
在上面的代码中，通过<ul>-<li>标签组实现了增强型的有序列表样式，页面效果如图4.10所示。
图4.10 无序列表样式
【代码4-11】是一个应用有序列表的样式设计（详见源代码ch04目录中ch04.orderedList.html文件）：
01 <div class="bs-docs-example">
02 <ol>
03 <li>Tom</li>
04 <li>Jack</li>
05 <li>Sub List
06 <ul>
07 <li>Football</li>
08 <li>NBA</li>
09 <li>Baseball</li>
10 </ul>
11 </li>
12 <li>123.com</li>
13 <li>abc.com</li>
14 </ol>
15 </div>
在上面的代码中，通过<ol>-<li>标签组实现了增强型的有序列表样式，页面效果如图4.11所示。
图4.11 有序列表样式
【代码4-12】是一个应用无样式列表的样式设计（详见源代码ch04目录中ch04.unstyled.html文件）：
01 <div class="bs-docs-example">
02 <ul class="unstyled">
03 <li>Tom</li>
04 <li>Jack</li>
05 <li>Sub List
06 <ul>
07 <li>Football</li>
08 <li>NBA</li>
09 <li>Baseball</li>
10 </ul>
11 </li>
12 <li>123.com</li>
13 <li>abc.com</li>
14 </ul>
15 </div>
在上面的代码中，第02行通过．unstyled类实现了无样式列表样式，页面效果如图4.12所示。
图4.12 无样式表样式
【代码4-13】是一个应用内联式列表的样式设计（详见源代码ch04目录中ch04.inlineList.html文件）：
01 <div class="bs-docs-example">
02 <ul class="inline">
03 <li>Tom</li>
04 <li>Jack</li>
05 <li>Football</li>
06 <li>NBA</li>
07 <li>Baseball</li>
08 <li>123.com</li>
09 <li>abc.com</li>
10 </ul>
11 </div>
在上面的代码中，第02行代码．inline类实现了内联式列表样式，页面效果如图4.13所示。
图4.13 内联式列表样式
4.1.8 描述
描述是HTML5新增的功能标签，是对列表标签的功能延伸。Bootstrap框架对描述标签同样进行了功能增强，主要包括默认描述样式和水平描述样式两类，下面分别进行介绍。
【代码4-14】是一个应用默认描述样式的设计（详见源代码ch04目录中ch04.description.html文件）：
01 <div class="bs-docs-example">
02 <dl>
03 <dt>Bootstrap</dt>
04 <dd>Bootstrap is a CSS framework.</dd>
05 <dt>CSS</dt>
06 <dd>CSS is Cascading Style Sheet.</dd>
07 <dd>CSS 3 is the updated version.</dd>
08 <dt>HTML 5</dt>
09 <dd>HTML 5, CSS & Bootstrap is powerful web tools.</dd>
10 </dl>
11 </div>
在上面的代码中，通过<dl>-<dt>-<dd>标签组实现了默认描述样式列表，页面效果如图4.14所示。
图4.14 默认描述列表样式
【代码4-15】是一个应用水平描述样式的设计（详见源代码ch04目录中ch04.horidescription.html文件）：
01 <div class="bs-docs-example">
02 <dl class="dl-horizontal">
03 <dt>Bootstrap</dt>
04 <dd>Bootstrap is a CSS framework.</dd>
05 <dt>CSS</dt>
06 <dd>CSS is Cascading Style Sheet.</dd>
07 <dd>CSS 3 is the updated version.</dd>
08 <dt>HTML 5</dt>
09 <dd>HTML 5, CSS & Bootstrap....</dd>
10 </dl>
11 </div>
在上面的代码中，第02行代码通过．dl-horizontal类实现了水平描述样式列表，页面效果如图4.15所示。
图4.15 水平描述列表样式
4.1.9 代码
代码是HTML5新增的功能标签，可以在文本中显示代码样式的内容。Bootstrap框架对代码标签进行了功能增强，主要包括内联式代码（<code>标签）和基本代码块（<pre>标签）两类，下面分别进行介绍。
【代码4-16】是一个应用内联式代码的设计（详见源代码ch04目录中ch04.inlineCode.html文件）：
01 <div class="bs-docs-example">
02 inline code: <code>alert('this is inline code.')</code>.
03 </div>
在上面的代码中，通过<code>标签实现了内联式代码样式的文本，页面效果如图4.16所示。
图4.16 内联式代码样式
【代码4-17】是一个应用基本代码块的设计（详见源代码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.17所示。
图4.17 基本代码段样式
【代码4-18】也是一个应用基本代码块的设计，与【代码4-17】的区别是左侧增加了行号（详见源代码ch04目录中ch04.precode.html文件）：
01 <div class="bs-docs-example">
02 <pre class="prettyprint linenums" style="margin-bottom:
4px; ">
03 var i=1; <br>var j=2; <br>alert(i+j);
04 </pre>
05 </div>
在上面的代码中，通过在<pre>标签添加．prettyprint类和．linenums类实现了带行号的基本代码段样式的文本，页面效果如图4.18所示。
图4.18 带行号的基本代码段样式
【代码4-19】同样是一个应用基本代码块，其特点是专为多行代码设计的，呈现了一个最大高度为350px的带滚动条的区域来显示多行代码（详见源代码ch04目录中ch04.precode.html文件）：
01 <div class="bs-docs-example">
02 <pre class="pre-scrollable">
03 var i=1; <br>var j=2; <br>alert(i+j); <br>
04 var i=1; <br>var j=2; <br>alert(i+j); <br>
05 var i=1; <br>var j=2; <br>alert(i+j); <br>
06 . .....
07 </pre>
08 </div>
在上面的代码中，通过在<pre>标签添加．pre-scrollable类实现了带滚动条的基本代码段样式的文本，页面效果如图4.19所示。
图4.19 带滚动条的基本代码段样式