Bootstrap Pagination, web sayfalarında çok sayıda içeriği düzenlemek ve kullanıcıların bu içerikler arasında geçiş yapmasını sağlamak için kullanılan bir bileşendir. Genellikle, birden fazla sayfaya yayılan veri listeleri veya içerikler için kullanılır, böylece kullanıcılar belirli bir sayfaya kolayca erişebilir.
Bootstrap Pagination Özellikleri
- Basit Tasarım: Kullanıcıların sayfalar arasında geçiş yapmalarını kolaylaştırır.
- Duyarlı Yapı: Mobil ve masaüstü cihazlarda uyumlu bir görünüm sunar.
- Sayfa Numaraları: Kullanıcıların belirli bir sayfayı hızlıca seçebilmesi için sayfa numaraları içerir.
- Aktif ve Pasif Sayfalar: Hangi sayfanın aktif olduğunu ve hangi sayfaların pasif olduğunu belirtir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir Pagination örneği verilmiştir. Bu örnek, kullanıcıların sayfalar arasında geçiş yapmalarını sağlayan bir sayfalama yapısı sunmaktadır.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Pagination Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Pagination Örneği</h2>
<nav aria-label="Sayfalama">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Önceki">
<span aria-hidden="true">
«
</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="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Sonraki">
<span aria-hidden="true">
»
</span>
<span class="visually-hidden">Sonraki</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Açıklama
-
Pagination Yapısı:
-
<nav aria-label="Sayfalama">: Sayfalama bileşenini tanımlayan bir navigasyon öğesi.aria-labelözelliği, erişilebilirliği artırmak için kullanılır. -
<ul class="pagination">: Sayfalama öğelerini kapsayan bir liste.paginationsınıfı, Bootstrap tarafından stil verilmiş bir sayfalama görünümü sağlar.
-
-
Sayfa Öğeleri:
-
<li class="page-item">: Her bir sayfa bağlantısını tanımlar. -
<a class="page-link">: Sayfa bağlantılarını tanımlar. Kullanıcıların sayfalara tıklayarak geçiş yapmasını sağlar. -
Önceki ve Sonraki Bağlantıları:
-
<span aria-hidden="true">«</span>: Önceki sayfa bağlantısını simgeler. -
<span aria-hidden="true">»</span>: Sonraki sayfa bağlantısını simgeler.
-
-
Önemli Notlar
- Aktif sayfayı belirtmek için
activesınıfını kullanabilirsiniz. Örneğin, ikinci sayfayı aktif hale getirmek için<li class="page-item active"><a class="page-link" href="#">2</a></li>şeklinde düzenleyebilirsiniz. - Sayfa sayısını dinamik olarak değiştirmek için JavaScript veya sunucu tarafı dillerini kullanabilirsiniz.
Bootstrap Pagination, kullanıcıların içerik arasında rahatça gezinmelerine olanak tanır. Kullanıcı deneyimini artırmak için etkili bir yol sunar ve özellikle çok sayfalı içeriklerde önemlidir.