bootstrap導(dǎo)航條常用屬性總結(jié)
@(5 - html)[html|總結(jié)]
[toc]
導(dǎo)航條的可訪問性
務(wù)必使用 <nav> 元素话告,或者回窘,如果使用的是通用的 <div> 元素的話章鲤,務(wù)必為導(dǎo)航條設(shè)置 role="navigation" 屬性彰阴,這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個導(dǎo)航區(qū)域被济。
品牌圖標(biāo)(logo)
將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 <img> 元素即可展示自己的品牌圖標(biāo)。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(bǔ)(padding)和高度(height)贴妻,你需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認(rèn)設(shè)置切油。
表單
將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對齊,并在較窄的視口(viewport)中呈現(xiàn)折疊狀態(tài)名惩。 使用對齊選項(xiàng)可以規(guī)定其在導(dǎo)航條上出現(xiàn)的位置澎胡。
注意,.navbar-form 和 .form-inline 的大部分代碼都一樣娩鹉,內(nèi)部實(shí)現(xiàn)使用了 mixin攻谁。 某些表單組件,例如輸入框組弯予,可能需要設(shè)置一個固定寬度戚宦,從而在導(dǎo)航條內(nèi)有合適的展現(xiàn)。
按鈕
- 加上.navbar-btn可簡單實(shí)現(xiàn)垂直居中锈嫩。該方法可以卻不應(yīng)該被用在a元素上
文本
把文本包裹在 .navbar-text中時受楼,為了有正確的行距和顏色,通常使用 <p> 標(biāo)簽呼寸。
<p class="navbar-text">Signed in as Mark Otto</p>
非導(dǎo)航的鏈接
或許你希望在標(biāo)準(zhǔn)的導(dǎo)航組件之外添加標(biāo)準(zhǔn)鏈接艳汽,那么,使用 .navbar-link 類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置对雪。
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
組件排列
可用.navbar-left或.navbar-right來向右或者左對齊元素,.navbar-right只能使用一個
固定在頂部
.navbar-fixed-top可使導(dǎo)航條fixed在頂部,同時需要給body設(shè)置70的padding top河狐。
或者使用.navbar-static-top,此方法不需要增加內(nèi)補(bǔ)
反色
通過添加navbar-inverse可使導(dǎo)航條反色慌植。