全面解析Bootstrap排版使用方法（標(biāo)題）
Bootstrap和普通的HTML頁面一樣，定義標(biāo)題都是使用標(biāo)簽<h1>到<h6>,只不過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)簽來制作副標(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)簽來制作副標(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è)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是針對(duì)Bootstrap標(biāo)題排版的詳細(xì)介紹，之后還有更多內(nèi)容會(huì)不斷更新，希望大家繼續(xù)關(guān)注。
相關(guān)文章
easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)硪黄猠asyui form validate總是返回false的原因及解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
之前在獲取元素屬性時(shí),踩了個(gè)坑,記錄一下,下面這篇文章主要給大家介紹了關(guān)于JS字符串截取出現(xiàn)的bug以及解決方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了微信小程序返回上一頁傳參并刷新過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JS實(shí)現(xiàn)根據(jù)URL批量下載文件并壓縮成zip文件
這篇文章主要為大家學(xué)習(xí)介紹了JS如何實(shí)現(xiàn)根據(jù)URL批量下載文件并壓縮成zip文件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
js實(shí)現(xiàn)滑動(dòng)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了JavaScript逆向分析instagram登入過程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
獲取元素距離瀏覽器周邊的位置的方法getBoundingClientRect
本文為大家介紹下如何使用getBoundingClientRect()方法獲取元素距離瀏覽器周邊的位置，有類似問題的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js有所幫助2013-04-04
基于JavaScript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
IE與Firefox在JavaScript上的7個(gè)不同寫法小結(jié)
盡管那需要用長(zhǎng)串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去，偶爾還是有必要做一些簡(jiǎn)單的區(qū)分和目標(biāo)檢測(cè)來確保某塊代碼能在用戶的機(jī)器上正常運(yùn)行。2009-09-09
JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁面圖片切換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁面圖片切換功能,涉及javascript事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10