Bootstrap Uygulamaları - Sayfalama (Pagination) Uygulamaları.

Özellikle sayfaları fazla olan web sitelerinde her sayfanın altında, sayfalar arasında kısa yoldan geçiş yapmak için daha eski yazılar ve daha yeni yazılar gibi linkler koyabiliriz. Bu linklerin yerine, numaralı sayfa navigasyonu (pagination) ekleyebiliriz.

Bootstrapın sayfasında pagination-sayfalama konusunda bir hayli çeşit bulunmaktadır. Bunların teker teker uygulamalarını yapalım.

Default (Varsayılan) Sayfalama :

Bu sayfalama da ul klasına pagination vererek li etiketleri ile oluşturuyoruz.

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Boyutunu büyük yapmak için <ul class="pagination"> satırı aşağıdaki şekilde değiştirilir.

<ul class="pagination pagination-lg">

Boyutunu küçük yapmak için  <ul class="pagination"> satırı aşağıdaki şekilde değiştirilir.

<ul class="pagination pagination-sm">

Aktif Durumda Gözüken Sayfalama : 

Bu sayfalama şeklinde hangi sayfa aktif olarak gösterilecek ise o sayfaya aşağıda ki şekilde sınıfına active eklenir.

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

Devredışı (disable) Durumda Gözüken Sayfalama :

Bu sayfalama şeklinde hangi sayfa devredışı olarak gösterilecek ise o sayfaya aşağıda ki şekilde sınıfına disabled eklenir.

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

Önceki ve Sonraki Butonla Sayfalama :

Önceki Sonraki butonları sayfa ortasında göstermek için aşağıda ki gibi ul classına pager eklenir 

<nav>
  <ul class="pager">
    <li><a href="#">Önceki</a></li>
    <li><a href="#">Sonraki</a></li>
  </ul>
</nav>

Önceki Sonraki butonları sayfa kenarlarında  göstermek için aşağıda ki gibi li classına Previous ve Next  (yukarıdaki kodların 3. ve 4. satırına) eklenir 

<nav>
  <ul class="pager">
    <li class="previous"><a href="#">Önceki</a></li>

    <li class="next"><a href="#">Sonraki</a></li>

</ul>
</nav>

GÖRÜNTÜLE:

Bootstarpta Pagination uygulama ile ilgili anlatımı görsel olarak aşağıda ki videodan da izleyebilirsiniz.