這篇文章跟大家介紹一下Bootstrap5中分頁導覽Pagination元件用法，希望對大家有幫助！
【相關推薦：《bootstrap教學》】
分頁導覽一般用於文章清單頁、下載清單、圖片清單等，由於資料很多，不可能在一頁顯示，一般分頁導覽包含上一頁、下一頁、數位頁碼等。 以下是一個簡單的範例：
<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>
使用圖示或符號來取代某些分頁連結的文字.
<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>
分頁連結可依不同情況進行自訂。對於顯示為不可點選的連結使用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" 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 或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>預設分頁導航靠左對齊，老外多習慣靠左，我們中國人喜歡居中，可以使用彈性盒子通用類更改分頁組件的對齊方式。將justify-content-center加入ul類別即可。當然你也可以使用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>
如果這篇文章對你有幫助，記得隨手按讚！
更多程式相關知識，請造訪：程式設計影片！ ！
以上是淺談Bootstrap5怎麼使用分頁導覽Pagination元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
