導航條
導航條（navbar）和上一節介紹的Bootstrap入門書籍之（四）選單、按鈕及導覽。導航（nav），就相差一個字，多了一個「條」字。其實在Bootstrap框架中他們還是明顯的差別。在導航條(navbar)中有一個背景色、而且導航條可以是純連結（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。它們在行動裝置上可以折疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。
基礎導航條
實際上，導航條和導航在外觀上的差異並不是那麼的大，但是在實際使用中導航條要比導航複雜得多。下面就來實作一個最基礎的導航條。
<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容--> <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="#">PHP</a></li> </ul> </div>
可以達到的效果是這樣的：
寬螢幕：
窄螢幕：
在製作一個基本導航條時，主要注意以下幾點：
1.首先在製作導覽的清單(
2.在列表外部添加一個容器（div）在這裡允許的話 建議使用
3.navbar 類別的主要功能是設定左右padding和圓角等效果，透過 .navbar-default 來進行控制導覽條的顏色例如還有 .navbar-inverse 。
有標題、二級選單
在Web頁面製作中，一般都可以在選單前面看到有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過.navbar-header和.navbar-brand 來實現，如：
<div class="navbar-header"> <a href="##" class="navbar-brand">WEB开发</a> </div>
當然也可以用來做logo， 中文官網描述 ，在此不進行詳細描述。
二級菜單自然不用多說，在上一篇博客中已經進行了詳細說明，若還是不太了解的話，可以再去翻翻我的上一篇博客，我們一起來看看下面這段程式碼以及能實現的效果：（注意這裡使用的是navbar-inverse 反色的導航條）
<div class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">WEB开发</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li class="dropdown" > <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">jQuery</a></li> <li><a href="#">Vue</a></li> <li><a href="#">NodeJS</a></li> </ul> </li> <li ><a href="#">PHP</a></li> </ul> </div>
效果如下：
附表單
我們常常在導航條中都能看到搜尋表單，例如知乎，新浪微博等等都具有，Bootstrap框架當然不可能缺少這樣的東西。使用方法也非常簡單：
在Bootstrap框架中提供了一個 .navbar-form ，在 .navbar 容器中放置一個帶有 .navbar-form 類別名稱的表單；再添加 .navbar-left 讓表單左浮動，更好實現對齊。
在Bootstrap中，也提供了 .navbar-right 樣式，讓元素在導覽條靠右對齊。
把這段程式碼複製到程式碼當中看看效果吧：
<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>
按鈕、文字和連結
除了上面的一些樣式之外，bootstrap框架提供了三種其他樣式：
1.導覽條中的按鈕 navbar-btn ，使不在
