Bootstrap 5 Sayfa Değiştirici

Temel sayfa bölmesi

Sitenizde çok sayıda sayfa varsa, her sayfa için bir tür sayfa bölmesi eklemek isteyebilirsiniz.

Temel sayfa bölmesini oluşturmak için .pagination sınıf ekleyin <ul> ögesine ardından .page-item ekleyin <li> ögesine ve her birine .page-link sınıf ekleyin <li> her bağlantı için:

Örnek

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">önceki sayfa</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 Sayfa</a></li>
</ul>

Kişisel olarak deneyin

Aktif durum

.active Güncel sayfayı vurgulamak için sınıf:

Örnek

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">önceki sayfa</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><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 Sayfa</a></li>
</ul>

Kişisel olarak deneyin

Devre dışı durum

.disabled Kullanılamayan bağlantılar için sınıf:

Örnek

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">önceki sayfa</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 Sayfa</a></li>
</ul>

Kişisel olarak deneyin

Sayfa boyutu

Sayfa bölme blokları daha büyük veya daha küçük boyutlara ayarlanabilir:

Daha büyük bloklar için sınıf ekleyin .pagination-lg veya daha küçük bloklar için ekleyin .pagination-sm Sınıf:

Örnek

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">önceki sayfa</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 Sayfa</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">önceki sayfa</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 Sayfa</a></li>
</ul>

Kişisel olarak deneyin

Sayfalandırma Hizalama

Sayfalandırma hizalığını değiştirmek için utility sınıflarını kullanın:

Örnek

<!-- Standart (sol hizalama) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Ortalama hizalama -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Sağ hizalama -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

Kişisel olarak deneyin

Ekmek İzi (Breadcrumbs)

Sayfalandırmanın başka bir biçimi de ekmek izi (Breadcrumbs) olacaktır:

.breadcrumb ve .breadcrumb-item Sınıf, mevcut sayfanın navigasyon hiyerarşisindeki konumunu belirler:

Örnek

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotoğraflar</a></li>
  <li class="breadcrumb-item"><a href="#">2019 Sonbahar</a></li>
  <li class="breadcrumb-item"><a href="#">Çin</a></li>
  <li class="breadcrumb-item active">Pekin</li>
</ul>

Kişisel olarak deneyin