Design LISTES

Introduction aux listes

Les list-group permettent d'afficher une liste d'éléments structurés, interactifs ou statiques, avec un style propre et uniforme.

Les list-group permettent de créer des menus, listes, notifications et interfaces dynamiques très facilement.

Liste basique

Aperçu :

Item 1
Item 2
Item 3


<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Elément actif

Aperçu :

Item actif
Item normal
Item normal


<ul class="list-group">
  <li class="list-group-item active">Item actif</li>
  <li class="list-group-item">Item normal</li>
  <li class="list-group-item">Item normal</li>
</ul>

Elément désactivé

Aperçu :

Item désactivé
Item normal
Item normal


<ul class="list-group">
  <li class="list-group-item disabled">Item désactivé</li>
  <li class="list-group-item">Item normal</li>
  <li class="list-group-item">Item normal</li>
</ul>

Liste avec liens

Aperçu :

Lien désactivé
Lien actif
Lien normal


<ul class="list-group">
  <li class="list-group-item list-group-item-action disabled">Lien désactivé</li>
  <li class="list-group-item list-group-item-action active">Lien actif</li>
  <li class="list-group-item list-group-item-action">Lien normal</li>
</ul>

list-group-item-action rend les éléments cliquables.

Liste flush (sans bordures)

Aperçu :

Item 1
Item 2
Item 3


<ul class="list-group list-group-flush">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>