Bootstrap中導(dǎo)航條和分頁(yè)導(dǎo)航如何實(shí)現(xiàn)

這篇文章主要介紹Bootstrap中導(dǎo)航條和分頁(yè)導(dǎo)航如何實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

本篇文章帶大家了解一下Bootstrap中的導(dǎo)航條和分頁(yè)導(dǎo)航，順帶介紹一下標(biāo)簽和徽章，希望對(duì)大家有所幫助！

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

導(dǎo)航條（navbar）和上一節(jié)介紹的導(dǎo)航（nav），就相差一個(gè)字，多了一個(gè)“條”字。其實(shí)在Bootstrap框架中他們還是明顯的區(qū)別。在導(dǎo)航條(navbar)中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接（類似導(dǎo)航），也可以是表單，還有就是表單和導(dǎo)航一起結(jié)合等多種形式。

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

在Bootstrap框中，導(dǎo)航條和導(dǎo)航從外觀上差別不是太多，但在實(shí)際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。

使用方法：

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

第一步：首先在制作導(dǎo)航的列表(<ul class="nav">)基礎(chǔ)上添加類名“navbar-nav” 第二步：在列表外部添加一個(gè)容器（div），并且使用類名“navbar”和“navbar-default”

原理分析：

而導(dǎo)航條的顏色都是通過“.navbar-default”來(lái)進(jìn)行控制。

3、為導(dǎo)航條添加標(biāo)題、二級(jí)菜單及狀態(tài)

在Web頁(yè)面制作中，常常在菜單前面都會(huì)有一個(gè)標(biāo)題（文字字號(hào)比其它文字稍大一些），其實(shí)在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來(lái)實(shí)現(xiàn)，此功能主要起一個(gè)提醒功能，當(dāng)然改良一下可以當(dāng)作是logo(此處不做過多闡述)。其樣式主要是加大了字體設(shè)置，并且設(shè)置了最大寬度，同樣在默認(rèn)導(dǎo)航條（navbar-default）下，對(duì)navbar-brand也做了顏色處理，同樣的，在基礎(chǔ)導(dǎo)航條中對(duì)菜單提供了當(dāng)前狀態(tài)，禁用狀態(tài)，懸浮狀態(tài)等效果，而且也可以帶有二級(jí)菜單的導(dǎo)航條。

4、帶表單的導(dǎo)航條

在Bootstrap框架中提供了一個(gè)“navbar-form”，使用方法很簡(jiǎn)單，在navbar容器中放置一個(gè)帶有navbar-form類名的表單，在Bootstrap框架中，還提供了“navbar-right”樣式，讓元素在導(dǎo)航條靠右對(duì)齊。這里有一個(gè)條件，只有當(dāng)瀏覽器視窗寬度大于768px生效。

5、導(dǎo)航條中的按鈕、文本和鏈接

Bootstrap框架的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素?？蚣芴峁┝巳N其他樣式：

1）導(dǎo)航條中的按鈕navbar-btn

2）導(dǎo)航條中的文本navbar-text

3）導(dǎo)航條中的普通鏈接navbar-link

但這三種樣式在框架中使用時(shí)受到一定的限制，需要和navbar-brand、navbar-nav配合起來(lái)使用。而且對(duì)數(shù)量也有一定的限制，一般情況在使用一到兩個(gè)不會(huì)有問題，超過兩個(gè)就會(huì)有問題。

6、固定導(dǎo)航條

很多情況之一，設(shè)計(jì)師希望導(dǎo)航條固定在瀏覽器頂部或底部，這種固定式導(dǎo)航條的應(yīng)用在移動(dòng)端開發(fā)中更為常見。Bootstrap框架提供了兩種固定導(dǎo)航條的方式：

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

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是內(nèi)容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

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

如今瀏覽Web頁(yè)面的終端不在是一塵不變了，前面示例實(shí)現(xiàn)的導(dǎo)航條僅能適配于大屏幕的瀏覽器，但當(dāng)瀏覽器屏幕變小的時(shí)候，就不適合了。因此響應(yīng)式設(shè)計(jì)也就隨之而來(lái)。那么在一個(gè)響應(yīng)式的Web頁(yè)面中，對(duì)于響應(yīng)式的導(dǎo)航條也就非常的重要。

使用方法：

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

2）保證在窄屏?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>

3）并為button添加data-target=".類名/#id名"，究競(jìng)是類名還是id名呢？由需要折疊的div來(lái)決定。

需要折疊的div代碼段：

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏?xí)r顯示的圖標(biāo)代碼段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以這么寫，需要折疊的div代碼段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏?xí)r要顯示的圖標(biāo)：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色導(dǎo)航條

反色導(dǎo)航條其實(shí)是Bootstrap框架為大家提供的第二種風(fēng)格的導(dǎo)航條，與默認(rèn)的導(dǎo)航條相比，使用方法并無(wú)區(qū)別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導(dǎo)航條的背景色和文本做了修改。

9、分頁(yè)導(dǎo)航（帶頁(yè)碼的分頁(yè)導(dǎo)航）

分頁(yè)導(dǎo)航幾乎在哪個(gè)網(wǎng)站都可見。好的分頁(yè)導(dǎo)航能給用戶帶來(lái)更好的用戶體驗(yàn)。在Bootstrap框架中提供了兩種分頁(yè)導(dǎo)航：

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

?   帶翻頁(yè)的分頁(yè)導(dǎo)航

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

帶頁(yè)碼的分頁(yè)導(dǎo)航，可能是最常見的一種分頁(yè)導(dǎo)航，特別是在列表頁(yè)內(nèi)容超多的時(shí)候，會(huì)給用戶提供分頁(yè)的導(dǎo)航方式。

使用方法：

平時(shí)很多同學(xué)喜歡用div>a和div>span結(jié)構(gòu)來(lái)制作帶頁(yè)碼的分頁(yè)導(dǎo)航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結(jié)構(gòu)，在ul標(biāo)簽上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分頁(yè)導(dǎo)航（翻頁(yè)分頁(yè)導(dǎo)航）

Bootstrap框架除了提供帶頁(yè)碼的分頁(yè)導(dǎo)航之外還提供了翻頁(yè)導(dǎo)航。這種分頁(yè)導(dǎo)航常常在一些簡(jiǎn)單的網(wǎng)站上看到，比如說個(gè)人博客，雜志網(wǎng)站等。這種分頁(yè)導(dǎo)航是看不到具體的頁(yè)碼，只會(huì)提供一個(gè)“上一頁(yè)”和“下一頁(yè)”的按鈕。

使用方法：

在實(shí)際使用中，翻頁(yè)分頁(yè)導(dǎo)航和帶頁(yè)碼的分頁(yè)導(dǎo)航類似，為ul標(biāo)簽加入pager類：

<ul class="pager">
   <li><a href="#">&laquo;上一頁(yè)</a></li>
   <li><a href="#">下一頁(yè)&raquo;</a></li>
</ul>

11、標(biāo)簽

在一些Web頁(yè)面中常常會(huì)添加一個(gè)標(biāo)簽用來(lái)告訴用戶一些額外的信息，比如說在導(dǎo)航上添加了一個(gè)新導(dǎo)航項(xiàng)，可能就會(huì)加一個(gè)“new”標(biāo)簽，來(lái)告訴用戶。這是新添加的導(dǎo)航項(xiàng)。那么在Bootstrap框架中特意將這樣的效果提取出來(lái)成為一個(gè)標(biāo)簽組件，并且以“.label”樣式來(lái)實(shí)現(xiàn)高亮顯示。如果使用的是a標(biāo)簽元素來(lái)制作的話，為了讓其更美觀，在hover狀態(tài)去掉下劃線之類。只要在span標(biāo)簽上添加vertical-align: super; 就可以實(shí)現(xiàn)標(biāo)簽定位在右上角了。

使用原理：

使用方法很簡(jiǎn)單，你可以在使用span這樣的行內(nèi)標(biāo)簽：

<h4>Example heading <span class="label label-default">New</span></h4>

12、徽章

從某種意義上來(lái)說，徽章效果和前面介紹的標(biāo)簽效果是極其的相似。也是用來(lái)做一些提示信息使用。常出現(xiàn)的是一些系統(tǒng)發(fā)出的信息，比如你登錄你的twitter后，如果你信息沒有看，系統(tǒng)會(huì)告訴你有多少信息未讀，在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來(lái)實(shí)現(xiàn)。不過和標(biāo)簽組件不一樣的是：在徽章組件中沒有提供多種顏色風(fēng)格的效果，不過你也可以通過badges.less或者_(dá)badges.scss快速自定義。

使用方法：

使用方法，其實(shí)也沒什么太多可說的，你可以像標(biāo)簽一樣，使用span標(biāo)簽來(lái)制作，然后為他加入badge類：

<a href="#">Inbox <span class="badge">42</span></a>

以上是“Bootstrap中導(dǎo)航條和分頁(yè)導(dǎo)航如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！