Bootstrap Pagination (Sayfalandırma)

Web tasarımı ve geliştirme serüvenimizde butonlar, tablolar ve uyarı mesajları gibi kullanıcıyla doğrudan etkileşime giren bileşenleri öğrendik. Şimdi ise, özellikle içerik yoğunluğu yüksek olan web sitelerinin (e-ticaret siteleri, bloglar, haber portalları) en büyük kurtarıcısı olan Bootstrap Pagination (Sayfalandırma) konusunu ele alacağız.

Bir web sitesinde yüzlerce ürününüz veya onlarca blog yazınız olduğunu düşünün. Bunların tamamını tek bir sayfada aşağıya doğru listelemek, sayfanızın yüklenme hızını (Page Speed) inanılmaz derecede düşürür. Arama motorları (SEO) yavaş açılan sayfaları sevmez ve kullanıcılar da uzun süre kaydırma (scroll) yapmaktan sıkılarak siteyi terk edebilir. İşte bu sorunu çözmek için içeriği küçük, yönetilebilir sayfalara bölmemiz gerekir. Bootstrap 5, hiçbir karmaşık CSS yazmanıza gerek kalmadan, son derece şık, erişilebilir (accessibility dostu) ve mobil uyumlu sayfalandırma menüleri oluşturmanızı sağlar.

Bu rehberde, Bootstrap ile sayfalandırma yapısının nasıl kurulduğunu, boyut ve hizalama ayarlarını, SEO için kritik olan erişilebilirlik etiketlerini ve Bootstrap 5 ile gelen yenilikleri bol örneklerle sıfırdan öğreneceğiz.

1. Temel Sayfalandırma (Pagination) Yapısı Nasıl Kurulur?

Bootstrap’te bir sayfalandırma menüsü oluşturmak son derece basittir. HTML’in standart liste etiketleri olan <ul> ve <li> etiketlerini kullanırız. Erişilebilirlik ve SEO standartları gereği, bu listeyi bir navigasyon olduğunu belirtmek için mutlaka <nav> etiketi içine almalıyız.

Kullanmamız gereken temel sınıflar (classes) şunlardır:

• .pagination: <ul> etiketine verilir ve listenin bir sayfalandırma menüsü olduğunu belirler.
• .page-item: Her bir liste elemanına (<li>) verilir.
• .page-link: Tıklanabilir bağlantılara (<a>) verilir ve Bootstrap’in şık kutu tasarımını (border, padding, hover rengi) oluşturur.

Örnek Temel Kullanım:

<!-- Ekran okuyucular ve SEO için aria-label kullanımı önemlidir -->
<nav aria-label="Sayfalama Menüsü">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Önceki</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="#">Sonraki</a></li>
  </ul>
</nav>

2. Aktif (Active) ve Devre Dışı (Disabled) Durumlar

İyi bir kullanıcı deneyimi (UX) sunmak için, ziyaretçiye o an hangi sayfada olduğunu göstermeli ve tıklayamayacağı linkleri (örneğin 1. sayfadayken “Önceki” butonu) devre dışı bırakmalıyız.

• .active: Kullanıcının şu an bulunduğu sayfayı belirtmek için .page-item sınıfının yanına eklenir. Arka plan rengini Bootstrap’in birincil (primary) rengi olan maviye çevirir.
• .disabled: Tıklanmasını istemediğiniz linkler için kullanılır. Rengini soluklaştırır ve fare imlecini (cursor) engelli işaretine dönüştürür.

Önemli SEO ve Erişilebilirlik İpucu: Devre dışı bırakılan bir linkin klavye ile de (Tab tuşu) seçilememesi için tabindex="-1" niteliğini ve ekran okuyucular için aria-disabled="true" niteliğini eklemelisiniz. Aktif sayfa için ise aria-current="page" kullanmak standart bir yaklaşımdır.

Örnek Kullanım:

<nav aria-label="Arama Sonuçları Sayfalandırması">
  <ul class="pagination">
    <!-- 1. sayfada olduğumuz için Önceki butonu devre dışı (disabled) -->
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Önceki</a>
    </li>

    <!-- Aktif sayfa belirtiliyor -->
    <li class="page-item active" aria-current="page">
      <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="#">Sonraki</a>
    </li>
  </ul>
</nav>

3. İkonlar ile Sayfalandırma (Görsel Zenginlik)

“Önceki” ve “Sonraki” gibi metinler yerine, global olarak herkesin anlayabileceği ok işaretleri (ikonlar) kullanmak tasarımı daha modern gösterir. Bootstrap, HTML’in özel karakterleri olan « (sol çift ok) ve » (sağ çift ok) ile mükemmel uyum sağlar. Ekran okuyucuların bu sembolleri yanlış okumaması için sembolü aria-hidden="true" ile gizleyip, hemen yanına görünmez bir <span class="visually-hidden"> metni eklemek en profesyonel yöntemdir.

Örnek İkonlu Sayfalandırma:

<nav aria-label="İkonlu Sayfalandırma">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Önceki">
        <span aria-hidden="true">&laquo;</span>
        <span class="visually-hidden">Önceki</span>
      </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="#" aria-label="Sonraki">
        <span aria-hidden="true">&raquo;</span>
        <span class="visually-hidden">Sonraki</span>
      </a>
    </li>
  </ul>
</nav>

4. Sayfalandırma Boyutları (Sizing)

Farklı tasarım ihtiyaçlarına göre sayfalandırma menünüzün daha büyük veya daha küçük görünmesini isteyebilirsiniz. CSS ile font boyutlarını değiştirmek yerine Bootstrap’in hazır boyut sınıflarını <ul> etiketine uygulayabilirsiniz.

• Büyük menüler için: .pagination-lg
• Küçük menüler için: .pagination-sm

Örnek Kullanım:

<!-- Büyük Boyutlu Sayfalandırma -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>

<!-- Küçük Boyutlu Sayfalandırma -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>

5. Sayfalandırmayı Hizalamak (Alignment)

Varsayılan olarak sayfalandırma menüleri sola dayalı olarak belirir. Ancak bir tablo altındaki sayfalandırmayı sağa yaslamak veya bir blog sayfasındaki sayfalandırmayı merkeze ortalamak isteyebilirsiniz. Bootstrap’in “Flexbox” hizalama sınıflarını <ul> etiketine ekleyerek bunu anında çözebilirsiniz.

• Merkeze hizalamak için: .justify-content-center
• Sağa hizalamak için: .justify-content-end

Örnek Kullanım:

<!-- Sayfanın tam ortasında duran sayfalandırma -->
<nav aria-label="Ortalanmış Menü">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="#">Geri</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="#">İleri</a></li>
  </ul>
</nav>

<!-- Ekranın sağına yaslanmış sayfalandırma -->
<nav aria-label="Sağa Yaslı Menü">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled"><a class="page-link" href="#">Geri</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="#">İleri</a></li>
  </ul>
</nav>

6. Bootstrap 5 ile Sayfalandırmaya Gelen Yenilikler

Bootstrap 4’ten Bootstrap 5’e geçerken sayfalandırma bileşeni de performans ve estetik açısından önemli güncellemeler almıştır:

• Dinamik Kenar Yuvarlama (Border-Radius): Bootstrap 5 ile birlikte, sayfalandırma linkleri birbirinden ayrıldığında (örneğin aralarına özel bir boşluk veya margin eklendiğinde), kenarlarının dinamik olarak yuvarlaklaşmasını sağlayan geliştirilmiş bir margin-left mantığı sisteme entegre edilmiştir. Bu, daha özelleştirilebilir tasarımlar yapmanıza olanak tanır.
• Geçiş Efektleri (Transitions): Kullanıcı deneyimini (UX) artırmak adına, fare ile sayfalandırma linklerinin üzerine gelindiğinde (hover) veya tıklandığında renk değişimlerinin çok daha yumuşak ve estetik olmasını sağlayan CSS transition özellikleri bileşene varsayılan olarak eklenmiştir.

Özetle; Sayfalandırmanın Gücü

Bir web sitesinin hem görsel bütünlüğü hem de teknik SEO performansı için içeriklerin mantıklı sayfalara bölünmesi şarttır. Yüzlerce ürünü tek bir DOM ağacında yüklemeye çalışmak sitenizi hantallaştırır. Bootstrap 5’in Pagination bileşeni; .pagination, .page-item ve .page-link gibi akılda kalıcı sınıflarıyla bu sorunu saniyeler içinde çözer. Öğrendiğiniz bu .active, .disabled durumlarını ve boyutlandırma araçlarını mevcut projelerinizde (özellikle ürün listeleme veya blog arşiv sayfalarınızda) uygulayarak, ziyaretçilerinize arama motorlarının da çok seveceği hızlı, gezinmesi kolay ve modern bir arayüz sunabilirsiniz.