F2E合作社｜分頁導覽列｜Bootstrap 5網頁框架開發入門

前言

網站的翻頁功能，在資料量龐大的網站尤其重要。
👨🏼‍🎓 「 這頁找不到需要的資料？ 」點！
👩🏼‍💼 「 這頁找不到想買的商品？ 」再點！
👨🏼‍💻 「 這頁找不到有感的片子？ 」繼續點！

（ 圖片來源 ）

官方網站的 pagination 頁面

用於顯示分頁以指示跨多個頁面的文檔和示例。

基本分頁導覽列

我們使用大量連接的鏈接進行分頁，此外，網頁可能有不止一個這樣的導航部分，最好提供一個描述性 aria-label 的 <nav> ，以反映其目的，例如如果分頁組件用於在一組搜索結果之間導航，則適當的標籤可以是 aria-label="Search results pages" 。

HTML

<nav aria-label="Page navigation">
    <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>

使用 icons

可以在分頁上使用 icon 或是符號來取代文字，但要確保 aria 的描述可提供給螢幕閱讀器讀取。

HTML

<nav aria-label="Page navigation">
    <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 這個 class 使用了 pointer-events: none 來嘗試禁用 a 連結功能，這個屬性在 CSS 還是未標準化的，因為鍵盤導覽仍不受影響，因此應該在禁用的連結增加 tabindex="-1" ，並使用自定義的 JavaScript 來完全的禁用它。

HTML

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

尺寸

加上 pagination-lg 套用大尺寸按鈕。

HTML

<nav aria-label="Page navigation">
    <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>

加上 pagination-sm 套用小尺寸按鈕。

HTML

<nav aria-label="Page navigation">
    <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>

對齊

使用 flexbox 通用類別更改分頁的對齊方式，加上 justify-content-center 置中對齊， justify-content-end 置右對齊。（ 可以搭配 F2E合作社｜flex 屬性控制｜Bootstrap 5 網頁框架開發入門 一起食用 ）

HTML

<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

參考資料

1. Pagination · Bootstrap v5.0
2. 分頁導覽輕鬆做-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
3. 分頁 (Pagination) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0