bootstrap導航條常用屬性總結

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)。

按鈕

  1. 加上.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可使導航條反色。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容