Bootstrap - Groupe de listes
Le but du composant de groupe de listes est de rendre un contenu complexe et personnalisé dans des listes. Pour obtenir un groupe de listes de base -
Ajouter la classe .list-group à l'élément <ul>.
Ajouter une classe .list-group-item à <li>.
L'exemple suivant illustre ceci -
<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>
Ajout de badges au groupe de listes
Nous pouvons ajouter le composant badges à n'importe quel élément du groupe de listes et il sera automatiquement positionné sur la droite. Ajoutez simplement<span class = "badge">dans l'élément <li>. L'exemple suivant illustre ceci -
<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>
Lier des éléments de groupe de listes
En utilisant les balises d'ancrage au lieu des éléments de liste, nous pouvons lier les groupes de listes. Nous devons utiliser <div> au lieu de l'élément <ul>. L'exemple suivant illustre ceci -
<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>
Ajouter un contenu personnalisé au groupe de listes
Nous pouvons ajouter n'importe quel contenu HTML aux groupes de listes liées ci-dessus. L'exemple suivant illustre ceci -
<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>