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

2019-11-20 11:07:40

字體：大中小

來源：轉載

供稿：網(wǎng)友

Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：

<!--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中他也考慮了這種排版效果，使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：

1、行高都是1，而且font-weight設置了normal變成了常規(guī)效果（不加粗），同時顏色被設置為灰色（#999）。

2、由于<small>內的文本字體在h1~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>

效果如下：