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

Bootstrap框架將其獨立成一個單獨的部分：

  ?   LESS版本：對應源文件為pager.less

  ?  Sass版本：對應源文件為_pager.scss

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

使用方法：

在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標簽加入pager類：

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

運行效果見右側結果窗口。

實現原理：

對應樣式代碼：

/*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;
}

對齊樣式設置：

默認情況之下，翻頁分頁導航是居中顯示，但有的時候我們需要一個居左，一個居右。Bootstrap框架提供了兩個樣式：

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

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

具體使用的時候，只需要在li標簽上添加對應類名即可：

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

運行效果見右側結果窗口。

實現原理：

實現原理很簡單，就是一個進行了左浮動，一個進行了右浮動：

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

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

狀態樣式設置：

和帶頁碼分頁導航一樣，如果在li標簽上添加了disabled類名的時候，分頁按鈕處于禁用狀態，但同樣不能禁止其點擊功能。你可以通過js來處理，或將a標簽換成span標簽。

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

運行效果見右側結果窗口。

狀態樣式實現原理：

/*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;
}