Hai semuanya!

Ini adalah website lama kami, pada akhir agustus 2020 website ini akan di ahlikan ke https://sekolahprogram. Website yang baru Anda bisa diskusi, membuat artikel dan membagikan karya aplikasi mu.


New Sekolah Program

Bootstrap 4 – Pagination

Febri Hidayan Komentar

Bootstrap 4 – Pagination

Pada pembuatan website kita perlu menggunakan pagination sebagai lanjutan halaman. Misalnya ada 20 artikel jadi kita tidak ingin menampilkan sekaligus artikelnya pada satu halaman. Maka kita menggunakan pagination untuk menjadikan 2 halaman atau 4 halaman tergantung selerah kita. Membuat pagination cukuplah mudah bisa kita lihat hasil dibawah ini dan penjelasannya paling bawah.

Kode Pagination - Bootstrap 4
<nav>
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link">Sebelumnya</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
  </ul>
</nav>
<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a href="#" class="page-link">«</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">»</a></li>
  </ul>
</nav>

Pada pembuatan pagination diawali dengan tag <nav>, jadi agar lebih rapi dengan penentuan struktur pada tag html. Silakan simak beberapa class yang harus kita pahami.

  • Pagination merupakan class default jadi harus kita gunakan apabila ingin menggunakannya.
  • Page-item kita boleh menggunakannya atau tidak, karena waktu tidak menggunakannya hanya kehilangan border-radius css.
  • Page-link class ini sangat wajib digunakan, waktu di uji coba tampilan pagination menjadi berantakan.
  • Justify-content-center ini merupakan cara kita sebagai letak pagination mau ditengah, kiri, atau kanan. Jadi tinggal ganti saja akhir center menjadi start atau end.
Category Bootstrap


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *