Bootstrap 5 Pagination

基礎的分頁

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

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

Example

<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="#">Next page</a></li>
</ul>

Try it yourself

活動狀態

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

Example

<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="#">Next page</a></li>
</ul>

Try it yourself

禁用狀態

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

Example

<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="#">Next page</a></li>
</ul>

Try it yourself

分頁大小

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

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

Example

<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="#">Next page</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="#">Next page</a></li>
</ul>

Try it yourself

Pagination alignment

Gumamit ng utility class upang baguhin ang alinhment ng pagination:

Example

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

Try it yourself

Breadcrumbs (Breadcrumbs)

Ang isa pang paraan ng pagpahintulot ng pahina ay ang breadcrumbs:

.breadcrumb at .breadcrumb-item Class defines the current page's position in the navigation hierarchy:

Example

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">2019 Autumn</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Beijing</li>
</ul>

Try it yourself