2.1.1 标题样式
1. 各级标题的基本样式
Bootstrap中定义了所有HTML标题（<h1>～<h6>）的样式。除了设置各级标签的字号，Bootstrap还设置了标题的底部外边距（margin-top）、行高（line-height）、字体粗细（为500），具体标题样式如图2-1所示。在添加标题样式时，可以直接使用对应的标题标签，也可以在文字标签中添加类名，如<h1>、<h2>等。
标题样式
图2-1 Bootstrap中的标题样式
【例2-1】使用Bootstrap各级标题样式添加古诗《游子吟》。在HTML5文件中引入Bootstrap文件，然后依次添加一级标题～六级标题，具体代码如下：
<h1>慈母手中线，</h1> <h2>游子身上衣。</h2> <h3>临行密密缝，</h3> <h4>意恐迟迟归。</h4> <h5>谁言寸草心，</h5> <h6>报得三春晖。</h6>
上面代码的实现效果如图2-2所示。
图2-2 标题样式
说明
图2-2所示效果是通过直接添加标题标签实现的，而通过在文字标签中添加标题类名，也可以实现同样的效果，例如下面的代码也可以实现图2-2所示的效果。
<p class="h1">慈母手中线，</p> <p class="h2">游子身上衣。</p> <p class="h3">临行密密缝，</p> <p class="h4">意恐迟迟归。</p> <p class="h5">谁言寸草心，</p> <p class="h6">报得三春晖。</p>
2. 添加副标题
Bootstrap还提供了副标题样式。添加副标题时，读者需要使用<small>标签将副标题内容括起来，或者为标签设置类名.small。
【例2-2】使用Bootstrap实现网购商城中好店推荐页面。实现时，读者可以直接在标题标签中添加<small>标签。具体代码如下：
<h3>每日好店<small class="text-info">发现深藏的好店</small></h3> <div class="clearfix"> <h4 class="float-left w-50">吃货推荐<small class="text-info">暂无店铺评价</small></h4> <h4 class="float-left w-50">爱家一族<small class="text-info">暂无店铺评价</small></h4> </div> <img src="images/1.png" alt="">
上述代码的运行效果如图2-3所示。
图2-3 添加副标题
说明
上述方法是通过<small>标签添加的副标题，读者也可以通过其他内联标签添加内联标题，然后在标签中设置类名.small。例如下面代码也可以实现图2-3所示的效果。
【例2-3】通过设置class属性的值来实现图2-3所示效果。具体代码如下：
<h3>每日好店<small class="text-info">发现深藏的好店</small></h3> <div class="clearfix"> <h4 class="float-left w-50">吃货推荐<span class="small text-info">暂无店铺评价</span></h4> <h4 class="float-left w-50">爱家一族<span class="small text-info">暂无店铺评价</span></h4> </div> <img src="images/1.png" alt="">
说明
例2-2和例2-3中，为了设置副标题的颜色，还添加了类名.text-info。关于类名，后面小节有具体介绍。
3. 显式标题
显式标题的文字字号比标题的文字字号更大。显式标题一共分为4个等级，其类名分别为display-1、display-2、display-3、display-4，其字体大小分别为6rem、5.5rem、4.5rem和3.5rem，其实现的文字样式如图2-4所示。
图2-4 各级显式标题的实现样式