Halaman Bootstrap 5

Halaman dasar

Jika situs web anda memiliki banyak halaman, mungkin anda ingin menambahkan halaman halaman untuk setiap halaman.

Untuk membuat halaman halaman dasar, tambahkan .pagination Tambahkan kelas ke <ul> element. kemudian tambahkan .page-item ke setiap <li> element, dan tambahkan .page-link Tambahkan kelas ke <li> untuk setiap tautan di dalam:

实例

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">kembali laman sebelumnya</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>

亲自试一试

Status aktif

.active Kelas untuk halaman yang 'menonjol':

实例

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">kembali laman sebelumnya</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>

亲自试一试

Status di nonaktifkan

.disabled Kelas untuk tautan yang tak dapat diaktifkan:

实例

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">kembali laman sebelumnya</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>

亲自试一试

Ukuran halaman

Blok halaman juga dapat disesuaikan ukuran yang lebih besar atau lebih kecil:

Silakan tambahkan kelas untuk blok yang lebih besar .pagination-lg atau untuk menambahkan blok yang lebih kecil .pagination-sm Kelas:

实例

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">kembali laman sebelumnya</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="#">kembali laman sebelumnya</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>

亲自试一试