Composants
Plus d'une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, des groupes de saisie, une navigation, des alertes et bien plus encore.
Plus d'une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, des groupes de saisie, une navigation, des alertes et bien plus encore.
Comprend plus de 250 glyphes au format de police de l'ensemble Glyphicon Halflings. Les Glyphicons Halflings ne sont normalement pas disponibles gratuitement, mais leur créateur les a rendus disponibles gratuitement pour Bootstrap. En guise de remerciement, nous vous demandons seulement d'inclure un lien vers Glyphicons dans la mesure du possible.
Pour des raisons de performances, toutes les icônes nécessitent une classe de base et une classe d'icônes individuelles. Pour l'utiliser, placez le code suivant à peu près n'importe où. Assurez-vous de laisser un espace entre l'icône et le texte pour un remplissage approprié.
Les classes d'icônes ne peuvent pas être directement combinées avec d'autres composants. Ils ne doivent pas être utilisés avec d'autres classes sur le même élément. Au lieu de cela, ajoutez un imbriqué <span>
et appliquez les classes d'icônes au <span>
.
Les classes d'icônes ne doivent être utilisées que sur des éléments qui ne contiennent pas de contenu textuel et qui n'ont pas d'éléments enfants.
Bootstrap suppose que les fichiers de polices d'icônes seront situés dans le ../fonts/
répertoire, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de police signifie mettre à jour le CSS de l'une des trois manières suivantes :
@icon-font-path
et/ou dans les fichiers source Less.@icon-font-name
url()
chemins dans le CSS compilé.Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.
Les versions modernes des technologies d'assistance annonceront le contenu généré par CSS, ainsi que des caractères Unicode spécifiques. Pour éviter une sortie involontaire et déroutante dans les lecteurs d'écran (en particulier lorsque les icônes sont utilisées uniquement pour la décoration), nous les masquons avec l' aria-hidden="true"
attribut .
Si vous utilisez une icône pour transmettre une signification (plutôt que seulement comme élément décoratif), assurez-vous que cette signification est également transmise aux technologies d'assistance - par exemple, incluez du contenu supplémentaire, visuellement caché avec la .sr-only
classe.
Si vous créez des contrôles sans autre texte (comme un <button>
contenant uniquement une icône), vous devez toujours fournir un contenu alternatif pour identifier l'objectif du contrôle, afin qu'il ait un sens pour les utilisateurs de technologies d'assistance. Dans ce cas, vous pouvez ajouter un aria-label
attribut sur le contrôle lui-même.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Utilisez-les dans des boutons, des groupes de boutons pour une barre d'outils, une navigation ou des entrées de formulaire ajoutées.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Icône utilisée dans une alerte pour indiquer qu'il s'agit d'un message d'erreur, avec un .sr-only
texte supplémentaire pour transmettre cet indice aux utilisateurs de technologies d'assistance.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Menu contextuel basculable pour afficher des listes de liens. Rendu interactif avec le plugin JavaScript déroulant .
Enveloppez le déclencheur de la liste déroulante et le menu déroulant dans .dropdown
, ou un autre élément qui déclare position: relative;
. Ajoutez ensuite le code HTML du menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Les menus déroulants peuvent être modifiés pour se développer vers le haut (au lieu de vers le bas) en ajoutant .dropup
au parent.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Par défaut, un menu déroulant est automatiquement positionné à 100 % du haut et le long du côté gauche de son parent. Ajouter .dropdown-menu-right
à a .dropdown-menu
pour aligner à droite le menu déroulant.
Les listes déroulantes sont automatiquement positionnées via CSS dans le flux normal du document. Cela signifie que les listes déroulantes peuvent être rognées par les parents avec certaines overflow
propriétés ou apparaître en dehors des limites de la fenêtre d'affichage. Résolvez ces problèmes par vous-même au fur et à mesure qu'ils surviennent.
.pull-right
Alignement obsolèteDepuis la v3.1.0, nous avons abandonné .pull-right
les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right
. Les composants de navigation alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner automatiquement le menu. Pour le remplacer, utilisez .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Ajoutez un en-tête pour étiqueter les sections d'actions dans n'importe quel menu déroulant.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Ajoutez un séparateur pour séparer les séries de liens dans un menu déroulant.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Ajoutez .disabled
à un <li>
dans la liste déroulante pour désactiver le lien.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Regroupez une série de boutons sur une seule ligne avec le groupe de boutons. Ajoutez une radio JavaScript facultative et un comportement de style de case à cocher avec notre plugin de boutons .
Lorsque vous utilisez des info-bulles ou des popovers sur des éléments dans un .btn-group
, vous devrez spécifier l'option container: 'body'
pour éviter les effets secondaires indésirables (tels que l'élément s'élargissant et/ou perdant ses coins arrondis lorsque l'info-bulle ou le popover est déclenché).
role
et fournissez une étiquettePour que les technologies d'assistance, telles que les lecteurs d'écran, indiquent qu'une série de boutons est regroupée, un role
attribut approprié doit être fourni. Pour les groupes de boutons, ce serait role="group"
, tandis que les barres d'outils devraient avoir un role="toolbar"
.
Une exception sont les groupes qui ne contiennent qu'un seul contrôle (par exemple les groupes de boutons justifiés avec <button>
des éléments) ou une liste déroulante.
De plus, les groupes et les barres d'outils doivent recevoir une étiquette explicite, car la plupart des technologies d'assistance ne les annonceront pas, malgré la présence de l' role
attribut correct. Dans les exemples fournis ici, nous utilisons aria-label
, mais des alternatives telles que aria-labelledby
peuvent également être utilisées.
Enveloppez une série de boutons avec .btn
in .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Combinez des ensembles de <div class="btn-group">
dans un <div class="btn-toolbar">
pour des composants plus complexes.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Au lieu d'appliquer des classes de dimensionnement de bouton à chaque bouton d'un groupe, ajoutez simplement .btn-group-*
à chacun .btn-group
, y compris lors de l'imbrication de plusieurs groupes.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Placez un .btn-group
dans un autre .btn-group
lorsque vous souhaitez mélanger des menus déroulants avec une série de boutons.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Faire apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement. Les listes déroulantes des boutons partagés ne sont pas prises en charge ici.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Faites en sorte qu'un groupe de boutons s'étire à des tailles égales pour couvrir toute la largeur de son parent. Fonctionne également avec les listes déroulantes de boutons dans le groupe de boutons.
En raison du HTML et du CSS spécifiques utilisés pour justifier les boutons (à savoir display: table-cell
), les bordures entre eux sont doublées. Dans les groupes de boutons réguliers, margin-left: -1px
est utilisé pour empiler les bordures au lieu de les supprimer. Cependant, margin
ne fonctionne pas avec display: table-cell
. Par conséquent, selon vos personnalisations de Bootstrap, vous souhaiterez peut-être supprimer ou recolorer les bordures.
Internet Explorer 8 n'affiche pas les bordures des boutons dans un groupe de boutons justifié, qu'il s'agisse de sur <a>
ou d' <button>
éléments. Pour contourner cela, enveloppez chaque bouton dans un autre .btn-group
.
Voir #12476 pour plus d'informations.
<a>
des élémentsEnveloppez simplement une série de .btn
s dans.btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Si les <a>
éléments sont utilisés pour agir comme des boutons - déclenchant une fonctionnalité dans la page, plutôt que de naviguer vers un autre document ou une section de la page actuelle - ils doivent également recevoir un role="button"
.
<button>
des élémentsPour utiliser des groupes de boutons justifiés avec <button>
des éléments, vous devez envelopper chaque bouton dans un groupe de boutons . La plupart des navigateurs n'appliquent pas correctement notre CSS pour la justification des <button>
éléments, mais comme nous prenons en charge les listes déroulantes de boutons, nous pouvons contourner ce problème.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Utilisez n'importe quel bouton pour déclencher un menu déroulant en le plaçant dans un .btn-group
et en fournissant le balisage de menu approprié.
Les listes déroulantes de boutons nécessitent que le plug -in de liste déroulante soit inclus dans votre version de Bootstrap.
Transformez un bouton en une bascule déroulante avec quelques changements de balisage de base.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
De même, créez des listes déroulantes de boutons fractionnés avec les mêmes modifications de balisage, uniquement avec un bouton séparé.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Les listes déroulantes de boutons fonctionnent avec des boutons de toutes tailles.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Déclenchez des menus déroulants au-dessus des éléments en ajoutant .dropup
au parent.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Étendez les contrôles de formulaire en ajoutant du texte ou des boutons avant, après ou des deux côtés de tout fichier <input>
. Utilisez .input-group
-le avec un .input-group-addon
ou .input-group-btn
pour préfixer ou ajouter des éléments à un seul .form-control
.
<input>
uniquementÉvitez d'utiliser <select>
des éléments ici car ils ne peuvent pas être entièrement stylés dans les navigateurs WebKit.
Évitez d'utiliser <textarea>
des éléments ici car leur rows
attribut ne sera pas respecté dans certains cas.
Lorsque vous utilisez des info-bulles ou des popovers sur des éléments dans un .input-group
, vous devrez spécifier l'option container: 'body'
pour éviter les effets secondaires indésirables (tels que l'élément s'élargissant et/ou perdant ses coins arrondis lorsque l'info-bulle ou le popover est déclenché).
Ne mélangez pas des groupes de formulaires ou des classes de colonnes de grille directement avec des groupes d'entrée. Au lieu de cela, imbriquez le groupe d'entrée à l'intérieur du groupe de formulaires ou de l'élément lié à la grille.
Les lecteurs d'écran auront des problèmes avec vos formulaires si vous n'incluez pas une étiquette pour chaque entrée. Pour ces groupes d'entrées, assurez-vous que toute étiquette ou fonctionnalité supplémentaire est transmise aux technologies d'assistance.
La technique exacte à utiliser ( <label>
éléments visibles, <label>
éléments masqués à l'aide de la .sr-only
classe ou utilisation de l' attribut , , ou aria-label
) aria-labelledby
et aria-describedby
les informations supplémentaires qui devront être transmises varieront en fonction du type exact de widget d'interface que vous implémentez. Les exemples de cette section fournissent quelques suggestions d'approches spécifiques à chaque cas.title
placeholder
Placez un module complémentaire ou un bouton de chaque côté d'une entrée. Vous pouvez également en placer un des deux côtés d'une entrée.
Nous ne prenons pas en charge plusieurs modules complémentaires ( .input-group-addon
ou .input-group-btn
) d'un même côté.
Nous ne prenons pas en charge plusieurs contrôles de formulaire dans un seul groupe d'entrée.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Ajoutez les classes de dimensionnement de formulaire relatif à lui- .input-group
même et le contenu à l'intérieur sera automatiquement redimensionné - pas besoin de répéter les classes de taille de contrôle de formulaire sur chaque élément.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Placez n'importe quelle case à cocher ou option radio dans l'addon d'un groupe d'entrée au lieu de texte.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Les boutons des groupes d'entrée sont un peu différents et nécessitent un niveau d'imbrication supplémentaire. Au lieu de .input-group-addon
, vous devrez utiliser .input-group-btn
pour envelopper les boutons. Ceci est nécessaire en raison des styles de navigateur par défaut qui ne peuvent pas être remplacés.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Bien que vous ne puissiez avoir qu'un seul module complémentaire par côté, vous pouvez avoir plusieurs boutons dans un seul fichier .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Les Navs disponibles dans Bootstrap ont un balisage partagé, en commençant par la .nav
classe de base, ainsi que des états partagés. Échangez les classes de modificateurs pour basculer entre chaque style.
Notez que la .nav-tabs
classe nécessite la .nav
classe de base.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Prenez ce même code HTML, mais utilisez à la .nav-pills
place :
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Les pilules sont également empilables verticalement. Ajoutez simplement .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Créez facilement des onglets ou des pilules de la même largeur que leur parent sur des écrans plus larges que 768px avec .nav-justified
. Sur les écrans plus petits, les liens de navigation sont empilés.
Les liens de navigation justifiés de la barre de navigation ne sont actuellement pas pris en charge.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Pour tout composant de navigation (onglets ou pilules), ajoutez .disabled
des liens gris et aucun effet de survol .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Ajoutez des menus déroulants avec un peu de HTML supplémentaire et le plugin JavaScript pour les listes déroulantes .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Les barres de navigation sont des métacomposants réactifs qui servent d'en-têtes de navigation pour votre application ou votre site. Ils commencent à être réduits (et peuvent être basculés) dans les vues mobiles et deviennent horizontaux à mesure que la largeur de la fenêtre disponible augmente.
Les liens de navigation justifiés de la barre de navigation ne sont actuellement pas pris en charge.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Remplacez la marque de la barre de navigation par votre propre image en remplaçant le texte par un <img>
. Étant donné que le .navbar-brand
a son propre rembourrage et sa propre hauteur, vous devrez peut-être remplacer certains CSS en fonction de votre image.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Placez le contenu du formulaire à l'intérieur .navbar-form
pour un alignement vertical correct et un comportement réduit dans les fenêtres étroites. Utilisez les options d'alignement pour décider où il réside dans le contenu de la barre de navigation.
En guise d'avertissement, .navbar-form
partage une grande partie de son code avec .form-inline
via mixin. Certains contrôles de formulaire, comme les groupes de saisie, peuvent nécessiter des largeurs fixes pour s'afficher correctement dans une barre de navigation.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Ajoutez la .navbar-btn
classe aux <button>
éléments ne résidant pas dans a <form>
pour les centrer verticalement dans la barre de navigation.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Enveloppez des chaînes de texte dans un élément avec .navbar-text
, généralement sur une <p>
balise pour un interlignage et une couleur appropriés.
<p class="navbar-text">Signed in as Mark Otto</p>
Pour les personnes utilisant des liens standard qui ne figurent pas dans le composant de navigation de la barre de navigation standard, utilisez la .navbar-link
classe pour ajouter les couleurs appropriées pour les options de barre de navigation par défaut et inverse.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Alignez les liens de navigation, les formulaires, les boutons ou le texte à l'aide des classes utilitaires .navbar-left
ou . .navbar-right
Les deux classes ajouteront un flottant CSS dans la direction spécifiée. Par exemple, pour aligner les liens de navigation, placez-les dans un fichier séparé <ul>
avec la classe d'utilitaires respective appliquée.
Ces classes sont des versions mixtes de .pull-left
et .pull-right
, mais elles sont limitées aux requêtes multimédias pour faciliter la gestion des composants de la barre de navigation sur toutes les tailles d'appareils.
Ajoutez .navbar-fixed-top
et incluez un .container
ou .container-fluid
pour centrer et remplir le contenu de la barre de navigation.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Ajoutez .navbar-fixed-bottom
et incluez un .container
ou .container-fluid
pour centrer et remplir le contenu de la barre de navigation.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Créez une barre de navigation pleine largeur qui défile avec la page en ajoutant .navbar-static-top
et en incluant un .container
ou .container-fluid
pour centrer et remplir le contenu de la barre de navigation.
Contrairement aux .navbar-fixed-*
classes, vous n'avez pas besoin de modifier le rembourrage sur le body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Modifiez l'apparence de la barre de navigation en ajoutant .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Indiquez l'emplacement de la page actuelle dans une hiérarchie de navigation.
Les séparateurs sont automatiquement ajoutés en CSS via :before
et content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Fournissez des liens de pagination pour votre site ou votre application avec le composant de pagination multipage ou l' alternative plus simple au téléavertisseur .
Pagination simple inspirée de Rdio, idéale pour les applications et les résultats de recherche. Le grand bloc est difficile à manquer, facilement évolutif et offre de grandes zones de clic.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Le composant de pagination doit être enveloppé dans un <nav>
élément pour l'identifier comme une section de navigation pour les lecteurs d'écran et autres technologies d'assistance. De plus, étant donné qu'une page est susceptible d'avoir déjà plus d'une section de navigation de ce type (telle que la navigation principale dans l'en-tête ou une navigation dans la barre latérale), il est conseillé de fournir une description aria-label
pour le <nav>
qui reflète son objectif. Par exemple, si le composant de pagination est utilisé pour naviguer entre un ensemble de résultats de recherche, une étiquette appropriée pourrait être aria-label="Search results pages"
.
Les liens sont personnalisables pour différentes circonstances. À utiliser .disabled
pour les liens non cliquables et .active
pour indiquer la page en cours.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Nous vous recommandons de remplacer les ancres actives ou désactivées par <span>
, ou d'omettre l'ancre dans le cas des flèches précédente/suivante, pour supprimer la fonctionnalité de clic tout en conservant les styles souhaités.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Envie d'une pagination plus grande ou plus petite ? Ajoutez .pagination-lg
ou .pagination-sm
pour des tailles supplémentaires.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Liens précédents et suivants rapides pour des implémentations de pagination simples avec un balisage et des styles légers. C'est idéal pour les sites simples comme les blogs ou les magazines.
Par défaut, le pager centre les liens.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternativement, vous pouvez aligner chaque lien sur les côtés :
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Les liens de pager utilisent également la .disabled
classe d'utilité générale de la pagination.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Ajoutez l'une des classes de modificateurs mentionnées ci-dessous pour modifier l'apparence d'une étiquette.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Des problèmes de rendu peuvent survenir lorsque vous avez des dizaines d'étiquettes en ligne dans un conteneur étroit, chacune contenant son propre inline-block
élément (comme une icône). Le moyen de contourner cela est de définir display: inline-block;
. Pour le contexte et un exemple, voir #13219 .
Mettez facilement en évidence les éléments nouveaux ou non lus en ajoutant <span class="badge">
des liens vers, des navigations Bootstrap, etc.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Lorsqu'il n'y a pas d'éléments nouveaux ou non lus, les badges s'effondreront simplement (via le :empty
sélecteur CSS) à condition qu'aucun contenu n'existe à l'intérieur.
Les badges ne s'effondreront pas automatiquement dans Internet Explorer 8 car il ne prend pas en charge le :empty
sélecteur.
Des styles intégrés sont inclus pour placer des badges dans des états actifs dans les navigations de pilules.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Un composant léger et flexible qui peut éventuellement étendre l'intégralité de la fenêtre d'affichage pour présenter le contenu clé de votre site.
Il s'agit d'une simple unité de héros, un simple composant de style jumbotron pour attirer une attention particulière sur le contenu ou les informations présentés.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Pour rendre le jumbotron pleine largeur et sans coins arrondis, placez-le à l'extérieur de tous les .container
s et ajoutez à la place un à l' .container
intérieur.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Un shell simple pour h1
espacer et segmenter de manière appropriée les sections de contenu sur une page. Il peut utiliser l' élément h1
par défaut small
de , ainsi que la plupart des autres composants (avec des styles supplémentaires).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Étendez le système de grille de Bootstrap avec le composant miniature pour afficher facilement des grilles d'images, de vidéos, de texte, etc.
Si vous recherchez une présentation de vignettes de différentes hauteurs et/ou largeurs de type Pinterest, vous devrez utiliser un plugin tiers tel que Masonry , Isotope ou Salvattore .
Par défaut, les vignettes de Bootstrap sont conçues pour présenter des images liées avec un minimum de balisage requis.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Avec un peu de balisage supplémentaire, il est possible d'ajouter n'importe quel type de contenu HTML comme des titres, des paragraphes ou des boutons dans les vignettes.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Fournissez des messages de retour contextuels pour les actions utilisateur typiques avec la poignée de messages d'alerte disponibles et flexibles.
Enveloppez n'importe quel texte et un bouton de rejet facultatif dans .alert
l'une des quatre classes contextuelles (par exemple, .alert-success
) pour les messages d'alerte de base.
Les alertes n'ont pas de classes par défaut, uniquement des classes de base et de modification. Une alerte grise par défaut n'a pas trop de sens, vous devez donc spécifier un type via une classe contextuelle. Choisissez entre succès, info, avertissement ou danger.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Tirez parti de n'importe quelle alerte en ajoutant un .alert-dismissible
bouton facultatif et de fermeture.
Pour des alertes entièrement fonctionnelles et pouvant être ignorées, vous devez utiliser le plug-in JavaScript d'alertes .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Assurez-vous d'utiliser l' <button>
élément avec l' data-dismiss="alert"
attribut data.
Utilisez la .alert-link
classe utilitaire pour fournir rapidement des liens colorés correspondants dans n'importe quelle alerte.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Fournissez des informations actualisées sur la progression d'un flux de travail ou d'une action avec des barres de progression simples mais flexibles.
Les barres de progression utilisent des transitions et des animations CSS3 pour obtenir certains de leurs effets. Ces fonctionnalités ne sont pas prises en charge dans Internet Explorer 9 et versions antérieures ou antérieures de Firefox. Opera 12 ne prend pas en charge les animations.
Si votre site Web a une politique de sécurité du contenu (CSP) qui n'autorise pas style-src 'unsafe-inline'
, vous ne pourrez pas utiliser d' style
attributs intégrés pour définir la largeur de la barre de progression, comme indiqué dans nos exemples ci-dessous. Les méthodes alternatives pour définir les largeurs compatibles avec les CSP stricts incluent l'utilisation d'un peu de JavaScript personnalisé (qui définit element.style.width
) ou l'utilisation de classes CSS personnalisées.
Barre de progression par défaut.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Supprimez la classe <span>
with .sr-only
de la barre de progression pour afficher un pourcentage visible.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Pour vous assurer que le texte de l'étiquette reste lisible même pour de faibles pourcentages, envisagez d'ajouter un min-width
à la barre de progression.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Les barres de progression utilisent certaines des mêmes classes de boutons et d'alertes pour des styles cohérents.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Utilise un dégradé pour créer un effet rayé. Non disponible dans IE9 et ci-dessous.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Ajoutez .active
à .progress-bar-striped
pour animer les rayures de droite à gauche. Non disponible dans IE9 et ci-dessous.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Placez plusieurs barres dans la même .progress
pour les empiler.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Styles d'objets abstraits pour créer divers types de composants (comme des commentaires de blog, des tweets, etc.) qui présentent une image alignée à gauche ou à droite à côté du contenu textuel.
Le média par défaut affiche un objet média (images, vidéo, audio) à gauche ou à droite d'un bloc de contenu.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Les classes .pull-left
et .pull-right
existent également et étaient auparavant utilisées dans le cadre du composant multimédia, mais sont obsolètes pour cette utilisation à partir de la v3.3.0. Ils sont approximativement équivalents à .media-left
et .media-right
, sauf qu'ils .media-right
doivent être placés après le .media-body
dans le code HTML.
Les images ou autres médias peuvent être alignés en haut, au milieu ou en bas. La valeur par défaut est alignée en haut.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis. Fusce condimentum nunc ac nisi fringille vulputée. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Avec un peu de balisage supplémentaire, vous pouvez utiliser les médias à l'intérieur de la liste (utile pour les fils de commentaires ou les listes d'articles).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Les groupes de listes sont un composant flexible et puissant pour afficher non seulement des listes simples d'éléments, mais aussi des listes complexes avec un contenu personnalisé.
Le groupe de liste le plus basique est simplement une liste non ordonnée avec des éléments de liste et les classes appropriées. Développez-vous dessus avec les options qui suivent, ou votre propre CSS si nécessaire.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Ajoutez le composant badges à n'importe quel élément de groupe de liste et il sera automatiquement positionné à droite.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Liez les éléments de groupe de liste en utilisant des balises d'ancrage au lieu d'éléments de liste (cela signifie également un parent <div>
au lieu d'un <ul>
). Pas besoin de parents individuels autour de chaque élément.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Les éléments de groupe de liste peuvent être des boutons au lieu d'éléments de liste (cela signifie également un parent <div>
au lieu d'un <ul>
). Pas besoin de parents individuels autour de chaque élément. N'utilisez pas les .btn
classes standard ici.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Ajoutez .disabled
à a .list-group-item
pour le griser afin qu'il apparaisse désactivé.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Utilisez des classes contextuelles pour styliser les éléments de liste, par défaut ou liés. Comprend également l' .active
état.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Ajoutez presque n'importe quel code HTML à l'intérieur, même pour les groupes de listes liées comme celui ci-dessous.
Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.
Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.
Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Bien que ce ne soit pas toujours nécessaire, vous devez parfois mettre votre DOM dans une boîte. Pour ces situations, essayez le composant de panneau.
Par défaut, tout ce .panel
qu'il faut faire est d'appliquer une bordure et un rembourrage de base pour contenir du contenu.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Ajoutez facilement un conteneur d'en-tête à votre panneau avec .panel-heading
. Vous pouvez également inclure any <h1>
- <h6>
avec une .panel-title
classe pour ajouter un titre pré-stylé. Cependant, les tailles de police de <h1>
- <h6>
sont remplacées par .panel-heading
.
Pour une coloration correcte des liens, veillez à placer les liens dans les en-têtes au sein de .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Enveloppez les boutons ou le texte secondaire dans .panel-footer
. Notez que les pieds de page des panneaux n'héritent pas des couleurs et des bordures lors de l'utilisation de variations contextuelles, car ils ne sont pas censés être au premier plan.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Comme d'autres composants, rendez facilement un panneau plus significatif pour un contexte particulier en ajoutant l'une des classes d'état contextuelles.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Ajoutez n'importe quel élément sans bordure .table
dans un panneau pour une conception homogène. S'il y a un .panel-body
, nous ajoutons une bordure supplémentaire en haut du tableau pour la séparation.
Certains contenus de panneau par défaut ici. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Énée eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Prénom | Nom de famille | Nom d'utilisateur |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
S'il n'y a pas de corps de panneau, le composant passe de l'en-tête de panneau au tableau sans interruption.
# | Prénom | Nom de famille | Nom d'utilisateur |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Incluez facilement des groupes de listes pleine largeur dans n'importe quel panneau.
Certains contenus de panneau par défaut ici. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Énée eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Autorisez les navigateurs à déterminer les dimensions de la vidéo ou du diaporama en fonction de la largeur de leur bloc contenant en créant un rapport intrinsèque qui s'adaptera correctement à n'importe quel appareil.
Les règles sont directement appliquées aux éléments <iframe>
, <embed>
, <video>
et <object>
; utilisez éventuellement une classe descendante explicite .embed-responsive-item
lorsque vous souhaitez faire correspondre le style pour d'autres attributs.
Conseil de pro ! Vous n'avez pas besoin d'inclure frameborder="0"
dans votre <iframe>
s car nous remplaçons cela pour vous.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Utilisez le puits comme simple effet sur un élément pour lui donner un effet d'encart.
<div class="well">...</div>
Contrôlez le rembourrage et les coins arrondis avec deux classes de modificateurs facultatives.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>