Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Pagination

TrikSonic - Apa itu Pagination ? Pagination adalah suatu prosses yang mengorganisir dan menata konten atau artikel dengan membaginya menjadi halaman terpisah.

Dengan menggunakan Bootstrap, keperluan untuk membuat Pagination dapat dilakukan atau dibuat dengan cepat efisien dan modern.

Berikut tutorial dan contoh tentang membuat Pagination dengan menggunakan Bootstrap 3 :

Default pagination

Secara default untuk membuat Pagination pada bootstrap menggunakan class dasar yaitu .pagination yang diterapkan pada elament html <ul> atau <ol>

Contoh :

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <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>
  <li><a href="#">6</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Ukuran Pagination

Untuk mengatur ukuran pagination pada bootstrap 3, tambahkan class .pagination-lg (untuk ukuran besar) atau .pagination-sm (untuk ukuran kecil) pada class dasar .pagination

Contoh :

<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <li><a href="#">&laquo;</a></li>
    <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="#">&raquo;</a></li>
  </ul>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#">&laquo;</a></li>
    <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="#">&raquo;</a></li>
  </ul>
</nav>

Pagination status active

Untuk menampilkan sebuah pagination yang sedang aktif, tambahkan class .active pada element <li> yang berada didalam rentang pagination.

Contoh :

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>

Pagination status disabled

Untuk menampilkan sebuah pagination yang tidak aktif atau nonaktif, tambahkan class .disabled pada element <li> yang berada didalam rentang pagination.

Contoh :

<nav aria-label="Page navigation">
  <ul class="pagination pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>