Bootstrap Groupe de listes
Dans ce chapitre, nous allons aborder les groupes de listes. Le composant groupe de listes est utilisé pour présenter du contenu complexe et personnalisé sous forme de liste. Les étapes pour créer un groupe de listes de base sont les suivantes :
- Ajoutez la classe à l'élément <ul>.list-group。
- Ajoutez la classe à l'élément <li>.list-group-item。
L'exemple suivant le démontre :
Exemple
<ul class="list-group">
<li class="list-group-item">Enregistrement de domaine gratuit</li>
<li class="list-group-item">Hébergement gratuit d'espace Windows</li>
<li class="list-group-item">Nombre d'images</li>
<li class="list-group-item">assistance 24*7</li>
<li class="list-group-item">Coût de mise à jour annuel</li>
</ul>
Essayez-le »
Le résultat est le suivant :
Ajouter des badges au groupe de listes
Nous pouvons ajouter des composants de badge à n'importe quel élément de liste, et ils seront automatiquement positionnés à droite. Ajoutez-le simplement à l'élément <li><span class="badge">et c'est tout. L'exemple suivant le démontre :
Exemple
<ul class="list-group">
<li class="list-group-item">Enregistrement de domaine gratuit</li>
<li class="list-group-item">Hébergement gratuit d'espace Windows</li>
<li class="list-group-item">Nombre d'images</li>
<li class="list-group-item">
<span class="badge">Nouveau</span>assistance 24*7</li>
<li class="list-group-item">Coût de mise à jour annuel</li>
<li class="list-group-item">
<span class="badge">Nouveau</span>Offre de réduction</li>
</ul>
Essayez-le »
Le résultat est le suivant :
Ajouter des liens au groupe de listes
En utilisant des balises d'ancrage au lieu d'éléments de liste, nous pouvons ajouter des liens au groupe de liste. Nous devons utiliser l'élément <a> au lieu de l'élément <li>. L'exemple suivant le démontre :
Exemple
<a href="#" class="list-group-item active">Enregistrement de domaine gratuit</a>
<a href="#" class="list-group-item">assistance 24*7</a>
<a href="#" class="list-group-item">Hébergement gratuit d'espace Window</a>
<a href="#" class="list-group-item">Nombre d'images</a>
<a href="#" class="list-group-item">Coût annuel de mise à jour</a>
Essayez-le »
Le résultat est le suivant :
Ajouter du contenu personnalisé au groupe de liste
Nous pouvons ajouter du contenu HTML arbitraire au groupe de liste auquel nous avons ajouté des liens ci-dessus. L'exemple suivant le démontre :
Exemple
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Forfait de site Web Starter</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Enregistrement de domaine gratuit</h4>
<p class="list-group-item-text">Vous enregistrerez votre domaine gratuit via le web.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Assistance 24*7</h4>
<p class="list-group-item-text">Nous fournissons une assistance 24*7.</p>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Pack site web professionnel</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Enregistrement de domaine gratuit</h4>
<p class="list-group-item-text">Vous enregistrerez votre domaine gratuit via le web.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Assistance 24*7</h4>
<p class="list-group-item-text">Nous fournissons une assistance 24*7.</p>
</a>
</div>
Essayez-le »
Le résultat est le suivant :
Liste horizontale
Dans les exemples ci-dessus, les listes sont affichées verticalement. Si nous avons besoin d'une liste horizontale, nous pouvons y parvenir avec le code suivant :
Exemple
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
Essayez-le »
Le résultat est le suivant :
Autres extensions
