Bootstrap 4 Liste Grupları
Temel Liste Grupları
En temel liste grubu, liste öğelerini içeren sırasız bir listedir:
- İlk eşya
- İkinci öğe
- Üçüncü öğe
Temel bir liste grubu oluşturmak için class ile bir <ul>öğe ve class .list-groupile
<li>öğeler kullanın .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>
Aktif Durum
- Aktif öğe
- İkinci öğe
- Üçüncü öğe
.activeGeçerli öğeyi vurgulamak için sınıfı kullanın :
Örnek
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Bağlantılı Öğeleri Olan Liste Grubu
Bağlantılı öğeler içeren bir liste grubu oluşturmak için <div>yerine <ul>
ve <a>yerine kullanın <li>. İsteğe bağlı olarak, .list-group-item-actionfareyle üzerine gelindiğinde gri bir arka plan rengi istiyorsanız sınıfı ekleyin:
Örnek
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Devre Dışı Öğe
Sınıf .disabled, devre dışı bırakılan öğeye daha açık bir metin rengi ekler. Bağlantılarda kullanıldığında, vurgulu efekti kaldıracaktır:
Örnek
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Kenarları Temizle / Kaldır
.list-group-flushBazı kenarlıkları ve yuvarlatılmış köşeleri kaldırmak için sınıfı kullanın :
- İlk eşya
- İkinci öğe
- Üçüncü öğe
- dördüncü öğe
Örnek
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Yatay Liste Grupları
Liste öğelerinin dikey yerine yatay olarak görüntülenmesini istiyorsanız (üst üste değil yan yana), .list-group-horizontalsınıfı şuraya ekleyin .list-group:
- İlk eşya
- İkinci öğe
- Üçüncü öğe
- dördüncü öğe
Örnek
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Bağlamsal Sınıflar
Liste öğelerini renklendirmek için bağlamsal sınıflar kullanılabilir:
- Başarı öğesi
- ikincil öğe
- Bilgi öğesi
- Uyarı öğesi
- Tehlike öğesi
- Birincil öğe
- Karanlık öğe
- Hafif öğe
Liste öğelerini renklendirme sınıfları şunlardır:
.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-darkve list-group-item-light,:
Örnek
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
Öğeleri Bağlamsal Sınıflarla bağla
Örnek
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Rozetli Liste Grubu
.badgeListe grubuna rozet eklemek için sınıfları yardımcı/yardımcı sınıflarla birleştirin :
- Gelen kutusu 12
- Reklamlar 50
- Hurda 99
Örnek
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
İpucu: BS4 Utilities Bölümümüzde Bootstrap 4 Utility/Helper sınıfları hakkında daha fazla bilgi edinin .