Bootstrap sayfalandırma (pagination), uzun içerikleri veya veri listelerini bölümlere ayırarak kullanıcının daha rahat gezinti yapmasını sağlar. Sayfalandırma, birden fazla sayfa arasında kolayca geçiş yapmayı mümkün kılan görsel bir bileşendir.
Temel Kullanım
Bootstrap’te bir sayfalandırma bileşeni oluşturmak için ul ve li etiketleri kullanılır. Bu elementlere pagination ve page-item, page-link sınıfları eklenerek düzgün bir tasarım elde edilir.
Örnek:
<nav aria-label="Sayfalandırma">
<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>
Aktif ve Devre Dışı Öğeler
Bir sayfayı vurgulamak için active sınıfı, tıklanamaz yapmak için disabled sınıfı kullanılabilir.
Örnek:
<nav aria-label="Sayfalandırma">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Önceki</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>
Farklı Sayfalandırma Boyutları
Bootstrap, sayfalandırma elemanlarının boyutunu pagination-lg veya pagination-sm sınıfları ile değiştirme imkanı sunar.
Örnek:
<!-- Büyük Sayfalandırma -->
<nav aria-label="Büyük Sayfalandırma">
<ul class="pagination pagination-lg">
<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="#">Sonraki</a></li>
</ul>
</nav>
<!-- Küçük Sayfalandırma -->
<nav aria-label="Küçük Sayfalandırma">
<ul class="pagination pagination-sm">
<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="#">Sonraki</a></li>
</ul>
</nav>
Merkezlenmiş Sayfalandırma
Sayfalandırmayı merkeze hizalamak için justify-content-center, sağa hizalamak için justify-content-end sınıfı kullanılabilir.
Örnek:
<nav aria-label="Merkezlenmiş Sayfalandırma">
<ul class="pagination justify-content-center">
<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="#">Sonraki</a></li>
</ul>
</nav>
Kenar Boşluklarını Kaldırma
Dar alanlarda daha minimal bir tasarım için .pagination yerine .pagination-sm kullanılabilir.
Sayfalandırma Renkleri
Sayfalandırma bağlantıları Bootstrap renk sınıflarıyla özelleştirilebilir.
Örnek:
<nav aria-label="Sayfalandırma">
<ul class="pagination">
<li class="page-item"><a class="page-link text-primary" href="#">1</a></li>
<li class="page-item"><a class="page-link text-danger" href="#">2</a></li>
<li class="page-item"><a class="page-link text-success" href="#">3</a></li>
</ul>
</nav>