Les listes Bootstrap

Présentation

• Il existe deux types de listes: avec ordre: <ol> et sans ordre: <ul> particulier. Sans ordre ils sont représenté en HTML par des points. Dans Bootstrap, vous pouvez également renoncer à ces symboles et créer une simple "bloc d'éléments".

Les types de liste Bootstrap

• Bootstrap prend en charge les listes ordonnées (<ol>), les listes non ordonnées (<ol>) et les listes de définitions (<dt>).

• Listes ordonnées:

  • une liste ordonnée est une liste classée dans un ordre séquentiel et précédée de chiffres.

• Listes non ordonnées:

  • Une liste non ordonnée est une liste qui n’a pas d’ordre particulier et qui est traditionnellement stylisée avec des puces.
  • Si vous ne voulez pas que les puces apparaissent, vous pouvez supprimer le style en utilisant la classe .list-unstyled.
  • Vous pouvez également placer tous les éléments de la liste sur une seule ligne à l'aide de la classe .list-inline.

• Listes de définition:

• Dans ce type de liste, chaque élément de la liste peut contenir les éléments <dt> et <dd>. <dt> signifie terme de définition et, comme un dictionnaire, il s'agit du terme (ou de la phrase) en cours de définition.
Exemple:

<h4>Exemple de liste ordonnée</h4>
<ol>
    <li>Elément 1</li>
    <li>Elément 2</li>
    <li>Elément 3</li>
    <li>Elément 4</li>
</ol>
<h4>Exemple de liste non ordonnée</h4>
<ul>
    <li>Elément 1</li>
    <li>Elément 2</li>
    <li>Elément 3</li>
    <li>Elément 4</li>
</ul>
<h4>Exemple de liste non stylée</h4>
<ul class="list-unstyled">
    <li>Elément 1</li>
    <li>Elément 2</li>
    <li>Elément 3</li>
    <li>Elément 4</li>
</ul>
<h4>Exemple de liste en ligne</h4>
<ul class="list-inline">
    <li>Elément 1</li>
    <li>Elément 2</li>
    <li>Elément 3</li>
    <li>Elément 4</li>
</ul>
<h4>Exemple de liste de définition</h4>
<dl>
    <dt>Description 1</dt>
    <dd>Elément 1</dd>
    <dt>Description 2</dt>
    <dd>Elément 2</dd>
</dl>
<h4>Exemple de liste de définition horizontale</h4>
<dl class="row">
    <dt class="col-sm-2">Description 1</dt>
    <dd class="col-sm-2">Elément 1</dd>
 </dl> 
  <dl class="row">
    <dt class="col-sm-2">Description 2</dt>
    <dd class="col-sm-2">Elément 2</dd>
</dl>