全面解析Bootstrap排版使用方法（標(biāo)題）
Bootstrap和普通的HTML頁(yè)面一樣，定義標(biāo)題都是使用標(biāo)簽<h1>到<h6>,只不過(guò)Bootstrap覆蓋了其默認(rèn)的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：
<!--Bootstrap中的標(biāo)題--> <h1>Bootstrap標(biāo)題一</h1> <h2>Bootstrap標(biāo)題二</h2> <h3>Bootstrap標(biāo)題三</h3> <h4>Bootstrap標(biāo)題四</h4> <h5>Bootstrap標(biāo)題五</h5> <h6>Bootstrap標(biāo)題六</h6> <!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式--> <div class="h1">Bootstrap標(biāo)題一</div> <div class="h2">Bootstrap標(biāo)題二</div> <div class="h3">Bootstrap標(biāo)題三</div> <div class="h4">Bootstrap標(biāo)題四</div> <div class="h5">Bootstrap標(biāo)題五</div> <div class="h6">Bootstrap標(biāo)題六</div>
效果如下：
除此之外，我們?cè)赪eb的制作中，常常會(huì)碰到在一個(gè)標(biāo)題后面緊跟著一行小的副標(biāo)題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標(biāo)簽來(lái)制作副標(biāo)題。這個(gè)副標(biāo)題具有其自己的一些獨(dú)特樣式：
1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時(shí)顏色被設(shè)置為灰色（#999）。
2、由于<small>內(nèi)的文本字體在h1~h3內(nèi)，其大小都設(shè)置為當(dāng)前字號(hào)的65%；而在h4~h6內(nèi)的字號(hào)都設(shè)置為當(dāng)前字號(hào)的75%；
<!--Bootstrap中使用了<small>標(biāo)簽來(lái)制作副標(biāo)題--> <h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1> <h2>Bootstrap標(biāo)題二<small>我是副標(biāo)題</small></h2> <h3>Bootstrap標(biāo)題三<small>我是副標(biāo)題</small></h3> <h4>Bootstrap標(biāo)題四<small>我是副標(biāo)題</small></h4> <h5>Bootstrap標(biāo)題五<small>我是副標(biāo)題</small></h5> <h6>Bootstrap標(biāo)題六<small>我是副標(biāo)題</small></h6>
效果如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是針對(duì)Bootstrap標(biāo)題排版的詳細(xì)介紹，之后還有更多內(nèi)容會(huì)不斷更新，希望大家繼續(xù)關(guān)注。
相關(guān)文章
JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能
這篇文章主要介紹了JS實(shí)現(xiàn)判斷移動(dòng)端PC端功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒的形式
在實(shí)際工作中經(jīng)常會(huì)遇見(jiàn)把秒數(shù)轉(zhuǎn)化為時(shí)分秒的問(wèn)題,如何處理呢?下面這篇文章主要給大家介紹了關(guān)于JS如何將秒數(shù)轉(zhuǎn)化為時(shí)分秒形式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁(yè)面
本文主要介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁(yè)面，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總
這篇文章主要介紹了JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
js將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
javascript與dom有許多瑕疵，如著名的類(lèi)數(shù)組對(duì)象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類(lèi)，那多省時(shí)啊。2010-05-05
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開(kāi)
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開(kāi)...2007-08-08
IE6中使用position導(dǎo)致頁(yè)面變形的解決方案(js代碼)
IE6中使用position導(dǎo)致頁(yè)面變形，影響用戶(hù)體驗(yàn)，通過(guò)搜索可以通過(guò)js來(lái)實(shí)現(xiàn)。2011-01-01
這篇文章主要介紹了JS訪問(wèn)SWF的函數(shù)用法,實(shí)例分析了javascript訪問(wèn)swf文件的方法及易錯(cuò)點(diǎn)的處理技巧,需要的朋友可以參考下2015-07-07