Bootstrap 5 Listeleme Grubu

temel liste grupları

En temel liste grupları, listeleme öğeleri içeren sıralı listelerdir:

Temel liste grupları oluşturmak için sınıfı kullanın: .list-group nın <ul> elemen ve sınıf: .list-group-item nın <li> elemen:

Örnek

<ul class="list-group">
  <li class="list-group-item">Birinci madde</li>
  <li class="list-group-item">İkinci madde</li>
  <li class="list-group-item">Üçüncü madde</li>
</ul>

Kişisel olarak deneyin

aktif durum

Kullanın .active geçerli projeyi vurgulamak için sınıf kullanın:

Örnek

<ul class="list-group">
  <li class="list-group-item active">aktif proje</li>
  <li class="list-group-item">İkinci madde</li>
  <li class="list-group-item">Üçüncü madde</li>
</ul>

Kişisel olarak deneyin

bağlantılı öğeler içeren liste grupları

Bağlantılı öğeler içeren liste grupları oluşturmak için <div> yerine <ul>ile <a> yerine <li>Eğer farenin üzerindeyken gri arka plan rengi görmek istiyorsanız, ekleyin .list-group-item-action Sınıf:

Örnek

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">ilk madde</a>
  <a href="#" class="list-group-item list-group-item-action">ikinci madde</a>
  <a href="#" class="list-group-item list-group-item-action">Üçüncü madde</a>
</div>

Kişisel olarak deneyin

Devre dışı bırakılmış öğeler

.disabled sınıfları, devre dışı bırakılmış öğelere daha hafif metin rengi ekler. Bağlantı üzerinde kullanıldığında, farenin üzerine gelme etkisi kaldırılır:

Örnek

<div class="list-group">
  <a href="#" class="list-group-item disabled">Devre dışı bırakılmış öğe</a>
  <a href="#" class="list-group-item disabled">Devre dışı bırakılmış öğe</a>
  <a href="#" class="list-group-item">Üçüncü madde</a>
</div>

Kişisel olarak deneyin

Kenarlık kaldır

Kullanarak .list-group-flush sınıfları, kenarlık ve yuvarlak köşeleri kaldırır:

Örnek

<ul class="list-group list-group-flush">
  <li class="list-group-item">Birinci madde</li>
  <li class="list-group-item">İkinci madde</li>
  <li class="list-group-item">Üçüncü madde</li>
  <li class="list-group-item">Dördüncü madde</li>
</ul>

Kişisel olarak deneyin

Sayılı liste grupları

Kullanarak .list-group-numbered Sınıflar, sayılı liste öğeleri oluşturmak için kullanılır:

Örnek

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Birinci madde</li>
  <li class="list-group-item">İkinci madde</li>
  <li class="list-group-item">Üçüncü madde</li>
</ol>

Kişisel olarak deneyin

Yatay liste grupları

Liste öğelerinin dikey yerine yatay olarak görüntülenmesini (yanyana değil, yığın olarak) istiyorsanız, .list-group-horizontal sınıf ekleyin .list-group

Örnek

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Birinci madde</li>
  <li class="list-group-item">İkinci madde</li>
  <li class="list-group-item">Üçüncü madde</li>
  <li class="list-group-item">Dördüncü madde</li>
</ul>

Kişisel olarak deneyin

Bağlam sınıfları

Bağlam sınıfları, liste öğelerine renk eklemek için kullanılabilir:

Liste öğelerine renk veren sınıflar:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Örnek

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Başarı öğesi</li>
  <li class="list-group-item list-group-item-secondary">İkincil öğe</li>
  <li class="list-group-item list-group-item-info">Bilgi öğesi</li>
  <li class="list-group-item list-group-item-warning">Uyarı öğesi</li>
  <li class="list-group-item list-group-item-danger">Tehlike öğesi</li>
  <li class="list-group-item list-group-item-primary">Birincil öğe</li>
  <li class="list-group-item list-group-item-dark">Karanlık öğe</li>
  <li class="list-group-item list-group-item-light">Aydınlık öğe</li>
</ul>

Kişisel olarak deneyin

Bağlam sınıfı içeren bağlantı öğesi

Örnek

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Eylem öğesi</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Başarı öğesi</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">İkincil öğe</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Bilgi öğesi</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Uyarı öğesi</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Tehlikeli madde</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Ana madde</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Karanlık madde</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Aydınlık madde</a>
</div>

Kişisel olarak deneyin

Rozetli listeleme grubu

Taşıyın .badge Klaslar ve utility/helper sınıfları birleştirildiğinde, listeleme gruplarına rozet eklenebilir:

Örnek

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Gelen kutusu
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Reklam e-postaları
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Çöp kutusu
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Kişisel olarak deneyin