Tuesday, October 2, 2018

Tutorial Bootstrap #6: Membuat Pagination

         Comment  

Hai semuanya...
Apa kabar semuanya, semoga tetap dalam keadaan sehat.

Pada tutorial kali ini kita akan belajar membuat pagination dengan Bootstrap, jika kita mempunyai sebuah halaman website yang banyak maka kita harus membagi setiap halamannya dengan pagination ini, langsung kita mulai belajar cara buat paginationnya.

# Membuat Pagination

Untuk membuat sebuah pagination dengan Bootstrap, tambahkan class “pagination” pada tag <ul> kemudian didalam tag <ul> buatlah  tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.
<ul class="pagination">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
</ul>
Hasilnya.


# Mengubah Size / Ukuran Pagination 

Jika ingin mengubah ukuran pagination menjadi besar atau kecil, ada 2 class yang digunakan mengubahnya yaitu 
  • pagination-lg 
  • pagination-sm

Class pagination-lg berfungsi untuk mengubah ukuran/size pagination menjadi large/besar, contoh penggunaannya sebagai berikut.

  <ul class="pagination pagination-lg">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
 </ul>
Hasilnya.

Sedangkan class pagination-sm berfungsi untuk mengubah size/ukuran pagination menjadi kecil, contohnya sebagai berikut. 
  <ul class="pagination pagination-sm">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


# Class Active Dan Disabled

Pada dasarnya penggunaan class “active” pada untuk link yang sedang aktif digunakan sedangkan class disabled menonaktifkan link agar tidak dapat diklik, pada pagination kita dapat menggunakan kedua class tersebut, contoh misalkan link aktif pada nomor 1, maka tambahkan class “active” pada tag <li> nomor satu, contohnya sebagai berikut.
  <ul class="pagination pagination-lg">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>
Hasilnya.


Namun, jika mengganti class “active” menjadi “disabled”, maka linknya akan menjadi tidak dapat diklik atau nonaktif link.

# Tombol Previous dan Next

Untuk menambahkan tombol previous dan next, syntax sebagai berikut.
  <ul class="pagination pagination-lg">
    <li><a href="">Previous</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="">Next</a></li>
  </ul>
Hasilnya.


Demikian tutorial membuat pagination dengan Bootstrap, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

0 komentar:

Post a Comment