Bootstrap Pagination ve Breadcrumb: Sayfalama ve İçerik Yolu

Pagination: temel yapı

Bootstrap'in sayfalaması birbirine bitişik büyük bağlantı kutularından oluşur. Belgelere göre bu yaklaşım bağlantıları gözden kaçmayacak kadar belirgin yapar, büyük tıklama alanları sunar ve kolayca ölçeklenir. Yapının bir liste olması da bilinçli bir seçimdir: ekran okuyucular kaç bağlantı bulunduğunu duyurabilir. Sarmalayıcı <nav> öğesi bölümü yardımcı teknolojilere bir gezinme bölgesi olarak tanıtır.

Bir sayfada genellikle birden fazla gezinme bölgesi olduğu için <nav> öğesine amacını anlatan bir aria-label vermeniz önerilir. Örneğin arama sonuçları arasında gezinen bir sayfalama için belgeler "Search results pages" gibi bir etiket önerir; Türkçe sitede "Arama sonuçları sayfaları" yazabilirsiniz.

<nav aria-label="Arama sonuçları sayfaları">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="?sayfa=1">Önceki</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=1">1</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="?sayfa=2">2</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=3">3</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=3">Sonraki</a></li>
  </ul>
</nav>

Bootstrap 5.0.2 derlenmiş CSS dosyasında temel kurallar şöyledir (kısaltıldı):

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  /* (kısaltıldı) */
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

Bu kurallardan üç sonuç çıkar. Birincisi, kutuların bitişik görünmesi her bağlantının bir öncekinin kenarlığının üzerine -1px kadar binmesinden gelir; iki kenarlık üst üste biner ve tek çizgi gibi görünür. İkincisi, yalnızca ilk ve son bağlantının dış köşeleri 0.25rem yuvarlatılır, aradakiler köşeli kalır. Üçüncüsü, .active ve .disabled sınıfları bağlantıya değil .page-item öğesine, yani <li> öğesine verilir; seçiciler öyle yazılmıştır.

Üzerine gelinen ya da odaklanan bağlantının z-index değeri yükseltilir; bu sayede bitişik kutularda vurgulanan kenarlık komşusunun altında kalmaz. Sürüm geçişi belgesi, 5.0 ile sayfalama bağlantılarına renk ve arka plan geçişleri (transition) eklendiğini de belirtir; kullanıcı işletim sisteminde azaltılmış hareket tercihini açtıysa prefers-reduced-motion medya sorgusu bu geçişi kapatır.

Simgeli önceki ve sonraki bağlantılar

"Önceki" ve "Sonraki" yazıları yerine bir simge ya da işaret kullanmak isterseniz ekran okuyucu desteğini aria öznitelikleriyle sağlamanız gerekir. Belgelerdeki yöntem şudur: bağlantıya anlamlı bir aria-label verilir, görünen işaret ise aria-hidden="true" taşıyan bir <span> içine konur. Böylece ekran okuyucu "«" işaretini okumaya çalışmaz, bağlantının adını söyler.

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

Etkin ve devre dışı sayfalar

Geçerli sayfayı belirtmek için .page-item öğesine .active ve aria-current="page" eklenir. Tıklanamaz görünmesi gereken bağlantılar için .disabled kullanılır. Burada belgelerin önemli bir uyarısı var: .disabled sınıfı bağlantıyı devre dışı bırakmayı pointer-events: none ile dener, ama bu özellik belgeler yazılırken standartlaşmamıştı ve klavyeyle gezinmeyi hesaba katmaz. Bu yüzden devre dışı bağlantılara her zaman tabindex="-1" eklemeniz ve işlevlerini tamamen durdurmak için kendi JavaScript'inizi kullanmanız önerilir.

Daha temiz bir yol da var: etkin ya da devre dışı bağlantıyı <a> yerine <span class="page-link"> yapmak. Görünüm aynı kalır, ama öğe tıklanamaz ve klavye odağı almaz. Önceki ve sonraki okları için de, kullanılamadıkları sayfada bağlantıyı tamamen çıkarabilirsiniz.

<nav aria-label="Ürün listesi sayfaları">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Önceki</span>
    </li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="?sayfa=2">2</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=3">3</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=2">Sonraki</a></li>
  </ul>
</nav>

Birinci sayfadayken "Önceki" gidilecek bir yer göstermediği için burada <span> olarak yazıldı. Geçerli sayfa olan 1 numara da bağlantı değil, çünkü kullanıcıyı bulunduğu sayfaya yeniden göndermenin bir anlamı yok.

Boyut ve hizalama

Daha büyük ya da daha küçük sayfalama için .pagination öğesine .pagination-lg veya .pagination-sm eklenir. Derlenmiş CSS'teki değerler şöyledir:

Kök yazı boyutu 16 piksel iken .pagination-lg yazı boyutu 20 piksele denk gelir. Sayfalama bir flex kapsayıcı olduğu için hizalama flex yardımcılarıyla yapılır: ortalamak için .justify-content-center, sağa yaslamak için .justify-content-end sınıfını .pagination öğesine eklersiniz. Bu sınıflar Bootstrap flex yazısında anlatılıyor.

<nav aria-label="Yorum sayfaları">
  <ul class="pagination pagination-sm justify-content-center">
    <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>

Uygulamalı örnek: çok sayfalı listede kısaltma

Belgelerdeki örnekler üç dört sayfalıktır. Gerçek bir listede ise yüzlerce sayfa olabilir ve hepsini göstermek mantıksızdır. Bootstrap'in bunun için hazır bir bileşeni yoktur, ama aynı sınıflarla yaygın bir kalıbı kurabilirsiniz: ilk ve son sayfa, geçerli sayfanın komşuları ve aradaki boşluklar için tıklanamaz bir üç nokta. Aşağıdaki örnek 12 sayfalık bir listenin 5. sayfasını gösterir:

<nav aria-label="Haber arşivi sayfaları">
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="?sayfa=4">Önceki</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=1">1</a></li>
    <li class="page-item disabled"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="?sayfa=4">4</a></li>
    <li class="page-item active" aria-current="page"><span class="page-link">5</span></li>
    <li class="page-item"><a class="page-link" href="?sayfa=6">6</a></li>
    <li class="page-item disabled"><span class="page-link">...</span></li>
    <li class="page-item"><a class="page-link" href="?sayfa=12">12</a></li>
    <li class="page-item"><a class="page-link" href="?sayfa=6">Sonraki</a></li>
  </ul>
</nav>

Üç nokta öğeleri .disabled sınıflı birer <span> olduğu için gri görünür, tıklanamaz ve odak almaz. Hangi sayfa numaralarının listeleneceğine sunucu tarafındaki kodunuz karar verir; Bootstrap bu hesabı yapmaz. Çok dar ekranlarda dokuz kutu tek satıra sığmayabilir, çünkü .pagination kuralında satır sarma yoktur. Bu durumda .pagination-sm kullanmak ya da dar ekranda bazı numaraları display yardımcılarıyla gizlemek işe yarar.

Sayfalamada Sass ayarları

Sayfalamanın renkleri ve ölçüleri $pagination- önekli değişkenlerden gelir: $pagination-padding-y ve $pagination-padding-x iç boşluğu, $pagination-color bağlantı rengini, $pagination-active-bg etkin sayfa zeminini, $pagination-border-color kenarlık rengini belirler. Boyut sınıfları scss/mixins/_pagination.scss içindeki pagination-size() mixin'iyle üretilir.

Bu mixin'de ilginç bir ayrıntı var. $pagination-margin-start değişkeni varsayılan olarak kenarlık genişliğinin eksi değeridir, bu yüzden kutular birbirine biner ve yalnızca uçlar yuvarlanır. Değişkene başka bir değer verirseniz mixin'deki koşul değişir ve her bağlantının dört köşesi ayrı ayrı yuvarlatılır; sürüm geçişi belgesi bu özelliği "birbirinden ayrıldığında tüm köşeleri dinamik olarak yuvarlanan" bağlantılar diye tanımlar. Aşağıdaki parça resmî Sass belgesindeki içe aktarma düzenini izler, derlenmediği için çıktı gösterilmiyor:

// custom.scss
// Sayfa kutularini birbirinden ayir: her kutu kendi yuvarlak koselerini alir
$pagination-margin-start: .25rem;

@import "../node_modules/bootstrap/scss/bootstrap";

Breadcrumb: içerik yolu

Breadcrumb, geçerli sayfanın site hiyerarşisindeki yerini gösterir. Belgeler sıralı ya da sırasız bir liste ve bağlantılı liste öğeleri kullanmanızı söyler; görünüm bilerek sade tutulmuştur, ek stili yardımcı sınıflarla siz verirsiniz.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Ana sayfa</a></li>
    <li class="breadcrumb-item"><a href="#">Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap sayfalama</li>
  </ol>
</nav>

Bootstrap 5.0.2 derlenmiş CSS dosyasında breadcrumb kuralları şöyledir:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #6c757d;
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: #6c757d;
}

Ayırıcı, ilk öğe dışındaki her öğenin önüne ::before sözde öğesiyle eklenir; HTML'e "/" yazmanız gerekmez, yazarsanız iki ayırıcı görürsünüz. Sayfalamadan farklı olarak breadcrumb flex-wrap: wrap taşır, yani uzun bir yol dar ekranda alt satıra geçer. Son öğenin grileşmesi .active sınıfından gelir.

v4'ten geçenler fark edecektir: sürüm geçişi belgesine göre 5.0'da breadcrumb'ın iç boşluğu, arka plan rengi ve köşe yuvarlaması kaldırılarak varsayılan görünüm sadeleştirildi ve ayırıcı için --bs-breadcrumb-divider CSS değişkeni eklendi. Eski gri kutulu görünümü istiyorsanız yardımcı sınıflarla kendiniz verirsiniz:

<nav aria-label="breadcrumb" class="bg-light rounded-3 px-3 py-2">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="#">Ana sayfa</a></li>
    <li class="breadcrumb-item active" aria-current="page">İletişim</li>
  </ol>
</nav>

Burada .breadcrumb listesinin kendi 1rem alt boşluğu mb-0 ile sıfırlandı, boşluk ve zemin dıştaki <nav> öğesine verildi. Kullanılan sınıflar spacing, border ve rounded ve renk sınıfları yazılarında anlatılıyor.

Breadcrumb ayırıcısını değiştirmek

Ayırıcıyı değiştirmenin iki yolu var: yerel --bs-breadcrumb-divider CSS değişkeni ya da $breadcrumb-divider Sass değişkeni (sağdan sola düzen için gerekirse $breadcrumb-divider-flipped). Bootstrap, Sass değişkenini CSS değişkeninin yedek değeri olarak kullanır; yukarıdaki kuraldaki var(--bs-breadcrumb-divider, "/") ifadesi bunu gösterir. Böylece CSS'i yeniden derlemeden, istediğiniz zaman genel ayırıcıyı ezebilirsiniz.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Ana sayfa</a></li>
    <li class="breadcrumb-item active" aria-current="page">Kütüphane</li>
  </ol>
</nav>

Değerin tırnak içinde yazıldığına dikkat edin: değişken CSS'in content özelliğine gider ve bu özellik metni tırnaklı bir dize olarak bekler. Sass tarafında da aynı nedenle tırnak üreten quote() fonksiyonu gerekir. Ayırıcı olarak gömülü bir SVG de kullanılabilir; belgeler bunu hem CSS değişkeniyle hem Sass değişkeniyle gösterir. Ayırıcıyı tamamen kaldırmak için --bs-breadcrumb-divider: ''; yazarsınız (CSS değişkenlerinde boş dize de bir değer sayılır) ya da Sass'ta değişkeni none yaparsınız. CSS değişkenlerinin işleyişi CSS değişkenleri yazısında anlatılıyor.

// custom.scss
$breadcrumb-divider: quote(">");
// Ayiriciyi kaldirmak icin:
// $breadcrumb-divider: none;

@import "../node_modules/bootstrap/scss/bootstrap";

Diğer breadcrumb değişkenleri $breadcrumb-padding-y ve $breadcrumb-padding-x (varsayılan 0), öğeler arası boşluk için $breadcrumb-item-padding-x (.5rem), $breadcrumb-margin-bottom (1rem), ayırıcı ve etkin öğe rengi için $breadcrumb-divider-color ile $breadcrumb-active-color değişkenleridir. $breadcrumb-bg ve $breadcrumb-border-radius varsayılan olarak null gelir; değer verirseniz derlenen CSS'e eklenir. Sass'ın genel kullanımı için Bootstrap Sass yazısına bakın.

Pagination ile breadcrumb arasındaki fark

İki bileşen de bir gezinme bölgesidir ve ikisi de <nav> içinde bir liste olarak kurulur, ama farklı yönlerde gezdirir. Sayfalama aynı listenin kardeş sayfaları arasında yatay hareket sağlar: 1, 2, 3 diye ilerleyen arama sonuçları ya da blog arşivi gibi. Breadcrumb ise dikey konumu gösterir: kullanıcının bulunduğu sayfanın hangi kategori ve üst sayfalar altında durduğunu. Bir ürün listesi sayfası ikisini birlikte kullanabilir; üstte kategori yolunu gösteren bir breadcrumb, altta sonraki ürün sayfalarına giden bir sayfalama. Bu durumda her <nav> kendi ayırt edici aria-label değerini taşımalıdır.

Erişilebilirlik özeti

• Sayfalamayı ve breadcrumb'ı bir <nav> içine alın ve aria-label ile amacını anlatın. Sayfada birden fazla sayfalama varsa etiketleri farklı olsun.
• Geçerli sayfayı aria-current="page" ile işaretleyin: sayfalamada etkin .page-item öğesinde, breadcrumb'da son öğede.
• Yalnızca simge içeren sayfalama bağlantılarına aria-label verin, simgeyi aria-hidden="true" ile gizleyin.
• Devre dışı sayfalama bağlantılarında tabindex="-1" kullanın ya da bağlantıyı <span> yapın.

Breadcrumb deseni hakkında daha fazla bilgi için belgeler WAI-ARIA Authoring Practices içindeki breadcrumb desenine yönlendirir. ARIA özniteliklerinin genel anlamı için ARIA rolleri ve öznitelikleri yazısına, Bootstrap'in erişilebilirlik yaklaşımı için Bootstrap erişilebilirlik yazısına bakabilirsiniz.

Sık yapılan hatalar

• active sınıfı bağlantıda. Sayfalamada .active ve .disabled .page-item öğesine verilir; bağlantıya verilirse CSS seçicisi eşleşmez ve renk değişmez.
• Devre dışı bağlantı klavyeyle hâlâ çalışıyor. pointer-events: none yalnızca fareyi engeller; tabindex="-1" ekleyin veya <span> kullanın.
• Ayırıcı tırnaksız. --bs-breadcrumb-divider: >; geçersiz bir content değeri üretir ve ayırıcı görünmez; değeri tırnak içine alın.
• Sass'ta quote() unutulmuş. Ayırıcı Sass değişkeninde tırnaklı dize üretmek için belgeler quote() fonksiyonunu şart koşar.
• HTML'e elle "/" yazmak. Ayırıcıyı CSS eklediği için öğeler arasında çift işaret görünür.
• v4 görünümünü beklemek. 5.0 breadcrumb'ı arka plansız ve iç boşluksuz gelir; gri kutu isteniyorsa yardımcı sınıflarla verilmelidir.
• Sayfalamanın kendini üretmesini beklemek. Bootstrap sayfa numarası hesaplamaz, bağlantı üretmez; bileşen tamamen işaretlemedir.

Sık Sorulan Sorular

Bootstrap pagination için JavaScript gerekir mi?

Hayır. Sayfalama ve breadcrumb yalnızca CSS bileşenleridir; Bootstrap'in JavaScript dosyası bunlar için kullanılmaz. Bağlantıların hangi adrese gideceğini ve hangi sayfanın etkin olduğunu sizin sunucu veya istemci kodunuz belirler.

Sayfalamayı nasıl ortalarım?

.pagination öğesine .justify-content-center ekleyin. Sağa yaslamak için .justify-content-end kullanılır. Sayfalama bir flex kapsayıcı olduğu için bu sınıflar doğrudan çalışır.

Breadcrumb ayırıcısını yalnızca bir sayfada değiştirebilir miyim?

Evet. --bs-breadcrumb-divider yerel bir CSS değişkeni olduğu için onu yalnızca ilgili <nav> öğesinin style özniteliğinde ya da kendi CSS dosyanızda bir seçiciyle tanımlayabilirsiniz; diğer breadcrumb'lar varsayılan "/" ile kalır.

Sayfa kutularını birbirinden ayırmak mümkün mü?

Sass kullanıyorsanız $pagination-margin-start değişkenine pozitif bir değer verin; mixin bu durumda her bağlantının dört köşesini yuvarlatır. Derlenmiş CSS kullanıyorsanız kendi CSS'inizle .page-item:not(:first-child) .page-link kuralındaki eksi kenar boşluğunu ezmeniz gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap nav tabs ve pills · Bootstrap navbar menü yapımı · Bootstrap flex sınıfları · Bootstrap erişilebilirlik · CSS değişkenleri ve var() · ARIA rolleri ve öznitelikleri