Bootstrap - Liste Grubu
Liste grubu bileşeninin amacı, listelerde karmaşık ve özelleştirilmiş içerik oluşturmaktır. Temel bir liste grubu elde etmek için -
Sınıfı ekleyin .list-group <ul> öğesine.
Sınıf ekleyin .list-group-item <li>.
Aşağıdaki örnek bunu göstermektedir -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
Liste Grubuna Rozet Ekleme
Rozetler bileşenini herhangi bir liste grubu öğesine ekleyebiliriz ve otomatik olarak sağda konumlandırılacaktır. Sadece ekle<span class = "badge"><li> öğesi içinde. Aşağıdaki örnek bunu göstermektedir -
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>
Liste Grubu Öğelerini Bağlama
Liste öğeleri yerine bağlantı etiketlerini kullanarak liste gruplarını birbirine bağlayabiliriz. <ul> öğesi yerine <div> kullanmamız gerekiyor. Aşağıdaki örnek bunu göstermektedir -
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>
Liste Grubuna Özel İçerik Ekleyin
Yukarıdaki bağlantılı liste gruplarına herhangi bir HTML içeriği ekleyebiliriz. Aşağıdaki örnek bunu göstermektedir -
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>