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

Bootstrap框架將其獨(dú)立成一個(gè)單獨(dú)的部分：

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

  ?  Sass版本：對(duì)應(yīng)源文件為_(kāi)pager.scss

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

使用方法：

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

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

運(yùn)行效果見(jiàn)右側(cè)結(jié)果窗口。

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

對(duì)應(yīng)樣式代碼：

/*bootstrap.css文件第4223行～第4244行*/

.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li >a:hover,
.pager li >a:focus {
text-decoration: none;
background-color: #eee;
}

對(duì)齊樣式設(shè)置：

默認(rèn)情況之下，翻頁(yè)分頁(yè)導(dǎo)航是居中顯示，但有的時(shí)候我們需要一個(gè)居左，一個(gè)居右。Bootstrap框架提供了兩個(gè)樣式：

   ?   previous：讓“上一步”按鈕居左

   ?   next：讓“下一步”按鈕居右

具體使用的時(shí)候，只需要在li標(biāo)簽上添加對(duì)應(yīng)類(lèi)名即可：

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

運(yùn)行效果見(jiàn)右側(cè)結(jié)果窗口。

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

實(shí)現(xiàn)原理很簡(jiǎn)單，就是一個(gè)進(jìn)行了左浮動(dòng)，一個(gè)進(jìn)行了右浮動(dòng)：

/*bootstrap.css文件第4245行～第4252行*/

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

狀態(tài)樣式設(shè)置：

和帶頁(yè)碼分頁(yè)導(dǎo)航一樣，如果在li標(biāo)簽上添加了disabled類(lèi)名的時(shí)候，分頁(yè)按鈕處于禁用狀態(tài)，但同樣不能禁止其點(diǎn)擊功能。你可以通過(guò)js來(lái)處理，或?qū)?code class="marker">a標(biāo)簽換成span標(biāo)簽。

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

運(yùn)行效果見(jiàn)右側(cè)結(jié)果窗口。

狀態(tài)樣式實(shí)現(xiàn)原理：

/*bootstrap.css文件第4253行～第4260行*/

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}