bootstrap導航條常用屬性總結
@(5 - html)[html|總結]
[toc]
導航條的可訪問性
務必使用 <nav> 元素,或者,如果使用的是通用的 <div> 元素的話,務必為導航條設置 role="navigation" 屬性,這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區(qū)域。
品牌圖標(logo)
將導航條內放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖標。由于 .navbar-brand 已經(jīng)被設置了內補(padding)和高度(height),你需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認設置。
表單
將表單放置于 .navbar-form 之內可以呈現(xiàn)很好的垂直對齊,并在較窄的視口(viewport)中呈現(xiàn)折疊狀態(tài)。 使用對齊選項可以規(guī)定其在導航條上出現(xiàn)的位置。
注意,.navbar-form 和 .form-inline 的大部分代碼都一樣,內部實現(xiàn)使用了 mixin。 某些表單組件,例如輸入框組,可能需要設置一個固定寬度,從而在導航條內有合適的展現(xiàn)。
按鈕
- 加上.navbar-btn可簡單實現(xiàn)垂直居中。該方法可以卻不應該被用在a元素上
文本
把文本包裹在 .navbar-text中時,為了有正確的行距和顏色,通常使用 <p> 標簽。
<p class="navbar-text">Signed in as Mark Otto</p>
非導航的鏈接
或許你希望在標準的導航組件之外添加標準鏈接,那么,使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設置。
<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可使導航條fixed在頂部,同時需要給body設置70的padding top。
或者使用.navbar-static-top,此方法不需要增加內補
反色
通過添加navbar-inverse可使導航條反色。