Bootstrap入門書籍之（五）導覽列、分頁導覽_javascript技巧-js教程-PHP中文網

導航條

導航條（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）在這裡允許的話建議使用

，並且使用類別名稱 .navbar 和 .navbar-default

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 ，使不在

中的按鈕在導覽條垂直居中

2.導覽條中的文字 navbar-text ，一般使用

元素，達到最優的行距

3.導航條中的普通鏈接 navbar-link ，非導航的鏈接，添加這個類，可以有正確的默認顏色與反色設置
但這三種樣式在框架中使用時受到一定的限制，需要和 navbar-brand 、 navbar-nav 搭配起來使用。而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。

固定導航條

有時，我們希望導航條固定在瀏覽器頂部或底部，Bootstrap為我們方便的提供了兩個類別來實現這樣的樣式：

.navbar-fixed-top ：導覽條固定在瀏覽器視窗頂部
.navbar-fixed-bottom ：導航條固定在瀏覽器視窗底部

使用方法很簡單，只需要在製作導航條最外部容器（navbar）上追加對應的類別名稱即可。

<nav class="navbar navbar-default navbar-static-top">
 ...
</nav>

登入後複製

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <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>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <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>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

登入後複製

分析：

和普通导航条一样，最外层使用