JSON - Types de données, le format JSON prend en charge différents types de données
Les listes les plus élémentaires sont, soit une liste non ordonnée ou une liste ordonnée avec des éléments de liste
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.
Listes ordonnées, 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
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 :
Code : HTML
<!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.
Code : HTML
<!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>.
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.
Code : HTML
<div class="container"> <ul class="list-inline"> <li>Accueil</li> <li>Articles</li> <li>Qui somme nous?</li> <li>Contact</li> </ul> </div>
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é.
Code : HTML
<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 .
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.
Code : HTML
<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>
Vous pouvez également ajouter des badges à un groupe de liste avec les badges se placera automatiquement sur la droite :
Code : HTML
<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>
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.
Code : HTML
<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.
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 :
Code : HTML
<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 :
Code : HTML
<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