建立一個預設的導航欄的步驟如下：
向 <nav> 标簽添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可通路性。
向 <div> 元素添加一個标題 class .navbar-header，内部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一号。
為了向導航欄添加連結，隻需要簡單地添加帶有 class .nav、.navbar-nav 的無序清單即可。
下面的執行個體示範了這點：
結果如下所示：
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕，按鈕在導航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。
Bootstrap<基礎十七>導航欄導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的視圖中是折疊的，随着可用視口寬度的增加，導航欄也會水準展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。
如果需要在導航中包含文本字元串，請使用 class .navbar-text。這通常與 <p> 标簽一起使用，確定适當的前導和顔色。下面的執行個體示範了這點：
如果您不想在正常的導航欄導航元件内使用标準的連結，那麼請使用 class navbar-link 來為預設的和倒轉的導航欄選項添加适當的顔色，如下面的執行個體所示：
您可以使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航連結、表單、按鈕或文本 這些元件。這兩個 class 都會在指定的方向上添加 CSS 浮動。下面的執行個體示範了這點：
Bootstrap 導航欄可以動态定位。預設情況下，它是塊級元素，它是基于在 HTML 中放置的位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為随着頁面一起滾動的靜态導航欄。
如果您想要讓導航欄固定在頁面的頂部，請向 .navbar class 添加 class .navbar-fixed-top。下面的執行個體示範了這點：
為了防止導航欄與頁面主體中的其他内容的頂部相交錯，請向 <body> 标簽添加至少 50 像素的内邊距（padding），内邊距的值可以根據您的需要進行設定。Bootstrap<基礎十七>導航欄導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的視圖中是折疊的，随着可用視口寬度的增加，導航欄也會水準展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。
如果您想要讓導航欄固定在頁面的底部，請向 .navbar class 添加 class .navbar-fixed-bottom。下面的執行個體示範了這點：
如需建立能随着頁面一起滾動的導航欄，請添加 .navbar-static-top class。該 class 不要求向 <body> 添加内邊距（padding）。
為了建立一個帶有黑色背景白色文本的倒置的導航欄，隻需要簡單地向 .navbar class 添加 .navbar-inverse class 即可，如下面的執行個體所示：
Bootstrap<基礎十七>導航欄導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的視圖中是折疊的，随着可用視口寬度的增加，導航欄也會水準展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。
系列文章：
<a href="http://www.cnblogs.com/lansy/p/4334611.html%20" target="_blank">Bootstrap <基礎一> css 概覽</a>
<a href="http://www.cnblogs.com/lansy/p/4337381.html%20" target="_blank">Bootstrap<基礎二>網絡系統</a>
<a href="http://www.cnblogs.com/lansy/p/4339002.html%20" target="_blank">Bootstrap<基礎三>排版</a>
<a href="http://www.cnblogs.com/lansy/p/4341498.html%20" target="_blank">Bootstrap<基礎四> 代碼</a>
<a href="http://www.cnblogs.com/lansy/p/4343823.html%20" target="_blank">Bootstrap <基礎五>表格</a>
<a href="http://www.cnblogs.com/lansy/p/4346492.html">Bootstrap<基礎六> 表單</a>
<a href="http://www.cnblogs.com/lansy/p/4355913.html%20" target="_blank">Bootstrap <基礎七>按鈕</a>
<a href="http://www.cnblogs.com/lansy/p/4380536.html%20" target="_blank">Bootstrap <基礎八>圖檔</a>
<a href="http://www.cnblogs.com/lansy/p/4395706.html" target="_blank">Bootstrap<基礎九>輔助類</a>
<a href="http://www.cnblogs.com/lansy/p/4397409.html%20" target="_blank">Bootstrap<基礎十> 響應式實用工具</a>
<a href="http://www.cnblogs.com/lansy/p/4401476.html%20" target="_blank">Bootstrap<基礎十一>字型圖示(Glyphicons)</a>
<a href="http://www.cnblogs.com/lansy/p/4408654.html%20" target="_blank">Bootstrap <基礎十二>下拉菜單（Dropdowns）</a>
<a href="http://www.cnblogs.com/lansy/p/4413528.html%20" target="_blank">Bootstrap<基礎十三> 按鈕組</a>
<a href="http://www.cnblogs.com/lansy/p/4423945.html%20" target="_blank">Bootstrap<基礎十四> 按鈕下拉菜單</a>
<a href="http://www.cnblogs.com/lansy/p/4427558.html%20" target="_blank">Bootstrap<基礎十五> 輸入框組</a>
<a href="http://www.cnblogs.com/lansy/p/4430985.html%20" target="_blank">Bootstrap<基礎十六> 導航元素</a>
<a href="http://www.cnblogs.com/lansy/p/4433938.html%20" target="_blank">Bootstrap<基礎十七>導航欄</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十八>面包屑導航（Breadcrumbs）</a>
<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十九>分頁</a>
<a href="http://www.cnblogs.com/lansy/p/4446365.html%20" target="_blank">Bootstrap<基礎二十> 标簽</a>
<a href="http://www.cnblogs.com/lansy/p/4449345.html%20" target="_blank">Bootstrap <基礎二十一>徽章（Badges）</a>
<a href="http://www.cnblogs.com/lansy/p/4452409.html%20" target="_blank">Bootstrap <基礎二十二>超大螢幕（Jumbotron）</a>
<a href="http://www.cnblogs.com/lansy/p/4458972.html%20" target="_blank">Bootstrap <基礎二十三>頁面标題（Page Header）</a>
<a href="http://www.cnblogs.com/lansy/p/4462048.html%20" target="_blank">Bootstrap<基礎二十四> 縮略圖</a>
<a href="http://www.cnblogs.com/lansy/p/4475377.html%20" target="_blank">Bootstrap <基礎二十五>警告（Alerts）</a>
<a href="http://www.cnblogs.com/lansy/p/4478334.html%20" target="_blank">Bootstrap <基礎二十六>進度條</a>