Bootstrap和普通的HTML頁面一樣,定義標(biāo)題都是使用標(biāo)簽
通過比較可以發(fā)現(xiàn),Bootstrap標(biāo)題樣式進(jìn)行了以下顯著的優(yōu)化重置:
1、重新設(shè)置了margin-top和margin-bottom的值, h2~h4重置后的值都是20px;h5~h7重置后的值都是10px。
2、所有標(biāo)題的行高都是1.1(也就是font-size的1.1倍),而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標(biāo)題字體大小,h2=36px,h3=30px,h4=24px,h5=18px,h6=14px和h7=12px。
標(biāo)題的具體運用非常簡單,和我們平時運用是一樣的,使用
在Bootstrap中為了讓非標(biāo)題元素和標(biāo)題使用相同的樣式,還特意定義了.h2~.h7六個類名。
對比兩個示例的效果圖,可以說他們的效果是一模一樣的。
除此之外,我們在Web的制作中,常常會碰到在一個標(biāo)題后面緊跟著一行小的副標(biāo)題。在Bootstrap中他也考慮了這種排版效果,使用了標(biāo)簽來制作副標(biāo)題。這個副標(biāo)題具有其自己的一些獨特樣式:
1、行高都是1,而且font-weight設(shè)置了normal變成了常規(guī)效果(不加粗),同時顏色被設(shè)置為灰色(#999)。
2、由于內(nèi)的文本字體在h2~h4內(nèi),其大小都設(shè)置為當(dāng)前字號的65%;而在h5~h7內(nèi)的字號都設(shè)置為當(dāng)前字號的75%;
詳細(xì)代碼請參閱bootstrap.css文件中第407行~第443行。
h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h2 .small, .h2 .small, h3 .small, .h3 .small, h4 .small, .h4 .small { font-size: 65%; } h5, .h5, h6, .h6, h7, .h7 { margin-top: 10px; margin-bottom: 10px; } h5 small, .h5 small, h6 small, .h6 small, h7 small, .h7 small, h5 .small, .h5 .small, h6 .small, .h6 .small, h7 .small, .h7 .small { font-size: 75%; }
創(chuàng)新互聯(lián)www.cdcxhl.cn,專業(yè)提供香港、美國云服務(wù)器,動態(tài)BGP最優(yōu)骨干路由自動選擇,持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證, 機(jī)房獨有T級流量清洗系統(tǒng)配攻擊溯源,準(zhǔn)確進(jìn)行流量調(diào)度,確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟,新人活動云服務(wù)器買多久送多久。