Bootstrap 5 Listeleme Grubu
- Önceki sayfa BS5 sayfa dolaşımı
- Sonraki sayfa BS5 kartı
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
- Önceki sayfa BS5 sayfa dolaşımı
- Sonraki sayfa BS5 kartı