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

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

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

  ?  Sass版本：對應(yīng)源文件為_pager.scss

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

使用方法：

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

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

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

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

對應(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;
}

對齊樣式設(shè)置：

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

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

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

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

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

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

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

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

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

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

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

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

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

運(yù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;
}