導航條（navbar）和導航（nav），就相差一個字，多了一個“條”字。其實在Bootstrap框架中他們還是明顯的區別。在導航條(navbar)中有一個背景色、而且導航條可以是純鏈接（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。本文將詳細介紹Bootstrap導航條。
基礎導航條
在Bootstrap框架中，導航條和導航從外觀上差別不是太多，但在實際使用中導航條要比導航復雜得多。
導航條是在應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（并且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式
在制作一個基礎導航條時，主要分以下幾步：
1、首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”
2、在列表外部添加一個容器（p），并且使用類名“navbar”和“navbar-default”
【原理分析】
“.navbar”樣式的主要功能就是設置左右padding和圓角等效果，但它和顏色相關的樣式沒有進行任何的設置
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}導航條的顏色都是通過“.navbar-default”來進行控制
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}navbar-nav樣式是在導航.nav的基礎上重新調整了菜單項的浮動與內外邊距。同時也不包括顏色等樣式設置，而顏色和其他樣式是通過配合父容器“navbar-default”來一起實現
[注意]最好使用 <nav> 元素，如果使用的是通用的 <p> 元素的話，務必為導航條設置 role="navigation" 屬性，這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區域
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">網站首頁</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名師介紹</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">關于我們</a></li> </ul> </div>
導航條部件
【標題】
在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">小火柴的藍色理想</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> </div>
【品牌圖標】
將導航條內放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖標。由于 .navbar-brand 已經被設置了內補（padding）和高度（height），需要根據自己的情況添加一些 CSS 代碼從而覆蓋默認設置
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" style="margin-top:-10px" href="#"> <img alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC"> </a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> </div>
【二級菜單】
在基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，而且也可以帶有二級菜單的導航條
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">網站首頁</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li> <li><a href="##">關于我們</a></li> </ul> </div>
【部件排列】
通過添加 .navbar-left 和 .navbar-right工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式。例如，要對齊導航鏈接，就要把它們放在個分開的、應用了工具類的<ul>標簽里
這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導航條組件
[注意]導航條目前不支持多個 .navbar-right 類。為了讓內容之間有合適的空隙，最后一個 .navbar-right 元素使用負邊距(margin)。如果有多個元素使用這個類，它們的邊距(margin)將不能按照預期正常展現
【表單】
有的導航條中會帶有搜索表單，Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單即可
navbar-left實現左浮動，navbar-right實現右浮動
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請輸入關鍵詞" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div>
【按鈕】
對于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導航條里垂直居中。有一些對于為輔助設備提供可識別標簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（如果這個屬性存在的話），但是請注意，使用 placeholder 代替其他識別標簽的方式是不推薦的
[注意]就像標準的 按鈕類 一樣，.navbar-btn 可以被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 內，.navbar-btn 和標準的按鈕類都不應該被用在 <a> 元素上。
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div>
【文本】
把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 <p> 標簽
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <p class="navbar-text">Signed in as huochai</p> </div>
【非導航鏈接】
可以在標準的導航組件之外添加標準鏈接，使用 .navbar-link 類可以讓鏈接有正確的默認顏色和反色設置
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <p class="navbar-text navbar-left">Signed in as <a href="#" class="navbar-link">huochai</a></p> </div>
導航條位置
很多情況下，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。Bootstrap框架提供了g兩種固定導航條的方式：
? .navbar-fixed-top：導航條固定在瀏覽器窗口頂部
? .navbar-fixed-bottom：導航條固定在瀏覽器窗口底部
使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可
這個固定的導航條會遮住頁面上的其它內容，除非給 <body> 元素底部設置了 padding。提示：導航條的默認高度是 50px
body { padding-top: 70px; }
body { padding-bottom: 70px; }<body style="padding:70px 0;"> <nav class="navbar navbar-default navbar-fixed-top"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav> <p>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容<br><br>測試內容</p> <nav class="navbar navbar-default navbar-fixed-bottom"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav>
【靜止在頂部】
通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失
<nav class="navbar navbar-default navbar-static-top"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav> <p>測試內容<br><br><br>測試內容<br><br><br>測試內容<br><br><br>測試內容<br><br><br>測試內容<br><br><br>測試內容<br><br><br>測試內容</p>
響應式導航條
Bootstrap的響應式導航條實現如下：
1、保證在窄屏時需要折疊的內容必須包裹在帶一個p內，并且為這個p加入collapse、navbar-collapse兩個類名。最后為這個p添加一個class類名或者id名
<div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
或者
<div class="collapse navbar-collapse example"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
2、保證在窄屏時要顯示的圖標樣式（固定寫法）：
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
3、并為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的p來決定。如
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
或者，對應class="example"
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div> </div>
反色導航條
反色導航條其實是Bootstrap框架提供的第二種風格的導航條，與默認的導航條相比，使用方法并無區別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導航條的背景色和文本做了修改
<div class="navbar navbar-inverse" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
