Sélection de la langue

Recherche

Regroupement de liste

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Utilisez les composantes « groupe de listes » pour contenir des éléments de contenu liés.

Conception et codage

Utilisation de base

Défaut

L'utiliser pour grouper des éléments de contenu liés en tant que liste non ordonnée. Ajoutez des liens en utilisant des balises d'ancrage au lieu d'éléments de liste (autrement dit, en utilisant le parent <div> au lieu de <ul>).

Apparence

Aucun lien :

  • Texte
  • Texte

Avec des liens :

Texte de lien Texte de lien (élément actif) Texte de lien
Bonne utilisation

Points de conformité :

  • Utilisez l'élément « unordered list » (<ul>) seulement lorsqu'il n'y a pas de liens
  • Utilisez l'élément <div> lorsqu'il y a des liens
  • Appliquez la classe .active lorsque la cible du lien correspond à l'adresse de la page actuelle
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code
// Aucun lien :
<ul class="list-group">
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
</ul>

// Avec des liens :
<div class="list-group">
  <a href="#" class="list-group-item">...</a>
  <a href="#" class="list-group-item active">...</a>
  <a href="#" class="list-group-item">...</a>
</div>

Utilisation améliorée

Couleurs

Utilisez les classes de couleur pour appliquer un style à des éléments de liste, par défaut ou mis en lien.

Apparence

Aucun lien :

  • Texte
  • Texte
  • Texte
  • Texte

Avec des liens :

Texte de lien Texte de lien Texte de lien Texte de lien

Avec des liens (état actif) :

Texte de lien (élément actif) Texte de lien (élément actif) Texte de lien (élément actif) Texte de lien (élément actif)
Bonne utilisation

Points de conformité :

  • Des couleurs d'arrière-plan peuvent être ajoutées :
    • .list-group-item-success lorsque l'élément est exact
    • .list-group-item-info lorsque l'élément est à titre d'information
    • .list-group-item-warning lorsque l'élément avertit l'utilisateur
    • .list-group-item-danger lorsque l'élément ou l'action pose un danger
  • Appliquez la classe .active lorsque la cible du lien correspond à l'adresse de la page actuelle
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Aucun lien :
<ul class="list-group">
  <li class="list-group-item list-group-item-success">...</li>
  <li class="list-group-item list-group-item-info">...</li>
  <li class="list-group-item list-group-item-warning">...</li>
  <li class="list-group-item list-group-item-danger">...</li>
</ul>

// Avec des liens :
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">...</a>
  <a href="#" class="list-group-item list-group-item-info">...</a>
  <a href="#" class="list-group-item list-group-item-warning">...</a>
  <a href="#" class="list-group-item list-group-item-danger">...</a>
</div>


// Avec des liens (état actif) :
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success active">...</a>
  <a href="#" class="list-group-item list-group-item-info active">...</a>
  <a href="#" class="list-group-item list-group-item-warning active">...</a>
  <a href="#" class="list-group-item list-group-item-danger active">...</a>
</div>

Badges

Appliquez la composante des badges à n'importe quel élément « list group », et il sera automatiquement positionné à droite.

Apparence

Aucun lien :

  • 14 Texte
  • 2 Texte

Avec des liens :

14 Texte de lien 2 Texte de lien (élément actif) 5 Texte de lien
Bonne utilisation

Point d'observation :

Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Aucun lien :
<ul class="list-group">
  <li class="list-group-item"><span class="badge">14</span> ...</li>
  <li class="list-group-item"><span class="badge">2</span> ...</li>
</ul>

// Avec des liens :
<div class="list-group">
  <a href="#" class="list-group-item"><span class="badge">14</span> ...</a>
  <a href="#" class="list-group-item active"><span class="badge">2</span> ...</a>
  <a href="#" class="list-group-item"><span class="badge">5</span> ...</a>
</div>

Contenu complexe

L'utiliser pour ajouter une structure à une classe « groupe de listes ». On peut ajouter presque n'importe quel code HTML à cette classe « groupe de listes », même dans le cas d'une classe « groupe de listes » liée comme celle ci-dessous.

Apparence

Aucun lien :

  • En-tête

    Contenu

  • En-tête

    Contenu

Avec des liens :

En-tête

Contenu

En-tête

Contenu

En-tête

Contenu
Bonne utilisation

Point d'observation :

  • L'utiliser lorsqu'il faut ajouter une structure supplémentaire dans chaque élément de menu
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
// Aucun lien :
<ul class="list-group">
  <li class="list-group-item">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </li>
  ...
</ul>

// Avec des liens :
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
  ...
</div>

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe)

Date de modification: