Tutorial Mengenal & Membuat Pagination Dengan Bootstrap Pagination

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:

Active Page

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

<ul class="pagination">

               <li><a href="#">&laquo;</a></li>

               <li><a href="#">1</a></li>

               <li><a href="#">2</a></li>

               <li class="active"><a href="#">3</a></li>

               <li><a href="#">4</a></li>

               <li><a href="#">5</a></li>

               <li><a href="#">&raquo;</a></li>

   </ul>

Hasilnya seperti ini;

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

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

       <ul class="pagination pagination-lg">

           <li><a href="">&laquo;</a></li>

           <li><a href="">1</a></li>

           <li><a href="">2</a></li>

           <li class="active"><a href="">3</a></li>

           <li><a href="">4</a></li>

           <li><a href="">5</a></li>

           <li><a href="">&raquo;</a></li>

       </ul>

   </div>

   <div class="pagination-kecil">

       <ul class="pagination pagination-sm">

           <li><a href="">&laquo;</a></li>

           <li><a href="">1</a></li>

           <li><a href="">2</a></li>

           <li class="active"><a href="">3</a></li>

           <li><a href="">4</a></li>

           <li><a href="">5</a></li>

           <li><a href="">&raquo;</a></li>

       </ul>

   </div>

 

Maka hasilnya seperti ini;

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