Glyphicons

Glyphes disponibles

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.

  • glyphicon glyphicon-astérisque
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-moins
  • glyphicon glyphicon-nuage
  • glyphicon glyphicon-enveloppe
  • glyphicon glyphicon-crayon
  • glyphicon glyphicon-verre
  • glyphicon glyphicon-musique
  • glyphicon glyphicon-recherche
  • glyphicon glyphicon-cœur
  • glyphicon glyphicon-étoile
  • glyphicon glyphicon-étoile-vide
  • glyphicon glyphicon-utilisateur
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-ème-liste
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-supprimer
  • glyphicon glyphicon-zoom avant
  • glyphicon glyphicon-zoom arrière
  • glyphicon glyphicon désactivé
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-poubelle
  • glyphicon glyphicon-accueil
  • glyphicon fichier-glyphicon
  • glyphicon glyphicon-temps
  • glyphicon glyphicon-route
  • glyphicon glyphicon-télécharger-alt
  • glyphicon téléchargement de glyphicon
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-jouer-cercle
  • glyphicon glyphicon-répétition
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-liste-alt
  • glyphicon glyphicon-lock
  • glyphicon drapeau-glyphicon
  • glyphicon glyphicon-casque
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-diminué
  • glyphicon glyphicon-augmentation du volume
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-code-barres
  • glyphicon glyphicon-balise
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-livre
  • glyphicon glyphicon-signet
  • glyphicon glyphicon-imprimer
  • glyphicon glyphicon-caméra
  • glyphicon police-glyphicon
  • glyphicon glyphicon-gras
  • glyphicon glyphicon-italique
  • glyphicon glyphicon-texte-hauteur
  • glyphicon glyphicon-texte-largeur
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-aligner-justifier
  • glyphicon glyphicon-liste
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-vidéo
  • glyphicon glyphicon-image
  • glyphicon glyphicon-carte-marqueur
  • glyphicon glyphicon-ajuster
  • glyphicon glyphicon-teinte
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-déplacer
  • glyphicon glyphicon-pas-en-arrière
  • glyphicon glyphicon-retour rapide
  • glyphicon glyphicon-arrière
  • glyphicon glyphicon-jouer
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-avance rapide
  • glyphicon glyphicon-pas en avant
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-gauche
  • glyphicon glyphicon-chevron-droite
  • glyphicon glyphicon-signe-plus
  • glyphicon glyphicon-signe-moins
  • glyphicon glyphicon-supprimer-signe
  • glyphicon glyphicon-ok-signe
  • glyphicon glyphicon-question-signe
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-capture d'écran
  • glyphicon glyphicon-supprimer-cercle
  • glyphicon glyphicon-ok-cercle
  • glyphicon glyphicon-interdiction-cercle
  • glyphicon glyphicon-flèche-gauche
  • glyphicon glyphicon-flèche-droite
  • glyphicon glyphicon-flèche vers le haut
  • glyphicon glyphicon-flèche-vers le bas
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-redimensionner-petit
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-cadeau
  • glyphicon glyphicon-feuille
  • glyphicon glyphicon-feu
  • glyphicon glyphicon-oeil-ouvert
  • glyphicon glyphicon-oeil-fermer
  • glyphicon glyphicon-avertissement-sign
  • glyphicon glyphicon-avion
  • glyphicon glyphicon-calendrier
  • glyphicon glyphicon-aléatoire
  • glyphicon glyphicon-commentaire
  • glyphicon glyphicon-aimant
  • glyphicon glyphicon-chevron vers le haut
  • glyphicon glyphicon-chevron-vers le bas
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-panier
  • glyphicon glyphicon-dossier-fermer
  • glyphicon glyphicon-dossier-ouvert
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-mégaphone
  • glyphicon glyphicon-cloche
  • glyphicon glyphicon-certificat
  • glyphicon glyphicon-pouce levé
  • glyphicon glyphicon-pouce vers le bas
  • glyphicon glyphicon-main-droite
  • glyphicon glyphicon-main-gauche
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-cercle-flèche-droite
  • glyphicon glyphicon-cercle-flèche-gauche
  • glyphicon glyphicon-cercle-flèche vers le haut
  • glyphicon glyphicon-cercle-flèche-bas
  • glyphicon glyphicon-globe
  • clé à molette glyphicon
  • glyphicon glyphicon-tâches
  • glyphicon glyphicon-filtre
  • glyphicon glyphicon-porte-documents
  • glyphicon glyphicon-plein écran
  • glyphicon glyphicon-tableau de bord
  • glyphicon glyphicon-trombone
  • glyphicon glyphicon-cœur-vide
  • glyphicon glyphicon-lien
  • glyphicon glyphicon-téléphone
  • glyphicon glyphicon-punaise
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • tri d'icônes de glyphes
  • glyphicon glyphicon-trier-par-alphabet
  • glyphicon glyphicon-trier-par-alphabet-alt
  • glyphicon glyphicon-trier-par-ordre
  • glyphicon glyphicon-trier-par-ordre-alt
  • glyphicon glyphicon-tri-par-attributs
  • glyphicon glyphicon-tri-par-attributs-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-développer
  • glyphicon glyphicon-réduire-vers le bas
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-connexion
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-déconnexion
  • glyphicon glyphicon-nouvelle-fenêtre
  • glyphicon glyphicon-enregistrement
  • glyphicon glyphicon-save
  • glyphicon glyphicon-ouvert
  • glyphicon enregistré par glyphicon
  • glyphicon glyphicon-importation
  • glyphicon glyphicon-export
  • glyphicon glyphicon-envoyer
  • glyphicon glyphicon-disquette-disquette
  • glyphicon glyphicon-disquette-enregistré
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-carte-de-crédit
  • glyphicon glyphicon-transfert
  • glyphicon glyphicon-couverts
  • glyphicon glyphicon-en-tête
  • glyphicon glyphicon compressé
  • glyphicon glyphicon-écouteur
  • glyphicon glyphicon-téléphone-alt
  • glyphicon glyphicon-tour
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-vidéo
  • glyphicon glyphicon-hd-vidéo
  • glyphicon glyphicon-sous-titres
  • glyphicon glyphicon-son-stéréo
  • glyphicon glyphicon-son-dolby
  • glyphicon glyphicon-son-5-1
  • glyphicon glyphicon-son-6-1
  • glyphicon glyphicon-son-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-téléchargement
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-arbre-conifère
  • glyphicon glyphicon-arbre-caduque
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-enregistrer-fichier
  • glyphicon glyphicon-open-file
  • glyphicon niveau supérieur de glyphicon
  • glyphicon glyphicon-copie
  • glyphicon glyphicon-coller
  • glyphicon alerte-glyphicon
  • glyphicon égaliseur de glyphicon
  • glyphicon glyphicon-roi
  • glyphicon glyphicon-reine
  • glyphicon glyphicon-pion
  • glyphicon glyphicon-évêque
  • glyphicon glyphicon-chevalier
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tente
  • glyphicon glyphicon-tableau noir
  • glyphicon glyphicon-lit
  • glyphicon glyphicon-pomme
  • glyphicon glyphicon-effacer
  • glyphicon glyphicon-sablier
  • glyphicon glyphicon-lampe
  • glyphicon glyphicon-double
  • glyphicon glyphicon-tirelire
  • glyphicon glyphicon-ciseaux
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-rouble
  • glyphicon glyphicon-frotter
  • glyphicon glyphicon-échelle
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-goûté
  • glyphicon glyphicon-éducation
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-fenêtre modale
  • glyphicon glyphicon-huile
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-lunettes de soleil
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-texte-couleur
  • glyphicon glyphicon-texte-arrière-plan
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-droite
  • glyphicon glyphicon-triangle-gauche
  • glyphicon glyphicon-triangle-bas
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-indice
  • glyphicon glyphicon-menu-gauche
  • glyphicon glyphicon-menu-droite
  • glyphicon glyphicon-menu-vers le bas
  • glyphicon glyphicon-menu-vers le haut

Comment utiliser

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é.

Ne pas mélanger avec d'autres composants

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>.

À utiliser uniquement sur des éléments vides

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.

Modification de l'emplacement de la police de l'icône

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 :

  • Modifiez les variables @icon-font-pathet/ou dans les fichiers source Less.@icon-font-name
  • Utilisez l' option d'URL relatives fournie par le compilateur Less.
  • Modifiez les url()chemins dans le CSS compilé.

Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.

Icônes accessibles

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-onlyclasse.

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-labelattribut sur le contrôle lui-même.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Exemples

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-onlytexte 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>

Listes déroulantes

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 .dropupau 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-menupour aligner à droite le menu déroulant.

Peut nécessiter un positionnement supplémentaire

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 overflowproprié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-rightAlignement obsolète

Depuis la v3.1.0, nous avons abandonné .pull-rightles 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>

Groupes de boutons

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 .

Les info-bulles et les popovers dans les groupes de boutons nécessitent un réglage spécial

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é).

Assurez-vous d'être correct roleet fournissez une étiquette

Pour que les technologies d'assistance, telles que les lecteurs d'écran, indiquent qu'une série de boutons est regroupée, un roleattribut 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' roleattribut correct. Dans les exemples fournis ici, nous utilisons aria-label, mais des alternatives telles que aria-labelledbypeuvent également être utilisées.

Exemple de base

Enveloppez une série de boutons avec .btnin .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>

Barre d'outils des boutons

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>

Dimensionnement

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>

Nidification

Placez un .btn-groupdans un autre .btn-grouplorsque 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>

Variation verticale

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>

Groupes de boutons justifiés

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.

Gérer les frontières

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: -1pxest utilisé pour empiler les bordures au lieu de les supprimer. Cependant, marginne fonctionne pas avec display: table-cell. Par conséquent, selon vos personnalisations de Bootstrap, vous souhaiterez peut-être supprimer ou recolorer les bordures.

IE8 et 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.

Avec <a>des éléments

Enveloppez simplement une série de .btns dans.btn-group.btn-group-justified .

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Liens faisant office de boutons

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".

Avec<button>des éléments

Pour 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>

Listes déroulantes des boutons

Utilisez n'importe quel bouton pour déclencher un menu déroulant en le plaçant dans un .btn-groupet en fournissant le balisage de menu approprié.

Dépendance aux plugins

Les listes déroulantes de boutons nécessitent que le plug -in de liste déroulante soit inclus dans votre version de Bootstrap.

Listes déroulantes à un seul bouton

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>

Listes déroulantes des boutons de fractionnement

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>

Dimensionnement

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>

Variation de chute

Déclenchez des menus déroulants au-dessus des éléments en ajoutant .dropupau 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>

Groupes d'entrée

É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-addonou .input-group-btnpour préfixer ou ajouter des éléments à un seul .form-control.

Textes <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 rowsattribut ne sera pas respecté dans certains cas.

Les info-bulles et les popovers dans les groupes d'entrée nécessitent un réglage spécial

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 pas mélanger avec d'autres composants

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.

Toujours ajouter des libellés

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-onlyclasse ou utilisation de l' attribut , , ou aria-label) aria-labelledbyet aria-describedbyles 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.titleplaceholder

Exemple de base

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-addonou .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.

@

@exemple.com

$ .00

https://example.com/users/
<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>

Dimensionnement

Ajoutez les classes de dimensionnement de formulaire relatif à lui- .input-groupmê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>

Cases à cocher et modules radio

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 -->

Ajouts de boutons

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-btnpour 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 -->

Boutons avec listes déroulantes

<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 -->

Boutons segmentés

<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>

Plusieurs boutons

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>

Navs

Les Navs disponibles dans Bootstrap ont un balisage partagé, en commençant par la .navclasse de base, ainsi que des états partagés. Échangez les classes de modificateurs pour basculer entre chaque style.

L'utilisation des navs pour les panneaux d'onglets nécessite le plug-in d'onglets JavaScript

Pour les onglets avec des zones tabulables, vous devez utiliser le plugin JavaScript tabs . Le balisage nécessitera également des roleattributs supplémentaires et ARIA - voir l' exemple de balisage du plugin pour plus de détails.

Rendre les navs utilisés comme navigation accessibles

Si vous utilisez navs pour fournir une barre de navigation, assurez-vous d'ajouter un role="navigation"au conteneur parent le plus logique du <ul>, ou enveloppez un <nav>élément autour de l'ensemble de la navigation. N'ajoutez pas le rôle au lui- <ul>même, car cela l'empêcherait d'être annoncé comme une liste réelle par les technologies d'assistance.

Notez que la .nav-tabsclasse nécessite la .navclasse 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-pillsplace :

<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.

Navs justifiés Safari et responsive

Depuis la v9.1.2, Safari présente un bogue dans lequel le redimensionnement horizontal de votre navigateur provoque des erreurs de rendu dans la navigation justifiée qui sont effacées lors de l'actualisation. Ce bogue est également affiché dans l' exemple de navigation justifié .

<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 .disableddes liens gris et aucun effet de survol .

La fonctionnalité de lien n'est pas affectée

Cette classe ne changera que l' <a>apparence de , pas sa fonctionnalité. Utilisez JavaScript personnalisé pour désactiver les liens ici.

<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 .

Onglets avec 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>

Pilules avec listes déroulantes

<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>

Barre de navigation

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.

Contenu débordant

Étant donné que Bootstrap ne sait pas de combien d'espace le contenu de votre barre de navigation a besoin, vous pourriez rencontrer des problèmes avec l'habillage du contenu dans une deuxième ligne. Pour résoudre ce problème, vous pouvez :

  1. Réduisez la quantité ou la largeur des éléments de la barre de navigation.
  2. Masquez certains éléments de la barre de navigation à certaines tailles d'écran à l'aide de classes utilitaires réactives .
  3. Modifiez le point auquel votre barre de navigation bascule entre le mode réduit et le mode horizontal. Personnalisez la @grid-float-breakpointvariable ou ajoutez votre propre requête multimédia.

Nécessite le plug-in JavaScript

Si JavaScript est désactivé et que la fenêtre d'affichage est suffisamment étroite pour que la barre de navigation se replie, il sera impossible de développer la barre de navigation et d'afficher le contenu dans le.navbar-collapse .

La barre de navigation réactive nécessite que le plugin d'effondrement soit inclus dans votre version de Bootstrap.

Modification du point d'arrêt de la barre de navigation mobile réduite

La barre de navigation se replie dans sa vue mobile verticale lorsque la fenêtre est plus étroite que @grid-float-breakpoint, et se développe dans sa vue horizontale non mobile lorsque la fenêtre est au moins @grid-float-breakpointen largeur. Ajustez cette variable dans la source Moins pour contrôler le moment où la barre de navigation se réduit/se développe. La valeur par défaut est 768px(le plus petit écran "petit" ou "tablette").

Rendre les barres de navigation accessibles

Assurez-vous d'utiliser un <nav>élément ou, si vous utilisez un élément plus générique tel qu'un <div>, ajoutez un role="navigation"à chaque barre de navigation pour l'identifier explicitement comme une région de référence pour les utilisateurs de technologies d'assistance.

<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-branda 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-formpour 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-formpartage une grande partie de son code avec .form-inlinevia 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>

Avertissements concernant les appareils mobiles

Il existe certaines mises en garde concernant l'utilisation des contrôles de formulaire dans les éléments fixes sur les appareils mobiles. Consultez nos documents de support de navigateur pour plus de détails.

Toujours ajouter des libellés

Les lecteurs d'écran auront des problèmes avec vos formulaires si vous n'incluez pas une étiquette pour chaque entrée. Pour ces formulaires en ligne, vous pouvez masquer les étiquettes à l'aide de la .sr-onlyclasse. Il existe d'autres méthodes alternatives pour fournir une étiquette pour les technologies d'assistance, telles que l' attribut aria-label, aria-labelledbyou . titleSi aucun de ces éléments n'est présent, les lecteurs d'écran peuvent recourir à l'utilisation de l' placeholderattribut, s'il est présent, mais notez que l'utilisation de placeholderen remplacement d'autres méthodes d'étiquetage n'est pas conseillée.

Ajoutez la .navbar-btnclasse 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>

Utilisation spécifique au contexte

Comme les classes de boutons standard , .navbar-btnpeut être utilisé sur les éléments <a>et <input>. Cependant, .navbar-btnni les classes de boutons standard ne doivent être utilisées sur les <a>éléments de .navbar-nav.

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-linkclasse 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-leftou . .navbar-rightLes 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-leftet .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.

Alignement à droite de plusieurs composants

Les barres de navigation ont actuellement une limitation avec plusieurs .navbar-rightclasses. Pour espacer correctement le contenu, nous utilisons une marge négative sur le dernier .navbar-rightélément. Lorsque plusieurs éléments utilisent cette classe, ces marges ne fonctionnent pas comme prévu.

Nous y reviendrons lorsque nous pourrons réécrire ce composant dans la v4.

Ajoutez .navbar-fixed-topet incluez un .containerou .container-fluidpour centrer et remplir le contenu de la barre de navigation.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Rembourrage corporel requis

La barre de navigation fixe recouvrira votre autre contenu, sauf si vous paddingl'ajoutez en haut du fichier <body>. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Astuce : Par défaut, la barre de navigation mesure 50 px de haut.

body { padding-top: 70px; }

Assurez-vous de l'inclure après le noyau Bootstrap CSS.

Ajoutez .navbar-fixed-bottomet incluez un .containerou .container-fluidpour centrer et remplir le contenu de la barre de navigation.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Rembourrage corporel requis

La barre de navigation fixe recouvrira votre autre contenu, à moins que vous n'ajoutiez paddingau bas du fichier <body>. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Astuce : Par défaut, la barre de navigation mesure 50 px de haut.

body { padding-bottom: 70px; }

Assurez-vous de l'inclure après le noyau Bootstrap CSS.

Créez une barre de navigation pleine largeur qui défile avec la page en ajoutant .navbar-static-topet en incluant un .containerou .container-fluidpour 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>

Chapelure

Indiquez l'emplacement de la page actuelle dans une hiérarchie de navigation.

Les séparateurs sont automatiquement ajoutés en CSS via :beforeet content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

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 par défaut

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">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Étiquetage du composant de pagination

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-labelpour 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".

États désactivé et actif

Les liens sont personnalisables pour différentes circonstances. À utiliser .disabledpour les liens non cliquables et .activepour indiquer la page en cours.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimensionnement

Envie d'une pagination plus grande ou plus petite ? Ajoutez .pagination-lgou .pagination-smpour 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>

Téléavertisseur

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.

Exemple par défaut

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

État désactivé facultatif

Les liens de pager utilisent également la .disabledclasse d'utilité générale de la pagination.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Étiquettes

Exemple

Exemple de titre Nouveau

Exemple de titre Nouveau

Exemple de titre Nouveau

Exemple de titre Nouveau

Exemple de titre Nouveau
Exemple de titre Nouveau
<h3>Example heading <span class="label label-default">New</span></h3>

Variantes disponibles

Ajoutez l'une des classes de modificateurs mentionnées ci-dessous pour modifier l'apparence d'une étiquette.

Par défaut Primaire Réussite Info Avertissement Danger
<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>

Vous avez des tonnes d'étiquettes ?

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 .

Insignes

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>

Auto-rétractable

Lorsqu'il n'y a pas d'éléments nouveaux ou non lus, les badges s'effondreront simplement (via le :emptysélecteur CSS) à condition qu'aucun contenu n'existe à l'intérieur.

Compatibilité entre navigateurs

Les badges ne s'effondreront pas automatiquement dans Internet Explorer 8 car il ne prend pas en charge le :emptysélecteur.

S'adapte aux états de navigation actifs

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>

Jumbotron

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.

Bonjour le monde!

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.

Apprendre encore plus

<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 .containers et ajoutez à la place un à l' .containerintérieur.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

En-tête de page

Un shell simple pour h1espacer et segmenter de manière appropriée les sections de contenu sur une page. Il peut utiliser l' élément h1par défaut smallde , 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>

Vignettes

É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 .

Exemple par défaut

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>

Contenu personnalisé

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.

100%x200

Libellé de vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

100%x200

Libellé de vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

100%x200

Libellé de vignette

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida et eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bouton Bouton

<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>

Alertes

Fournissez des messages de retour contextuels pour les actions utilisateur typiques avec la poignée de messages d'alerte disponibles et flexibles.

Exemples

Enveloppez n'importe quel texte et un bouton de rejet facultatif dans .alertl'une des quatre classes contextuelles (par exemple, .alert-success) pour les messages d'alerte de base.

Pas de classe par défaut

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>

Alertes éliminables

Tirez parti de n'importe quelle alerte en ajoutant un .alert-dismissiblebouton facultatif et de fermeture.

Nécessite le plugin d'alerte JavaScript

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">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Garantir un comportement correct sur tous les appareils

Assurez-vous d'utiliser l' <button>élément avec l' data-dismiss="alert"attribut data.

Utilisez la .alert-linkclasse 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>

Barres de progression

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.

Compatibilité entre navigateurs

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.

Compatibilité avec la politique de sécurité du contenu (CSP)

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' styleattributs 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.

Exemple de base

Barre de progression par défaut.

60 % terminé
<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>

Avec étiquette

Supprimez la classe <span>with .sr-onlyde la barre de progression pour afficher un pourcentage visible.

60%
<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.

0%
2%
<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>

Alternatives contextuelles

Les barres de progression utilisent certaines des mêmes classes de boutons et d'alertes pour des styles cohérents.

40 % terminé (succès)
20 % terminé
60 % terminé (avertissement)
80 % terminé (danger)
<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>

Rayé

Utilise un dégradé pour créer un effet rayé. Non disponible dans IE9 et ci-dessous.

40 % terminé (succès)
20 % terminé
60 % terminé (avertissement)
80 % terminé (danger)
<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>

Animé

Ajoutez .activeà .progress-bar-stripedpour animer les rayures de droite à gauche. Non disponible dans IE9 et ci-dessous.

45 % terminé
<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>

empilé

Placez plusieurs barres dans la même .progresspour les empiler.

35 % terminé (succès)
20 % terminé (avertissement)
10 % terminé (danger)
<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>

Objet multimédia

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.

Média par défaut

Le média par défaut affiche un objet média (images, vidéo, audio) à gauche ou à droite d'un bloc de contenu.

Rubrique média

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.

Rubrique média

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.

En-tête multimédia imbriqué

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.

Rubrique média

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.

Rubrique média

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.
<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-leftet .pull-rightexistent é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-leftet .media-right, sauf qu'ils .media-rightdoivent être placés après le .media-bodydans le code HTML.

Alignement des médias

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.

Médias les mieux alignés

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.

Média aligné au milieu

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.

Médias alignés en bas

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>

Liste des médias

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).

  • Rubrique média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.

    En-tête multimédia imbriqué

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.

    En-tête multimédia imbriqué

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibule en vulputé à, tempus viverra turpis.

    En-tête multimédia imbriqué

    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>

Groupe de liste

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é.

Exemple de base

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.

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<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>

Insignes

Ajoutez le composant badges à n'importe quel élément de groupe de liste et il sera automatiquement positionné à droite.

  • 14Cras justo odio
  • 2Dapibus ac facilisis à
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Articles liés

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>

Éléments de bouton

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 .btnclasses 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>

Articles désactivés

Ajoutez .disabledà a .list-group-itempour 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>

Classes contextuelles

Utilisez des classes contextuelles pour styliser les éléments de liste, par défaut ou liés. Comprend également l' .activeétat.

  • Dapibus ac facilisis à
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibule à eros
<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>

Contenu personnalisé

Ajoutez presque n'importe quel code HTML à l'intérieur, même pour les groupes de listes liées comme celui ci-dessous.

<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>

Panneaux

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.

Exemple de base

Par défaut, tout ce .panelqu'il faut faire est d'appliquer une bordure et un rembourrage de base pour contenir du contenu.

Exemple de panneau de base
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panneau avec titre

Ajoutez facilement un conteneur d'en-tête à votre panneau avec .panel-heading. Vous pouvez également inclure any <h1>- <h6>avec une .panel-titleclasse 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.

En-tête de panneau sans titre
Contenu du panneau

Titre du panneau

Contenu du panneau
<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.

Contenu du panneau
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternatives contextuelles

Comme d'autres composants, rendez facilement un panneau plus significatif pour un contexte particulier en ajoutant l'une des classes d'état contextuelles.

Titre du panneau

Contenu du panneau

Titre du panneau

Contenu du panneau

Titre du panneau

Contenu du panneau

Titre du panneau

Contenu du panneau

Titre du panneau

Contenu du panneau
<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>

Avec tableaux

Ajoutez n'importe quel élément sans bordure .tabledans 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.

Titre du 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.

# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter
<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.

Titre du panneau
# Prénom Nom de famille Nom d'utilisateur
1 Marquer Otto @mdo
2 Jacob Thornton @gros
3 Larry l'oiseau @Twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Avec des groupes de listes

Incluez facilement des groupes de listes pleine largeur dans n'importe quel panneau.

Titre du 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.

  • Cras justo odio
  • Dapibus ac facilisis à
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibule à eros
<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>

Intégration réactive

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-itemlorsque 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>

puits

Bien par défaut

Utilisez le puits comme simple effet sur un élément pour lui donner un effet d'encart.

Regarde, je suis dans un puits !
<div class="well">...</div>

Cours optionnels

Contrôlez le rembourrage et les coins arrondis avec deux classes de modificateurs facultatives.

Regarde, je suis dans un grand puits !
<div class="well well-lg">...</div>
Regarde, je suis dans un petit puits !
<div class="well well-sm">...</div>