為您的網(wǎng)站或應(yīng)用提供帶有展示頁(yè)碼的分頁(yè)組件，或者可以使用簡(jiǎn)單的翻頁(yè)組件。

默認(rèn)分頁(yè)

受 Rdio 的啟發(fā)，我們提供了這個(gè)簡(jiǎn)單的分頁(yè)組件，用在應(yīng)用或搜索結(jié)果中超級(jí)棒。組件中的每個(gè)部分都很大，有點(diǎn)事容易點(diǎn)擊、易縮放、點(diǎn)擊區(qū)域大。

<nav>
  <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>

禁用和激活狀態(tài)

鏈接在不同情況下可以定制。你可以給不能點(diǎn)擊的鏈接添加 .disabled 類、給當(dāng)前頁(yè)添加 .active 類。

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

你還可以將 active 或 disabled 狀態(tài)應(yīng)用于 <span> 標(biāo)簽，或者在向前/向后的箭頭處省略 <a> 標(biāo)記，即替換 <a> 標(biāo)簽，這樣就可以讓其保持需要的樣式而不能被點(diǎn)擊。

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

尺寸

想要更小或更大的分頁(yè)？.pagination-lg 或 .pagination-sm 類提供了額外可供選擇的尺寸。

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

翻頁(yè)

用簡(jiǎn)單的標(biāo)記和樣式，就能做個(gè)上一頁(yè)和下一頁(yè)的簡(jiǎn)單翻頁(yè)。用在像博客和雜志這樣的簡(jiǎn)單站點(diǎn)上棒極了。

默認(rèn)實(shí)例

在默認(rèn)的翻頁(yè)中，鏈接居中對(duì)齊。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

對(duì)齊鏈接

你還可以把鏈接向兩端對(duì)齊：

<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>

可選的禁用狀態(tài)

.disabled 類也可用于翻頁(yè)中的鏈接。

<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>