天天看點

Bootstrap5 分頁

網頁開發過程,如果碰到内容過多,一般都會做分頁處理。

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>