一文帶你學習Bootstrap中的導航條和分頁導航

這篇文章帶大家了解一下Bootstrap中的導航條和分頁導航，順帶介紹一下標籤和徽章，希望對大家有所幫助！

1、導航條基礎

#導航條（navbar）和上一節介紹的導航（nav），就相差一個字，多了一個「條」字。其實在Bootstrap框架中他們還是明顯的差別。在導航條(navbar)中有一個背景色、而且導航條可以是純連結（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。 【相關推薦：《bootstrap教學》】

2、基礎導航條

在Bootstrap方塊中，導覽列與導覽從外觀上差異不是太多，但在實際使用中導航條要比導航複雜得多。

使用方法：

在製作一個基礎導航條時，主要分以下幾步：

#第一步：首先在製作導航的列表(<ul class="nav">)基礎上新增類別名稱“navbar-nav” 第二步：在清單外部新增容器（div），並且使用類別名稱「navbar」和「navbar-default」

原理分析：

而導航條的顏色都是透過「.navbar-default」來控制。

3、為導航條添加標題、二級選單及狀態

在Web頁面製作中，常常在選單前面都會有一個標題（文字字號比其它文字稍大），其實在Bootstrap框架也為大家做了這方面考慮，其透過「navbar-header」和「navbar-brand」來實現，此功能主要起一個提醒功能，當然改良一下可以當作是logo(此處不做過多闡述)。其樣式主要是加大了字體設置，並且設置了最大寬度，同樣在默認導航條（navbar-default）下，對navbar-brand也做了顏色處理，同樣的，在基礎導航條中對菜單提供了目前狀態，停用狀態，懸浮狀態等效果，而且也可以帶有二級選單的導航條。

4、帶有表單的導航條

在Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類別名稱的表單，在Bootstrap框架中，也提供了「navbar-right」樣式，讓元素在導覽條靠右對齊。這裡有一個條件，只有當瀏覽器視窗寬度大於768px才生效。

5、導覽列中的按鈕、文字和連結

Bootstrap框架的導覽條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素。框架提供了三種其他樣式：

1）導覽列中的按鈕navbar-btn

2）導覽列中的文字navbar-text

#3）導覽條中的普通連結navbar-link

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

6、固定導航條

很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在在行動端開發中較為常見。 Bootstrap架構提供了兩種固定導覽條的方式：  

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

#☑  .navbar-fixed-bottom：導覽條固定在瀏覽器視窗底部

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7、響應式導航條

如今瀏覽Web頁面的終端不在是一塵不變了，前面範例實現的導航條只能適配於大螢幕的瀏覽器，但當瀏覽器螢幕變小的時候，就不適合了。因此響應式設計也就隨之而來。那麼在一個響應式的Web頁面中，對於響應式的導航條也就非常的重要。

使用方法：

1）保證在窄螢幕時需要折疊的內容必須包裹在帶一個div內，並且為這個div加入collapse、navbar-collapse兩個類別名。最後為這個div新增一個class類別名稱或是id名。

2）保證在窄螢幕時要顯示的圖示樣式（固定寫法）：

<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名"，究競是類名還是id名呢？由需要折疊的div來決定。

需要折疊的div程式碼段：

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

窄屏时显示的图标代码段：

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

窄屏时要显示的图标：

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

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入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、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

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

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

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

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上是一文帶你學習Bootstrap中的導航條和分頁導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！