到

,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：

<!--Bootstrap中的标题--> 
<h1 id="7085b6f7d201bbd97954324e9f18709f">Bootstrap标题一</h1>
<h2 id="7491c17f090de3cdcd96f48d476f2d8f">Bootstrap标题二</h2>
<h3 id="76d593f6fe3965ee4b4d6cc18d3b12de">Bootstrap标题三</h3>
<h4 id="b3ba9f68385e075461fc46b222037313">Bootstrap标题四</h4>
<h5 id="b481591fd4990c7c5db1ab2374365805">Bootstrap标题五</h5>
<h6 id="893e227bdf48c565f2d487d3d03fee28">Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

登录后复制

效果如下：

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

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。

2、由于内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1 id="24984815848f93740327b1e4d2abd83c">Bootstrap标题一<small>我是副标题</small></h1>
<h2 id="8ad0672a74c0af8e78a311cee110320e">Bootstrap标题二<small>我是副标题</small></h2>
<h3 id="4a5638c1da6fefef2c5653cd42fb5c23">Bootstrap标题三<small>我是副标题</small></h3>
<h4 id="ffbc7be21c483cd3da5dacb08f2ef920">Bootstrap标题四<small>我是副标题</small></h4>
<h5 id="85a634330e4ef14ff6ed6a28f0c3b362">Bootstrap标题五<small>我是副标题</small></h5> 
<h6 id="cfa55a480222b16ef9af888438467cd8">Bootstrap标题六<small>我是副标题</small></h6>

登录后复制

效果如下：

以上就是针对Bootstrap标题排版的详细介绍，之后还有更多内容会不断更新，希望大家继续关注。