分頁

基礎(chǔ)的分頁

如果您的網(wǎng)站有很多頁面，您可能希望為每個(gè)頁面添加某種分頁。

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

實(shí)例

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

活動(dòng)狀態(tài)

.active 類用于“突出顯示”當(dāng)前頁面：

實(shí)例

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

禁用狀態(tài)

.disabled 類用于不可點(diǎn)擊的鏈接：

實(shí)例

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

分頁大小

分頁塊也可以被調(diào)整為更大或更小的尺寸：

請(qǐng)為較大的塊添加類 .pagination-lg 或?yàn)檩^小的塊添加 .pagination-sm 類：

實(shí)例

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

分頁對(duì)齊

請(qǐng)使用 utility 類來更改分頁的對(duì)齊方式：

實(shí)例

<!-- 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 類規(guī)定當(dāng)前頁面在導(dǎo)航層次結(jié)構(gòu)中的位置：

實(shí)例

<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="#">中國(guó)</a></li>
  <li class="breadcrumb-item active">北京</li>
</ul>