1357

Komple Uygulamalı Web Geliştirme Eğitimi

Boostrap Pagination

Boostrap ile sayfalama butonlarını nasıl yapılır?

Boostrap Pagination sınıfları ile güzel görünümlü sayfalama butonları oluşturabilirsiniz.


Bootstrap pagination sınıfları ile sayfalama butonları oluşturmak için <ul> etiketine .pagination  sınıfını verdikten sonra her bir butonu barındıracak olan <li> etiketine .page-item sınıfını vermeliyiz. Her bir <li> etiketi içine <a> ya da <button> etiketi ekleyerek .page-link sınıfını kullanmalıyız.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Örnek 1 için tıklayınız.

Active Button Görünümü

Aktif olan linki öne çıkarmak için .active sınıfını kullanabiliriz.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Örnek 2 için tıklayınız.

Disabled (Pasif) Button Görünümü

Pasif yani tıklanamaz button oluşturmak için .disabled sınıfını kullanabiliriz.

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Örnek 3 için tıklayınız.

Pagination Sizing (Sayfalama Buton Boyutları)

Büyük buton grubu oluşturmak için .pagination-lg sınıfını ve küçük buton gurubu için .pagination-sm sınıflarını kullanabiliriz.

 

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Örnek 4 için tıklayınız.

Pagination Alignment (Hizalama)

Bootstrap sayfalama butonlarını sağa hizalamak için .justify-content-end kullanılır eğer ortalamak istersek .justify-content-center sınıfını kullanmalıyız.

<ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>

Örnek 5 için tıklayınız.