Bootstrap 3 Pager - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Pager

TrikSonic - Apa itu Pager Pada Bootstrap ? Pager merupakan bagian dari Pagination dengan susunan dan tampilan yang sederhana.

Berikut tutorial dan contoh tentang membuat Pager menggunakan Bootstrap 3 :

Default Pager

Untuk membuat pager menggunakan bootstrap 3 diperlukan susunan dan class default agar bisa direalisasikan dengan sebagimana mestinya

Nama class default yang digunakan adalah .pager yang ditulis didalam element <ul> atau <ol> (rekomendasi gunakan element <ul>)

Contoh :

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Posisi Pager

Untuk mengatur Keselarasan atau posisi pager tambahkan class .previous (posisi kiri) dan .next (posisi kanan) kedalam element <li> yang berada didalam rentang element Pager.

Contoh :

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Bootstrap 3 Pager dengan Status disabled

Untuk memberikan tampilan nonaktif atau tidak aktif tambahkan class .disabled kedalam element <li> yang berada didalam rentang element Pager

Contoh :

<ul class="pager">
  <li class="previous disabled"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>