Bootstrap 5 分頁

基礎的分頁

如果您的網站有很多頁面，您可能希望為每個頁面添加某種分頁。

如需創建基本分頁，請將 .pagination 類添加到 <ul> 元素。然后將 .page-item 添加到每個 <li> 元素，并將 .page-link 類添加到 <li> 中的每個鏈接：

實例

<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>

親自試一試

活動狀態

.active 類用于“突出顯示”當前頁面：

實例

<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 active"><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>

親自試一試

禁用狀態

.disabled 類用于不可點擊的鏈接：

實例

<ul class="pagination">
  <li class="page-item disabled"><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>

親自試一試

分頁大小

分頁塊也可以被調整為更大或更小的尺寸：

請為較大的塊添加類 .pagination-lg 或為較小的塊添加 .pagination-sm 類：

實例

<ul class="pagination pagination-lg">
  <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>
<ul class="pagination pagination-sm">
  <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>

親自試一試

分頁對齊

請使用 utility 類來更改分頁的對齊方式：

實例

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

親自試一試

面包屑（Breadcrumbs）

分頁的另一種形式是面包屑：

.breadcrumb 和 .breadcrumb-item 類規定當前頁面在導航層次結構中的位置：

實例

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">照片</a></li>
  <li class="breadcrumb-item"><a href="#">2019年秋季</a></li>
  <li class="breadcrumb-item"><a href="#">中國</a></li>
  <li class="breadcrumb-item active">北京</li>
</ul>

親自試一試