Groupes de base
Le groupe de liste de base le plus est une liste non ordonnée avec les éléments de liste:
- Premier élément
- Second élément
- Troisième question
Pour créer un groupe de liste de base, utilisez un <ul> élément avec la classe .list-group , et <li> éléments avec la classe .list-group-item :
Exemple
<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> Essayez - le vous - même » Groupe Liste Avec Badges
Vous pouvez également ajouter des badges à un groupe de liste. Les badges seront automatiquement positionnés sur la droite:
- 12 Nouveau
- 5 Supprimé
- 3 Avertissements
Pour créer un badge, créer un <span> élément avec classe .badge intérieur l'élément de liste:
Exemple
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> Essayez - le vous - même » Liste Groupe Avec Articles liés
Les éléments d'un groupe de liste peuvent aussi être des hyperliens. Cela va ajouter une couleur de fond gris sur le vol stationnaire:
Pour créer un groupe de liste avec les éléments liés, utilisez <div> au lieu de <ul> et <a> au lieu de <li> :
Exemple
<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> Essayez - le vous - même » active State
Utilisez le .active classe pour mettre en évidence l'élément en cours:
Exemple
<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> Essayez - le vous - même » Disabled Item
Le groupe de la liste ci-dessous présente un élément désactivé:
Pour désactiver un élément, ajoutez la .disabled classe:
Exemple
<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> Essayez - le vous - même » Classes contextuelles
les classes contextuelles peuvent être utilisés pour la liste des couleurs des éléments:
- Premier élément
- Second élément
- Troisième question
- quatrième question
Les classes de colorants list-éléments sont les suivants : .list-group-item-success , list-group-item-info , list-group-item-warning d' .list-group-item-danger list-group-item-warning , et .list-group-item-danger :
Exemple
<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> Essayez - le vous - même » Contenu personnalisé
Vous pouvez ajouter presque tous HTML à l'intérieur d'un élément de groupe de liste.
Bootstrap fournit les classes .list-group-item-heading et .list-group-item-text qui peuvent être utilisés comme suit:
Exemple
<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> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »