Création de listes de bootstrap

Avec Bootstrap vous pouvez définir les trois différents types de listes à puces:
  • Listes non ordonné — une liste d'éléments dans laquelle l'ordre explicitement importe peu. Les éléments de liste de la liste à puces sont marqués par default avec des disques.
  • Est ordonnée aux listes ,une liste d'éléments dans laquelle l'ordre importe explicitement. Les éléments de liste dans les listes ordonnées sont marquées d'un numéro.
  • Liste de définitions — une liste de termes avec leurs descriptions associées.
  • Pour en savoir plus sur les listes à puces voir notre tutoriel
Tutoriel Bootstrap 3

Listes ordonnées et non ordonnées sans style

Les listes les plus élémentaires sont, soit une liste non ordonnée ou une liste ordonnée avec des éléments de liste bien sure :

Sélectionner le code
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Exemple de listes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2> Liste  Basic </h2>
  <ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
  </ul>
<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
  </ol>
</div>
</body>
</html>

 

Mais comme vous le savez ils ont un style pour la puce qui est un disque pour les liste non ordonnées et un numéro pour les listes ordonnées.

Si vous voulez supprimer ce style il suffit d’insérer la classe .list-unstyled aux éléments <ul> ou <ol> respectifs comme suit.

Sélectionner le code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Exemple</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2> Liste Basic </h2>
         <ul class="list-unstyled">
           <li>Premier élément</li>
           <li>Deuxième élément</li>
           <li>Troisième élément</li>
 		 </ul>
         <ol class="list-unstyled">
           <li>Premier élément</li>
            <li>Deuxième élément</li>
          <li>Troisième élément</li>
          </ol>
</div>
</body>
</html>

 

Remarque : La classe .list-unstyled ne supprime pas seulement le style mais elle supprime aussi le padding gauche  des éléments <li>.

Placer les éléments d’une liste ordonnées et non ordonnées en ligne (Inline) horizontalement.

Si vous voulez créer un menu horizontal à l'aide de la liste ordonnée ou non ordonnée,  vous devez placer tous les éléments de liste dans une seule ligne horizontalement  soit côte à côte.

Vous pouvez le faire en appliquant simplement la classe de Bootstrap .list-inline aux éléments <ul> ou <ol>.

La classe .list-inline ajoute également un padding gauche et droite (5px par défaut) pour  tous les éléments de liste.

Sélectionner le code
       
<div class="container">     
<ul class="list-inline">     
    <li>Accueil</li>     
    <li>Articles</li>     
    <li>Qui somme nous?</li>     
    <li>Contact</li>     
</ul>     
</div>     

 

Création de listes de définition horizontale

Les termes et les descriptions dans les listes de définition peuvent également être placés en ligne horizontale  à l'aide de la classe de Bootstrap. dl-horizontalside-by-side. Les termes des  listes de définition placés en horizontal risque d'être tronquées si ils sont trop longue pour tenir dans la colonne de gauche (160px par défaut), cependant, dans les fenêtres étroites, ils vont changer à la disposition par défaut empilé.

Sélectionner le code

<div class="container">
<dl class="dl-horizontal">
<dt>Agent utilisateur</dt>
<dd>Un agent utilisateur HTML est tout dispositif qui interprète les documents HTML.</dd>
<dt>Le script côté client</dt>
<dd>Le script côté client se réfère généralement à la catégorie de programmes informatiques sur le web qui sont exécutées côté client c'est-à-dire par le navigateur Web de l'utilisateur.</dd>
<dt>Document de référence</dt>
<dd>L'arbre d'éléments codés dans le document source.</dd>
</dl>
</div>

 

Remarque : Si des termes sont éclipsés dans les listes définition horizontale, ils  seront indiqués par des points de suspension (...) à l'aide de la propriété CSS text-overflow .

« Bootstrap » Création de groupes de Listes

Les groupes de  liste sont un composant très utile et flexible pour l'affichage des listes d'éléments d'une belle manière.

 Dans la forme la plus élémentaire, un groupe de liste est simplement une liste non ordonnée avec la classe .list-group et  les éléments de la liste avec la classe .list-group-item.

Sélectionner le code

<div class="container">
<ul class="list-group">
    <li class="list-group-item">Images</li>
    <li class="list-group-item">Documents</li>       
    <li class="list-group-item">Musiques</li>
    <li class="list-group-item">Vidéos</li>
</ul>
</div>

 

Groupe de Liste avec Badges

Vous pouvez également ajouter des badges à un groupe de  liste avec les badges se placera automatiquement sur la droite :

Sélectionner le code

<div class="container">
<ul class="list-group">
  <li class="list-group-item">Images  <span class="badge">125</span></li>
  <li class="list-group-item">Documents <span class="badge">45</span></li>
  <li class="list-group-item">Musiques <span class="badge">500</span></li>
   <li class="list-group-item">Vidéos  <span class="badge">81</span></li>
</ul>
</div>

 

Groupe de la liste avec les éléments liés

Vous pouvez également créer des éléments de groupe liste en utilisant des liens hypertexte avec  peu de changement dans le balisage HTML.

Il suffit de remplacer le <li> par la balise <a> et utilisez l’élément <div> comme  parent au lieu de <ul>. Vous pouvez également ajouter des icônes et des badges à ce groupe de liste pour lui donner une apparence  plus élégante. Le composant de badges se placera automatiquement sur la droite même si vous le placez à gauche comme le montre.

Sélectionner le code

<div class="container">
<div class="list-group">
    <a href="#" class="list-group-item active">
        <span class="glyphicon glyphicon-camera"></span><span class="badge">125</span> Images  </a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-file"></span> Documents <span class="badge">45</span> </a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-music"></span> Musiques <span class="badge">500</span></a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-film"></span> Vidéos  <span class="badge">81</span></a>
</div>
</div>

 

Astuce : Vous pouvez utiliser le composant de groupe liste Bootstrap pour créer le menu de navigation latéral, par exemple afficher la liste des produits ou catégories sur votre site Internet.

Groupe de la liste avec les États contextuels

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

Sélectionner le code
 
<div class="container">
<ul class="list-group">
    <li class="list-group-item list-group-item-success">200 OK</li>
    <li class="list-group-item list-group-item-info">100 Continuer</li>
    <li class="list-group-item list-group-item-warning">503 Service indisponible</li>
    <li class="list-group-item list-group-item-danger">400 fichier introuvable</li>
</ul>
</div>

 

Vous pouvez appliquer ces classes contextuelles sur les liste avec les éléments liés comme suit :

Sélectionner le code
 
<div class="container">
<div class="list-group">
    <a class="list-group-item list-group-item-success">200 OK </a>
    <a class="list-group-item list-group-item-info">100 Continuer</a>
    <a class="list-group-item list-group-item-warning">503 Service indisponible</a>
    <a class="list-group-item list-group-item-danger">400 fichier introuvable</a>
</div>
</div>

 


chapitre précédent chapitre suivant

Par carabde 25 decembre 2015