Bootstrap 導航欄
導航欄是一個很好的功能，是Bootstrap 網站的一個突出特點。 導航欄在您的應用或網站中作為導航頁頭的響應式基礎組件。 導航欄在移動設備的視圖中是折疊的，隨著可用視口寬度的增加，導航欄也會水平展開。 在Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。
默認的導航欄
創建一個默認的導航欄的步驟如下：
- 向<nav>標籤添加class.navbar、.navbar-default 。
- 向上面的元素添加role="navigation" ，有助於增加可訪問性。
- 向<div>元素添加一個標題class.navbar-header ，內部包含了帶有class navbar-brand的<a>元素。這會讓文本看起來更大一號。
- 為了嚮導航欄添加鏈接，只需要簡單地添加帶有class.nav、.navbar-nav的無序列表即可。
下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
響應式的導航欄
為了給導航欄添加響應式特性，您要折疊的內容必須包裹在帶有classes.collapse、.navbar-collapse的<div>中。折疊起來的導航欄實際上是一個帶有class.navbar-toggle及兩個data-元素的按鈕。第一個是data-toggle ，用於告訴JavaScript需要對按鈕做什麼，第二個是data-target ，指示要切換到哪一個元素。 三個帶有class.icon-bar的<span>創建所謂的漢堡按鈕。這些會切換為.nav-collapse <div>中的元素。 為了實現以上這些功能，您必須包含Bootstrap折疊（Collapse）插件 。
下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< button type = " button " class = " navbar-toggle " data-toggle = " collapse "
data-target = " #example-navbar-collapse " >
< span class = " sr-only " > 切換導航 </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
< span class = " icon-bar " > </ span >
</ button >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div class = " collapse navbar-collapse " id = " example-navbar-collapse " >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
導航欄中的表單
導航欄中的表單不是使用Bootstrap表單章節中所講到的默認的class，它是使用.navbar-form class。 這確保了表單適當的垂直對齊和在較窄的視口中折疊的行為。 使用對齊方式選項（這將在組件對齊方式部分進行詳細講解）來決定導航欄中的內容放置在哪裡。
下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< form class = " navbar-form navbar-left " role = " search " >
< div class = " form-group " >
< input type = " text " class = " form-control " placeholder = " Search " >
</ div >
< button type = " submit " class = " btn btn-default " > 提交 </ button >
</ form >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
導航欄中的按鈕
您可以使用class.navbar-btn向不在<form>中的<button>元素添加按鈕，按鈕在導航欄上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。
不要在.navbar-nav內的<a>元素上使用.navbar-btn ，因為它不是標準的button class 。
下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< form class = " navbar-form navbar-left " role = " search " >
< div class = " form-group " >
< input type = " text " class = " form-control " placeholder = " Search " >
</ div >
< button type = " submit " class = " btn btn-default " > 提交按鈕 </ button >
</ form >
< button type = " button " class = " btn btn-default navbar-btn " > 導航欄按鈕 </ button >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
導航欄中的文本
如果需要在導航中包含文本字符串，請使用class.navbar-text 。這通常與<p> 標籤一起使用，確保適當的前導和顏色。 下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< p class = " navbar-text " > w3big用戶登錄 </ p >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
結合圖標的導航鏈接
如果您想在常規的導航欄導航組件內使用圖標，那麼請使用classglyphicon glyphicon-*來設置圖標，更多請查看Bootstrap圖標 ，如下面的實例所示：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< ul class = " nav navbar-nav navbar-right " >
< li > < a href = " # " > < span class = " glyphicon glyphicon-user " > </ span > 註冊 </ a > </ li >
< li > < a href = " # " > < span class = " glyphicon glyphicon-log-in " > </ span > 登錄 </ a > </ li >
</ ul >
</ div >
</ nav >
嘗試一下»
結果如下所示：
組件對齊方式
您可以使用實用工具class.navbar-left或.navbar-right向左或向右對齊導航欄中的導航鏈接、表單、按鈕或文本這些組件。這兩個class 都會在指定的方向上添加CSS 浮動。 下面的實例演示了這點：
實例
< nav class = " navbar navbar-default " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
<!-- 向左對齊 -->
< ul class = " nav navbar-nav navbar-left " >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
< form class = " navbar-form navbar-left " role = " search " >
< button type = " submit " class = " btn btn-default " > 向左對齊-提交按鈕 </ button >
</ form >
< p class = " navbar-text navbar-left " > 向左對齊-文本 </ p >
<!-- 向右對齊 -->
< ul class = " nav navbar-nav navbar-right " >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
< form class = " navbar-form navbar-right " role = " search " >
< button type = " submit " class = " btn btn-default " > 向右對齊-提交按鈕 </ button >
</ form >
< p class = " navbar-text navbar-right " > 向右對齊-文本 </ p >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
固定到頂部
Bootstrap 導航欄可以動態定位。 默認情況下，它是塊級元素，它是基於在HTML 中放置的位置定位的。 通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為隨著頁面一起滾動的靜態導航欄。
如果您想要讓導航欄固定在頁面的頂部，請向.navbar class添加class.navbar-fixed-top。 下面的實例演示了這點：
實例
< nav class = " navbar navbar-default navbar-fixed-top " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
固定到底部
如果您想要讓導航欄固定在頁面的底部，請向.navbar class添加class.navbar-fixed-bottom。 下面的實例演示了這點：
實例
< nav class = " navbar navbar-default navbar-fixed-bottom " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
靜態的頂部
如需創建能隨著頁面一起滾動的導航欄，請添加.navbar-static-top class。 該class 不要求向<body> 添加內邊距（padding）。
實例
< nav class = " navbar navbar-default navbar-static-top " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
倒置的導航欄
為了創建一個帶有黑色背景白色文本的倒置的導航欄，只需要簡單地向.navbar class添加.navbar-inverse class即可，如下面的實例所示：
實例
< nav class = " navbar navbar-inverse " role = " navigation " >
< div class = " container-fluid " >
< div class = " navbar-header " >
< a class = " navbar-brand " href = " # " > 本教程 </ a >
</ div >
< div >
< ul class = " nav navbar-nav " >
< li class = " active " > < a href = " # " > iOS </ a > </ li >
< li > < a href = " # " > SVN </ a > </ li >
< li class = " dropdown " >
< a href = " # " class = " dropdown-toggle " data-toggle = " dropdown " > Java < b class = " caret " > </ b >
</ a >
< ul class = " dropdown-menu " >
< li > < a href = " # " > jmeter </ a > </ li >
< li > < a href = " # " > EJB </ a > </ li >
< li > < a href = " # " > Jasper Report </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 另一個分離的鏈接 </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ nav >
嘗試一下»
結果如下所示：
