Önyükleme Listesi 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>
Rozetli Liste Grubu
Bir liste grubuna rozetler de ekleyebilirsiniz. Rozetler otomatik olarak sağ tarafa yerleştirilecektir:
- 12 Yeni
- 5 silindi
- 3 uyarılar
Bir rozet oluşturmak
için liste öğesinin içinde <span>sınıfı olan bir öğe oluşturun:.badge
Örnek
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Bağlantılı Öğeleri Olan Liste Grubu
Liste grubundaki öğeler ayrıca köprüler olabilir. Bu, üzerine gelindiğinde gri bir arka plan rengi ekleyecektir:
Bağlantılı öğeler içeren bir liste grubu oluşturmak için <div>yerine <ul>
ve <a>yerine kullanın <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>
Aktif Durum
.activeGeçerli öğeyi vurgulamak için sınıfı kullanın :
Ö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>
Devre Dışı Öğe
Aşağıdaki liste grubunda devre dışı bırakılmış bir öğe var:
Bir öğeyi devre dışı bırakmak için .disabledsınıfı ekleyin:
Ö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>
Bağlamsal Sınıflar
Liste öğelerini renklendirmek için bağlamsal sınıflar kullanılabilir:
- İlk eşya
- İkinci öğe
- Üçüncü öğe
- dördüncü öğe
Liste öğelerini renklendirme 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>
Özel içerik
Bir liste grubu öğesinin içine hemen hemen her HTML'yi ekleyebilirsiniz.
.list-group-item-headingBootstrap, aşağıdaki gibi
.list-group-item-textkullanılabilecek sınıfları sağlar :
Ö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>