En son web geliştirme öğreticiler
 

Bootstrap Pagination


Temel sayfalandırmayı

sayfalar dolu bir web siteniz varsa, her sayfaya pagination çeşit katmak isteyebilirsiniz.

Bootstrap bir temel sayfalama şuna benzer:

Temel bir sayfalandırma oluşturmak için eklemek .pagination bir etmek sınıfını <ul> elemanı:

Ö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>
Kendin dene "

Aktif Devlet

Aktif devlet geçerli sayfanın ne gösterir:

Ders ekle .active kullanıcı o / o hangi sayfada olduğunu bildirmek için:

Ö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>
Kendin dene "

Disabled State

Bir engelli bağlantı tıklanamıyor:

Ders ekle .disabled nedense bir bağlantı devre dışı bırakılırsa:

Ö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>
Kendin dene "

Pagination Sizing

Sayfalama bloklar da daha büyük bir boyuta veya daha küçük bir boyuta boyutlandırılabilir:

Sınıf ekleyin .pagination-lg daha büyük bloklar ya yönelik .pagination-sm küçük bloklar için:

Ö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>
Kendin dene "

Galeta unu

Sayfalama için diğer bir şekilde, ekmek kırıntıları olduğu:

.breadcrumb sınıfı seyir hiyerarşi içindeki mevcut sayfanın 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>
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »


Tamamlayın Bootstrap Navigasyon Referansı

Tüm navigasyon sınıfların tam referans için lütfen tüm gidin Bootstrap Navigasyon Referans .