Hai teman-teman ketemu lagi… kali ini saya akan berbagi tentang seperti apa sih itu pagination dan bagaimana membuatnya. Bootstrap telah menyediakan class pagination sehingga kita gak perlu repot-repot membuat style pada css. Berikut penjelasan dan penggunaannya.

Basic Pagination

Jika kamu punya website dengan banyak sekali konten artikel , pastinya kamu berharap untuk membuat pagination atau penomoran halamannya. Pagination dasar pada bootstrap terlihat seperti ini:

Tutorial Mengenal & Membuat Pagination Dengan Bootsrap Pagination

Active Page

Untuk membuat pagination, kamu cukup menambahkan class=”pagination” pada tag <ul>

Hasilnya seperti ini;

Tutorial Mengenal & Membuat Pagination Dengan Bootsrap Pagination

Penjelasan:

  • Pada tag <ul> tambahkan class=”pagination” untuk membuat pagination-nya
  • Class=”active” pada tag <li> untuk membuat halaman yang sedang aktif.

Disable Page

Untuk membuat halaman dengan status disable, kamu hanya perlu menambahkan class=”disabled” pada tag <li>:

Tutorial Mengenal & Membuat Pagination Dengan Bootsrap Pagination

Pada page yang di-disable maka apabila kamu hover, akan tampil kursor forbidden atau tanda silang.

Ukuran Pagination

Di sini kamu bisa mengatur ukuran paginationmu dengan menambahkan class pagination-lg untuk ukuran besar ataupun pagination-sm untuk ukuran kecil. Tentu saja dengan menambahkannya setelah class pagination.

<div class=”pagination-besar”>

 

Maka hasilnya seperti ini;

Tutorial Mengenal & Membuat Pagination Dengan Bootsrap Pagination

Bagaimana teman-teman? Sangat mudah bukan? Semoga bermanfaat terima kasih.