En son web geliştirme öğreticiler
 

Bootstrap List Groups

❮ Önceki Sonraki Bölüm ❯

Temel Liste Grupları

En temel liste grup listesi öğeleri ile bir sırasız listesi:

  • İlk madde
  • İkinci madde
  • Üçüncü öğe

Temel bir liste grubu oluşturmak için, bir kullanma <ul> sınıf ile eleman .list-group ve <li> sınıf ile elementler .list-group-item :

Örnek

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
Kendin dene "

Rozetleri ile Liste Grubu

Ayrıca liste grubuna rozetleri ekleyebilir. rozetleri otomatik sağda konumlanacak olan:

  • 12 Yeni
  • 5 silinmiş
  • 3 Uyarılar

Bir rozet oluşturmak için, oluşturmak <span> sınıf ile eleman .badge liste öğesi içindeki:

Örnek

<ul class="list-group">
  <li class="list-group-item"><span class="badge">12</span> New</li>
  <li class="list-group-item"><span class="badge">5</span> Deleted</li>
  <li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>
Kendin dene "

Bağlantılı Öğeler ile Grup Liste

Bir liste grubundaki öğeler de köprüler olabilir. Bu fareyle üzerine gri arka plan rengi katacak:

İlk madde İkinci madde Üçüncü öğe

Bağlı öğeler, kullanım içeren bir liste grubu oluşturmak için <div> yerine <ul> ve <a> yerine <li> :

Örnek

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
Kendin dene "

Aktif Devlet

İlk madde İkinci madde Üçüncü öğe

Kullanım .active Mevcut öğeyi vurgulamak için sınıf:

Örnek

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
Kendin dene "

Engelli Öğe

Aşağıdaki liste grubu engelli maddesi vardır:

İlk madde İkinci madde Üçüncü öğe

Bir öğeyi devre dışı bırakmak için, eklemek .disabled sınıfı:

Örnek

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
Kendin dene "

Bağlamsal Sınıflar

Bağlamsal sınıflar renk liste öğeleri için kullanılabilir:

  • İlk madde
  • İkinci madde
  • Üçüncü öğe
  • Dördüncü madde

Boyama liste öğeleri için sınıfları şunlardır: .list-group-item-success , list-group-item-info , list-group-item-warning ve .list-group-item-danger :

Örnek

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Kendin dene "

Özel içerik

Bir liste grup eşyanın içinde neredeyse herhangi bir HTML ekleyebilir.

Bootstrap sınıfları sağlar .list-group-item-heading ve .list-group-item-text aşağıdaki gibi kullanılabilir:

Örnek

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>
Kendin dene "

Egzersizleri ile Yourself test edin!

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


❮ Önceki Sonraki Bölüm ❯