《Bootstrap5零基礎(chǔ)到精通》 俺老劉原創(chuàng)，爭取每天更新一節(jié)。
24.1 簡單例子
分頁導(dǎo)航一般用于文章列表頁、下載列表、圖片列表等，由于數(shù)據(jù)很多，不可能在一頁顯示，一般分頁導(dǎo)航包括上一頁、下一頁、數(shù)字頁碼等。 下面是一個簡單的例子：
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一頁</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="#">下一頁</a></li>
</ul>
</nav>
復(fù)制代碼24.2 使用圖標(biāo)
使用圖標(biāo)或符號來代替某些分頁鏈接的文本.
<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">«</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">»</span>
</a>
</li>
</ul>
</nav>
復(fù)制代碼24.3 禁用和活動狀態(tài)
分頁鏈接可根據(jù)不同情況進(jìn)行自定義。對于顯示為不可單擊的鏈接使用disabled，對于顯示為當(dāng)前頁的鏈接使用active。
雖然.disabled類使用pointer-events: none來嘗試禁用a的鏈接功能，但是CSS屬性還沒有標(biāo)準(zhǔn)化，并且不考慮鍵盤導(dǎo)航。因此，您應(yīng)該始終在禁用的鏈接上添加tabindex="-1"，并使用自定義JavaScript完全禁用其功能。
<nav aria-label="...">
<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>
復(fù)制代碼24.4 尺寸大小
喜歡更大或更小的分頁？加上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">
<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>
復(fù)制代碼24.5 對齊
默認(rèn)分頁導(dǎo)航靠左對齊，老外多習(xí)慣靠左，我們中國人喜歡居中，可以使用彈性盒子通用類更改分頁組件的對齊方式。將justify-content-center加到ul類中即可。當(dāng)然你也可以使用justify-content-end靠右對齊，雖然很少見。
<nav aria-label="Page navigation example">
<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>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<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>
復(fù)制代碼今天的課程就到這里，請關(guān)注我，及時學(xué)習(xí) 俺老劉原創(chuàng)的《Bootstrap5零基礎(chǔ)到精通》第25節(jié) Bootstrap5 列表群組List group組件用法。
如果這篇文章對你有幫助，記得隨手點(diǎn)贊哦！