Halaman Berikutnya Bootstrap 5

Pagination Dasar

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

Untuk membuat pagination dasar, tambahkan .pagination Kelas ditambahkan ke <ul> elemen. kemudian tambahkan .page-item ke setiap <li> elemen, dan tambahkan .page-link Kelas ditambahkan ke <li> setiap tautan di dalam

Contoh

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

Coba Sendiri

Status Aktif

.active Kelas digunakan untuk "menonjolkan" halaman saat ini:

Contoh

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

Coba Sendiri

Status Nonaktif

.disabled Kelas digunakan untuk tautan yang tidak dapat diakses:

Contoh

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

Coba Sendiri

Ukuran pagination

Ukuran blok halaman pagination dapat disesuaikan menjadi lebih besar atau lebih kecil:

Tambahkan tipe untuk blok yang lebih besar .pagination-lg atau tambahkan untuk blok yang lebih kecil .pagination-sm Tipe:

Contoh

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">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="#">Halaman Berikutnya</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">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="#">Halaman Berikutnya</a></li>
</ul>

Coba Sendiri

Penarikan Pagination

Gunakan kelas utility untuk mengubah arah penarikan pagination:

Contoh

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

Coba Sendiri

Breadcrumbs (Breadcrumbs)

Salah satu bentuk lain halaman pagination adalah breadcrumb:

.breadcrumb dan .breadcrumb-item Kelas menentukan posisi halaman saat ini dalam struktur navigasi:

Contoh

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Foto</a></li>
  <li class="breadcrumb-item"><a href="#">2019 Musim Gugur</a></li>
  <li class="breadcrumb-item"><a href="#">Cina</a></li>
  <li class="breadcrumb-item active">Beijing</li>
</ul>

Coba Sendiri