Önyükleme Sayfalandırması


Temel Sayfalandırma

Çok sayıda sayfası olan bir web siteniz varsa, her sayfaya bir çeşit sayfa numarası eklemek isteyebilirsiniz.

Bootstrap'ta temel bir sayfalandırma şöyle görünür:

Temel bir sayfalandırma oluşturmak için .paginationsınıfı bir <ul>öğeye ekleyin:

Örnek

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Aktif Durum

Etkin durum, geçerli sayfanın ne olduğunu gösterir:

.activeKullanıcıya hangi sayfada olduğunu bildirmek için sınıf ekleyin :

Örnek

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>


Engelli Devlet

Devre dışı bırakılmış bir bağlantı tıklanamaz:

.disabledHerhangi bir nedenle bir bağlantı devre dışı bırakılmışsa sınıf ekleyin :

Örnek

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Sayfalandırma Boyutlandırma

Sayfalandırma blokları ayrıca daha büyük bir boyuta veya daha küçük bir boyuta göre boyutlandırılabilir:

.pagination-lgDaha büyük bloklar veya .pagination-smdaha küçük bloklar için sınıf ekleyin :

Örnek

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Galeta unu

Sayfalandırmanın başka bir biçimi de kırıntılardır:

Sınıf .breadcrumb, geçerli sayfanın bir gezinme hiyerarşisi içindeki konumunu belirtir:

Örnek

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

Aşağıdaki listeyi sayfalandırma menüsüne dönüştürmek için doğru sınıf adını ekleyin.

<ul class="">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>


Eksiksiz Bootstrap Navigasyon Referansı

Tüm gezinme sınıflarının eksiksiz bir referansı için eksiksiz Bootstrap Navigasyon Referansımıza gidin .