分頁

用於顯示分頁的文件和範例，以表示一系列相關內容存在於多個頁面中。

概觀

我們使用一大區塊的連結鏈接來進行分頁，讓連結不易被錯過且容易調整大小，同時提供大面積的點擊區域。分頁使用清單 HTML 元素建置，因此螢幕閱讀器可以宣布可用連結的數量。使用包覆的 <nav> 元素將其標識為導覽區段，供螢幕閱讀器和其他輔助技術使用。

此外，由於頁面可能有多個此類導覽區段，建議為 <nav> 提供描述性的 aria-label，以反映其目的。例如，如果分頁組件用於在搜尋結果組之間導覽，適當的標籤可能是 aria-label="搜尋結果頁面"。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

使用圖示

想在部分分頁連結中使用圖示或符號取代文字嗎？務必使用 aria 屬性提供適當的螢幕閱讀器支援。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

停用和啟用狀態

分頁連結可自訂以適應不同情況。對於看起來無法按一下的連結，請使用 .disabled，並使用 .active 來標示目前頁面。

雖然 .disabled 類別使用 pointer-events: none 來嘗試停用 <a> 的連結功能，但該 CSS 屬性尚未標準化，且不適用於鍵盤導覽。因此，您應始終在已停用的連結上加入 tabindex="-1"，並使用自訂 JavaScript 來完全停用其功能。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

您可選擇將 active 或 disabled 錨點換成 <span>，或在 prev/next 箭頭的情況下略過錨點，以移除按一下功能並防止鍵盤焦點，同時保留預期的樣式。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

尺寸

想要較大或較小的分頁嗎？加入 .pagination-lg 或 .pagination-sm 以取得其他大小。

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

對齊

使用彈性盒狀工具變更分頁組件的對齊方式。

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>