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

   ?   帶頁碼的分頁導航

   ?   帶翻頁的分頁導航

帶頁碼的分頁導航

帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內(nèi)容超多的時候，會給用戶提供分頁的導航方式。在Bootstrap框架為開發(fā)者提供不同的版本：

   ?   LESS版本：對應的源文件pagination.less

   ?   Sass版本：對應的源文件_pagination.scss

   ?   編譯后版本：對應bootstrap.css文件第4130行～第4222行

使用方法：

平時很多同學喜歡用div>a和div>span結(jié)構(gòu)來制作帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結(jié)構(gòu)，在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>

運行效果：

實現(xiàn)原理：

從效果中可以看出，當前狀態(tài)頁碼會高亮顯示，而且不能點擊。而最后一頁是禁用狀態(tài)，也不能點擊。實現(xiàn)樣式：

/*bootstrap.css文件第4170行~第4192行*/

.pagination> .active > a,
.pagination> .active > span,
.pagination> .active >a:hover,
.pagination> .active >span:hover,
.pagination> .active >a:focus,
.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,
.pagination> .disabled >span:hover,
.pagination> .disabled >span:focus,
.pagination> .disabled > a,
.pagination> .disabled >a:hover,
.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

注意：要禁用當前狀態(tài)和禁用狀態(tài)不能點擊，我們還要依靠js來實現(xiàn)，或者將這兩狀態(tài)下的a標簽換成span標簽。

大小設置：

在Bootstrap框架中，也可以通過幾個不同的情況來設置其大小。類似于按鈕一樣：

1、通過“pagination-lg”讓分頁導航變大；

2、通過“pagination-sm”讓分頁導航變小：

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

運行效果查看最右側(cè)結(jié)果窗口。

大小設置實現(xiàn)原理：

其實就是通增加相應的padding大小、font-size大小和圓角大小，源碼查看bootstrap.css文件第4193行～第4222行，這30行代碼已從原文中節(jié)取出來，放在右側(cè)代碼頂部“bootstrap.css”文件中，小伙伴們可以查看。