網頁開發過程,如果碰到内容過多,一般都會做分頁處理。
Bootstrap 5 可以很簡單的實作分頁效果。
要建立一個基本的分頁可以在 <ul> 元素上添加 .pagination 類。然後在 <li> 元素上添加 .page-item 類,<li> 元素的 <a> 标簽上添加 .page-link 類:
<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>
目前頁可以使用 .active 類來高亮顯示:
<li class="page-item active"><a class="page-link" href="#">2</a></li>
.disabled 類可以設定分頁連結不可點選:
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
可以将分頁條目設定為不同的大小。
.pagination-lg 類設定大字型的分頁條目,.pagination-sm 類設定小字型的分頁條目:
<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">
可以使用工具類來設定分頁的對齊方式:
<!-- 預設 (左對齊) -->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
<!-- 居中 -->
<ul class="pagination justify-content-center" style="margin:20px 0">
<!-- 右對齊 -->
<ul class="pagination justify-content-end" style="margin:20px 0">
.breadcrumb 和 .breadcrumb-item
類用于設定面包屑導航:
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>