分頁(yè)導(dǎo)航幾乎在哪個(gè)網(wǎng)站都可見(jiàn)。好的分頁(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)航，可能是最常見(jiàn)的一種分頁(yè)導(dǎo)航，特別是在列表頁(yè)內(nèi)容超多的時(shí)候，會(huì)給用戶提供分頁(yè)的導(dǎo)航方式。在Bootstrap框架為開(kāi)發(fā)者提供不同的版本：

   ?   LESS版本：對(duì)應(yīng)的源文件pagination.less

   ?   Sass版本：對(duì)應(yīng)的源文件_pagination.scss

   ?   編譯后版本：對(duì)應(yīng)bootstrap.css文件第4130行～第4222行

使用方法：

平時(shí)很多同學(xué)喜歡用div>a和div>span結(jié)構(gòu)來(lái)制作帶頁(yè)碼的分頁(yè)導(dǎo)航。不過(guò)，在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>

運(yùn)行效果：

實(shí)現(xiàn)原理：

從效果中可以看出，當(dāng)前狀態(tài)頁(yè)碼會(huì)高亮顯示，而且不能點(diǎn)擊。而最后一頁(yè)是禁用狀態(tài)，也不能點(diǎn)擊。實(shí)現(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;
}

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

大小設(shè)置：

在Bootstrap框架中，也可以通過(guò)幾個(gè)不同的情況來(lái)設(shè)置其大小。類似于按鈕一樣：

1、通過(guò)“pagination-lg”讓分頁(yè)導(dǎo)航變大；

2、通過(guò)“pagination-sm”讓分頁(yè)導(dǎo)航變小：

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

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

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

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