Bootstrap-v3-元件-

分頁

1、預設分頁

受 Rdio 的啟發，我們提供了這個簡單的分頁元件，用在應用或搜尋結果中超級棒。元件中的每個部分都很大，優點是容易點選、易縮放、點選區域大。

<!-- 預設分頁 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>      

1.1、預設分頁的禁用和激活狀态

連結在不同情況下可以定制。你可以給不能點選的連結添加

.disabled

類、給目前頁添加

.active

類。推薦：禁用的使用<span>标簽而不是<a>标簽。

<!-- 禁用和激活 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><span>2</span></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>      

1.2、預設分頁的尺寸

想要更小或更大的分頁？

.pagination-lg

或

.pagination-sm

類提供了額外可供選擇的尺寸。

<!-- 大尺寸 -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><span href="#">2</span></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<!-- 小尺寸 -->
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><span href="#">2</span></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>      

2、翻頁

2.1預設翻頁

在預設的翻頁中，連結居中對齊。

<!-- 翻頁 -->
<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>      

2.2兩端對齊的翻頁

可以把連結向兩端對齊。

<!-- 兩端對齊的翻頁 -->
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>      

2.3 翻頁的禁用

為元素添加disabled類，禁用翻頁。

<!-- 兩端對齊的翻頁（禁用） -->
<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>