Création des listes avec Bootstrap

Vous pouvez définir les trois types de listes:

Listes non ordonnées - Liste des éléments dans lesquels l'ordre n'a pas d'importance explicite. Les éléments de la liste dans les listes non ordonnées sont marqués avec des puces.

Listes ordonnées - Liste des éléments dans lesquels l'ordre a une importance explicite. Les éléments de liste dans les listes ordonnées sont marqués avec des nombres.

Liste de définitions - Liste de termes avec leurs descriptions associées.

Listes non ordonnées :

Parfois, vous devrez peut-être supprimer la forme de style par défaut des éléments de la liste. Vous pouvez le faire en appliquant simplement la classe .list-unstyled aux éléments <ul> ou <ol> respectifs.

   <ul class="list-unstyled">

    <li> Accueil </li>

    <li>Produits

       <ul>

        <li>Gadgets</li>

        <li> Accessoires </li>

       </ul>

     </li>

     <li> À propos de nous </li>

     <li>Contact</li>

    </ul>

Voir le résultat en ligne: 

Mise en ligne des éléments de la liste ordonnée et non ordonnée :

Si vous souhaitez créer un menu horizontal en utilisant une liste ordonnée ou non ordonnée, vous devez placer tous les éléments de la liste dans une seule ligne, c'est-à-dire côte à côte. Vous pouvez le faire en appliquant simplement la classe .list-inline du Bootstrap aux éléments respectifs <ul> ou <ol>. La classe .list-inline ajoute également un remplissage gauche et droit (5px par défaut) à tous les éléments de la liste.

             <ul class="list-inline">

            <li>Acceuil</li>

            <li>Produits</li>

            <li>A propos de nous</li>

            <li>Contact</li>

             </ul>

Voir le résultat en ligne 

Création de listes de définition horizontales :

Les termes et les descriptions dans les listes de définition peuvent également être placés côte à côte en utilisant la classe Bootstrap .dl-horizontal. Les termes dans les listes de définition horizontale seront tronqués s'ils sont trop longs pour correspondre à la colonne de gauche (160px par défaut), mais dans les fenêtres de vue plus étroites, ils changeront pour la mise en page empilée par défaut.

    <dl class="dl-horizontal">

      <dt> Listes ordonnées </dt>

                  <dd> Liste des éléments dans lesquels l'ordre a une importance explicite.</dd                   <dt> Listes non ordonnées </dt>

      <dd> Liste des éléments dans lesquels l'ordre n'a pas d'importance explicite..</dd>

      <dt> Liste de définitions </dt>

                   <dd> Liste de termes avec leurs descriptions associées..</dd>

   </dl>

Voir le résultat  en ligne 

Création de groupes de listes avec Bootstrap :

Les groupes de listes sont un composant très utile et flexible pour afficher des listes d'éléments d'une belle manière. Sous la forme la plus simple, un groupe de liste est simplement une liste non ordonnée avec la classe .list-group tandis que les éléments de la liste ayant la classe .list-group-item.

<ul class="list-group">

    <li class="list-group-item">Mathématique</li>

    <li class="list-group-item">Statistique</li>        

    <li class="list-group-item">Finance</li>

    <li class="list-group-item">Economie</li>

</ul>

Le résultat :

Mathématique

Statistique

Finance

Economie

Liste du groupe avec des éléments liés :

Vous pouvez également créer un lien hypertexte avec des éléments de groupe de liste avec le petit changement de balisage HTML.

Il suffit de remplacer la balise <li> par <a> et d'utiliser l'élément <div> comme parent au lieu de <ul>. Vous pouvez également ajouter des icônes et des badges à ce groupe de listes pour le rendre plus élégant. Le composant badges sera automatiquement positionné sur la droite.

<div class="list-group">

        <a href="#" class="list-group-item active">

          <span class="glyphicon  glyphicon-list-alt"></span>

        Mathématique<span class="badge">25</span>

        </a>

        <a href="#" class="list-group-item">

          <span class="glyphicon glyphicon-file"></span>

           Statistique <span class="badge">145</span>

        </a>

        <a href="#" class="list-group-item">

          <span class="glyphicon glyphicon-list-alt"></span>

           Finance <span class="badge">50</span>

        </a>

        <a href="#" class="list-group-item">

          <span class="glyphicon glyphicon-book"></span>

            Economie <span class="badge">8</span>

        </a>

  </div>

Le résultat en ligne

Liste du groupe avec des états contextuels :

Comme la plupart des autres composants, vous pouvez également utiliser des classes contextuelles sur les éléments de groupe de liste pour appliquer un accent supplémentaire sur eux, comme ceci:

<ul class="list-group">

    <li class="list-group-item list-group-item-success">

200 OK: Le serveur a traité avec succès la demande.</li>

    <li class="list-group-item list-group-item-info">

100 Continue: Le client doit poursuivre sa demande.</li>

    <li class="list-group-item list-group-item-warning">

503 Service non disponible: Le serveur est 

temporairement incapable de traiter la demande.</li>

    <li class="list-group-item list-group-item-danger">

400 Requête incorrecte: la demande ne peut 

pas être satisfaite en raison d'une mauvaise

 syntaxe.</li>

</ul>

Le résultat en ligne

<<<Précédent                        Début                     Suivant >>>