快捷導(dǎo)航

Bootstrap入門書籍之（五）導(dǎo)航條、分頁導(dǎo)航

更新時(shí)間：2016年02月17日 15:35:17 投稿：mrr

這篇文章主要介紹了Bootstrap入門書籍之（五）導(dǎo)航條、分頁導(dǎo)航的相關(guān)資料,需要的朋友可以參考下

導(dǎo)航條

導(dǎo)航條（navbar）和上一節(jié)介紹的Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航。導(dǎo)航（nav），就相差一個(gè)字，多了一個(gè)“條”字。其實(shí)在Bootstrap框架中他們還是明顯的區(qū)別。在導(dǎo)航條(navbar)中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接（類似導(dǎo)航），也可以是表單，還有就是表單和導(dǎo)航一起結(jié)合等多種形式。它們?cè)谝苿?dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式。

基礎(chǔ)導(dǎo)航條

實(shí)際上，導(dǎo)航條和導(dǎo)航在外觀上的差別并不是那么的大，但是在實(shí)際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。下面就來實(shí)現(xiàn)一個(gè)最基礎(chǔ)的導(dǎo)航條。

<div class="navbar navbar-default" role="navigation"><!--role是為了方便屏幕閱讀器理解此處內(nèi)容-->
 <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>

可以達(dá)到的效果是這樣的：

寬屏：

窄屏：

在制作一個(gè)基礎(chǔ)導(dǎo)航條時(shí)，主要注意以下幾點(diǎn)：

1.首先在制作導(dǎo)航的列表( <ul class="nav"> )基礎(chǔ)上添加類名 .navbar-nav

2.在列表外部添加一個(gè)容器（div）在這里允許的話推薦使用 <nav> ，并且使用類名 .navbar 和 .navbar-default

3.navbar 類的主要功能就是設(shè)置左右padding和圓角等效果，通過 .navbar-default 來進(jìn)行控制導(dǎo)航條的顏色比如還有 .navbar-inverse 。

帶標(biāo)題、二級(jí)菜單

在Web頁面制作中，一般都可以在菜單前面看到有一個(gè)標(biāo)題（文字字號(hào)比其它文字稍大一些），其實(shí)在Bootstrap框架也為大家做了這方面考慮，其通過 .navbar-header 和 .navbar-brand 來實(shí)現(xiàn)，如：

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB開發(fā)</a>
</div>

當(dāng)然也可以用來做logo，中文官網(wǎng)描述，在此不進(jìn)行詳細(xì)描述。

二級(jí)菜單自然不用多說，在上一篇博客中已經(jīng)進(jìn)行了詳細(xì)說明，若還是不太了解的話，可以再去翻翻我的上一篇博客，我們一起來看看下面這段代碼以及能實(shí)現(xiàn)的效果：（注意這里使用的是 navbar-inverse 反色的導(dǎo)航條）

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB開發(fā)</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>

效果如下：

帶表單

我們常常在導(dǎo)航條中都能看到搜索表單，比如知乎，新浪微博等等都具有，Bootstrap框架當(dāng)然不可能缺掉這樣的東西。使用方法也非常簡(jiǎn)單：

在Bootstrap框架中提供了一個(gè) .navbar-form ，在 .navbar 容器中放置一個(gè)帶有 .navbar-form 類名的表單；再添加 .navbar-left 讓表單左浮動(dòng)，更好實(shí)現(xiàn)對(duì)齊。

在Bootstrap中，還提供了 .navbar-right 樣式，讓元素在導(dǎo)航條靠右對(duì)齊。

把這段代碼復(fù)制到代碼當(dāng)中看看效果吧：

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>

按鈕、文本和鏈接

除了上面的一些樣式之外，bootstrap框架提供了三種其他樣式：

1.導(dǎo)航條中的按鈕 navbar-btn ，使不在 <form> 中的按鈕在導(dǎo)航條里垂直居中

2.導(dǎo)航條中的文本 navbar-text ，一般使用 <p> 元素，達(dá)到最優(yōu)的行距

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

固定導(dǎo)航條

有時(shí)，我們希望導(dǎo)航條固定在瀏覽器頂部或底部，Bootstrap為我們方便的提供了兩個(gè)類來實(shí)現(xiàn)這樣的樣式：

.navbar-fixed-top ：導(dǎo)航條固定在瀏覽器窗口頂部
.navbar-fixed-bottom ：導(dǎo)航條固定在瀏覽器窗口底部

使用方法很簡(jiǎn)單，只需要在制作導(dǎo)航條最外部容器（navbar）上追加對(duì)應(yīng)的類名即可。

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

這個(gè)固定的導(dǎo)航條會(huì) 遮住頁面上的其它內(nèi)容，除非你給 <body> 元素底部設(shè)置了 padding 。提示：導(dǎo)航條的默認(rèn)高度是 50px。如： body { padding-bottom: 70px; } ，當(dāng)然你也可以使用你自己的值。

響應(yīng)式導(dǎo)航條

在上面的例子中，導(dǎo)航條就僅僅能大屏幕下有一個(gè)不錯(cuò)的效果，在屏幕變小的情況下，還直接把所有的導(dǎo)航項(xiàng)直接展現(xiàn)出來就不適合了。為了有一個(gè)更好的顯示效果，響應(yīng)式的導(dǎo)航條設(shè)計(jì)也就隨之而來。我們先來看看效果，再一步一步分析它！

窄屏?xí)r，點(diǎn)擊右邊的按鈕圖標(biāo)可展開，效果與上面的展開效果除了 active 狀態(tài)不再溢出容器外，其他基本相同。實(shí)現(xiàn)代碼如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即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開發(fā)</a>
 </div>
 <!-- 屏幕寬度小于768px時(shí)，div.navbar-responsive-collapse容器里的內(nèi)容都會(huì)隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí)，再展開。屏幕大于768px時(shí)，默認(rèn)顯示。 -->
 <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>

分析：

和普通導(dǎo)航條一樣，最外層使用 <div class="navbar navbar-default" role="navigation"> 容器包裹，主要是 .navbar 和 .navbar-default 類。

保證在窄屏?xí)r 需要折疊的內(nèi)容必須包裹在帶一個(gè)div內(nèi)，并且為這個(gè)div加入 .collapse 、 .navbar-collapse 兩個(gè)類名。最后為這個(gè)div 添加一個(gè)class類名或者id名。

保證在窄屏?xí)r要顯示的圖標(biāo)樣式（固定寫法）：

<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>

并為button添加 data-target=”.類名/#id名” ，究競(jìng)是類名還是id名呢？由需要折疊的div 來決定。（這里很關(guān)鍵，你可以把上面的代碼在這里進(jìn)行修改，會(huì)發(fā)現(xiàn)無法展開）

分頁導(dǎo)航

分頁導(dǎo)航幾乎在所有的網(wǎng)站都可以看到，好的分頁導(dǎo)航可以給用戶帶來更好額用戶體驗(yàn)，還可以方便爬蟲在網(wǎng)頁中進(jìn)行搜索。

帶頁碼的分頁導(dǎo)航

帶頁碼的分頁導(dǎo)航，應(yīng)該是最常見的一種分頁導(dǎo)航，特別是在列表頁內(nèi)容很多的時(shí)候，會(huì)給用戶提供帶頁碼的分頁導(dǎo)航方式，在Bootstrap中使用的是 ul>li>a 這樣的結(jié)構(gòu)，在ul標(biāo)簽上加入 pagination 類：

<ul class="pagination ">
 <li><a href="#">«第一頁</a></li>
 <li><a href="#">6</a></li>
 <li class="active"><a href="#">7</a></li>
 <li><a href="#">8</a></li>
 <li><a href="#">9</a></li>
 <li><a href="#">10</a></li>
 <li class="disabled"><a href="#">最后一頁»</a></li>
</ul>

實(shí)現(xiàn)效果如下：

可以看到同樣會(huì)有 hover 、 active 、 disabled 等等狀態(tài)，當(dāng)然它也可以調(diào)整大小：在外層容器中的 .pagination 類后，添加 .pagination-lg 讓分頁導(dǎo)航變大； .pagination-sm 讓分頁導(dǎo)航變?。?/p>

翻頁分頁導(dǎo)航

其實(shí)這種方式，就是看不到具體的頁碼，只會(huì)提供一個(gè) 上一頁和下一頁的按鈕。

使用方式很簡(jiǎn)單，也就是在ul標(biāo)簽上添加 pager 類：

<ul class="pager">
 <li><a href="#">«上一頁</a></li>
 <li><a href="#">下一頁»</a></li>
</ul>

它默認(rèn)是居中顯示的，如果我們需要一個(gè)居左一個(gè)居右顯示的話，添加兩個(gè)樣式： previous 讓“上一步”按鈕居左； next 讓“下一步”按鈕居右。（同樣可以使用 disabled 表示禁用狀態(tài)）

<ul class="pager">
 <li class="previous disabled"><a href="#">«上一頁</a></li>
 <li class="next"><a href="#">下一頁»</a></li>
</ul>

其他

標(biāo)簽

在一些Web頁面中常常會(huì)添加一個(gè)標(biāo)簽用來告訴用戶一些額外的信息，比如說在導(dǎo)航上添加了一個(gè)新導(dǎo)航項(xiàng)，可能就會(huì)加一個(gè)“new”標(biāo)簽，來告訴用戶。這是新添加的導(dǎo)航項(xiàng)。

在Bootstrap專門將這樣的效果提取成為了單獨(dú)的標(biāo)簽組件?？梢允褂?<span> 這樣的行內(nèi)標(biāo)簽添加 .label 類來控制大小，再使用情景類來控制高亮顯示的顏色如： label-default 、 label-danger 等等（在原來筆記中說到過這樣的情景類，只不過這里需要加上不同的前綴）

徽章（角標(biāo)）

其實(shí)和上面的標(biāo)簽效果很大一部分是類似的，一般用作信息提示，例如剩余多少未讀信息等等，也就是我們常常能在右上角看到的未讀信息提示。在Bootstrap中，把這種效果稱作為徽章效果，使用 badge 類來實(shí)現(xiàn)。

給鏈接、導(dǎo)航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未讀的信息條目。

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
 Messages <span class="badge">4</span>
</button>

通過查看源碼，我們可以發(fā)現(xiàn)Bootstrap同樣使用 :empty 偽元素，來設(shè)置當(dāng)沒有內(nèi)容的時(shí)候隱藏：

.badge:empty {
 display: none;
}

需要注意的是IE8 不支持 :empty 選擇符，所以不會(huì)默認(rèn)隱藏；

Bootstrap 中的徽章會(huì)適配導(dǎo)航元素的激活狀態(tài)。

<ul class="nav nav-pills" role="tablist">
 <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>