PHPHocası Yazılım Akademisi
Bootstrap 5 Components 2026 Güncel

Bootstrap Bileşenler Pagination

4 dk okuma süresi • 542 görüntülenme • 2024-10-06 • 4.9 (14 değerlendirme)

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

  1. Basit Tasarım: Kullanıcıların sayfalar arasında geçiş yapmalarını kolaylaştırır.
  2. Duyarlı Yapı: Mobil ve masaüstü cihazlarda uyumlu bir görünüm sunar.
  3. Sayfa Numaraları: Kullanıcıların belirli bir sayfayı hızlıca seçebilmesi için sayfa numaraları içerir.
  4. 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"> &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="#">4</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> </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. pagination sı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">&laquo;</span> : Önceki sayfa bağlantısını simgeler.
      • <span aria-hidden="true">&raquo;</span> : Sonraki sayfa bağlantısını simgeler.

Önemli Notlar

  • Aktif sayfayı belirtmek için active sı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.

Bu Dersi Değerlendirin

Bu ders size yardımcı oldu mu? Puan verin!

Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.

4.9 / 5 (Toplam 14 oy kullanıldı)

Sıkça Sorulan Sorular (SSS)

Bu ders ve konuyla ilgili en çok merak edilenler

Bootstrap Bileşenler Pagination dersini öğrenmek için ön koşul var mı?

Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

Paylaş:
PHP Hocası Akademi
Önceki Ders Bootstrap Bileşenler Offcanvas Sonraki Ders Bootstrap Bileşenler Placeholder

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor

Henüz yorum yapılmamış. İlk yorumu siz yazın!