這些是你開始使用導航條以前須要知道的東西:工具
導航條要求一個包裹的.navbar
以及一個配色方案類(能夠是.navbar-default
或者.navbar-inverse
)。佈局
當在一個導航條中使用多個組件時,必須用一些 對齊類 。spa
導航條以及它們的內容默認是流式的。使用可選的容器以限制它們的橫向寬度。插件
使用.pull-left
和.pull-right
以快速對齊子組件。code
使用<nav>
元素確保其易用性,或者,若是使用一個更經常使用的元素,好比說<div>
,要在每一個導航條上添加一個role="navigation"
屬性,面向使用輔助技術的用戶,把它明確地標示爲一個地標區域。、orm
PS:愈來愈喜歡這樣文檔對基礎的介紹了。
ci
導航欄內置支持少許的子組件。視你的須要混合以及配合下面功能:rem
.navbar-brand
用於你的公司、產品名、項目名。文檔
.navbar-nav
用於全高度、輕量級的導航(包括支持彈出菜單)。get
.navbar-form
用於垂直居中的默認大小的輸入框和按鈕。
.navbar-toggler
用於使用咱們的摺疊板插件,以及別的導航切換行爲。
這裏有一些示例,演示了全部的包含在一個默認的輕導航條中的子組件:
<nav class="navbar navbar-light bg-faded"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline navbar-form pull-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav>
僞代碼上:
《nav class="navbar navbar-light bg-faded"》<br> --| 《a class="navbar-brand" href="#"》<br> --| 《ul class="nav navbar-nav"》<br> --| --| 《li class="nav-item active"》<br> --| --| --| 《a class="nav-link"》<br> --| --| 《li class="nav-item"》<br> --| --| --| 《a class="nav-link"》<br> --| --| 《li class="nav-item"》<br> --| --| --| 《a class="nav-link"》<br> --| --| 《li class="nav-item"》<br> --| --| --| 《a class="nav-link"》<br> --| 《form class class="form-inline navbar-form pull-right"》<br> --| --| 《input class="form-control" type="text"》<br> --| --| 《button class="btn btn-success-outline"》<br>
將導航條主題化從未如此容易,這要歸功於結合使用一個簡單的連接顏色修飾類以及background-color
實用工具。換句話說,你能夠指定亮或暗、應用一個背景色。
<nav class="navbar navbar-dark bg-inverse"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline navbar-form pull-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav> <nav class="navbar navbar-dark bg-primary"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline navbar-form pull-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav> <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> <form class="form-inline navbar-form pull-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-success-outline" type="submit">Search</button> </form> </nav>
雖然這不是必需的,你能夠把一個導航條包裹在一個.container
中,以在網頁中居中它,或者說在導航欄內部添加一個.container
使內容居中。
<div class="container"> <nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2"> <a class="navbar-brand" href="#">Navbar</a> </nav> </div> <nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav>
PS:全部的DIV樣式border:1px solid red; 因此來看基本同樣,差異不大。
導航欄能夠靜態放置(這是它默認的行爲),或者固定在視口聽頂部或底部。
<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #2aabd2"> <a class="navbar-brand" href="#">固定在頂部</a> </nav> 1 <br><br><br>1<br><br><br><br><br><br><br><br><br> <br><br><br>1<br><br><br><br><br><br><br><br><br> <br><br><br>1<br><br><br><br><br><br><br><br><br> <br><br><br>1<br><br><br><br><br><br><br><br><br> <br><br><br>1<br><br><br><br><br><br><br><br><br> 1 <nav class="navbar navbar-fixed-bottom navbar-light bg-faded" style="background-color: #2aabd2"> <a class="navbar-brand" href="#">固定在底部</a> </nav>
PS:這裏要說明。我截圖用的是FF截屏插件,全頁面截圖。你們看底部顯示不是那麼ok。
可是事實上,他已經在個人屏幕最下方。而且當我滾動頁面時,頂部導航條和底部導航條都在我屏幕可視範圍的最高和最低處。
咱們的摺疊塊插件容許你使用一個<button>
或<a>
以切換隱藏內容。
點擊三條槓,出現文本。
<div class="collapse" id="exCollapsingNavbar"> <div class="bg-inverse p-a"> <!--BOOTSTRAP.CSS中 .p-a{padding: 1rem !important;} --> <h4>Collapsed content</h4> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar"> ☰ </button> </nav>
製做更復雜的導航欄模式,好比說用在Bootstrap v3中,使用.navbar-togglebar-*
類結合.navbar-toggler
類。這些類覆蓋了咱們的響應式實用工具,從而只在內容知足顯示的時候顯示導航。
效果在lg-up時
效果在lg-down時
<nav class="navbar navbar-light bg-faded"> <button class="navbar-toggler hidden-xl-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> ☰ </button> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <a class="navbar-brand" href="#">Responsive navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav>PS:這個效果是依據 .hidden-*-up or down 自適應顯示。很贊!啃起來有點吃力...