Bootstrap 分頁
本章將講解 Bootstrap 支援的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其他介面元素一樣處理分頁。

分頁（Pagination）
下表列出了 Bootstrap 提供的處理分頁的 class。

Class	描述	示例程式碼
.pagination	新增該 class 來在頁面上顯示分頁。	
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled, .active	您可以自定義連結，通過使用 .disabled 來定義不可點選的連結，通過使用 .active 來指示當前的頁面。	
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>
.pagination-lg, .pagination-sm	使用這些 class 來獲取不同大小的項。	
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
預設的分頁
下面的例項演示了上表中所討論的 class .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>
分頁的狀態
下面的例項演示了上表中所討論的 class .disabled、.active 的用法：

例項
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><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>
翻頁（Pager）
如果您想要建立一個簡單的分頁連結為使用者提供導航，可通過翻頁來實現。
與分頁連結一樣，翻頁也是無序列表。預設情況下，連結是居中顯示。
下表列出了 Bootstrap 處理翻頁的 class。

Class	描述	示例程式碼
.pager	新增該 class 來獲得翻頁連結。	
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next	使用 class .previous 把連結向左對齊，使用 .next 把連結向右對齊。	
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled	新增該 class 來設定對應按鈕禁止使用。	
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
預設的翻頁
下面的例項演示了上表中所討論的 class .pager 的用法：

例項
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>
對齊的連結
下面的例項演示了上表中所討論的 class .previous、.next 的用法：

例項
<ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
翻頁的狀態
下面的例項演示了上表中所討論的 class .disabled 的用法：

例項
<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>