全面解析Bootstrap排版使用方法（標題）_javascript技巧

Bootstrap和普通的HTML頁面一樣，定義標題都是使用標籤

到

,只不過Bootstrap覆蓋了其預設的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：

<!--Bootstrap中的标题--> 
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>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、由於內的文字字體在h​​1~h3內，其大小都設定為目前字號的65%；而在h4~h6內的字號都設定為目前字號的75%；

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5> 
<h6>Bootstrap标题六<small>我是副标题</small></h6>

效果如下：

 

以上就是針對Bootstrap標題排版的詳細介紹，之後還有更多內容會不斷更新，希望大家繼續關注。