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.

Entrez une adresse mail valide

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

Exemple

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>

Alignement

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.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

En-têtes

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>

Diviseur

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>

Éléments de menu désactivés

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 .

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 `role`et 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>

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.

La gauche Milieu Droit

La gauche Milieu

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

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>

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

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

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.

Onglets

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>

Pilules

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>

Justifié

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>

Liens désactivés

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>

Utilisation des listes déroulantes

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>

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 :

Réduisez la quantité ou la largeur des éléments de la barre de navigation.
Masquez certains éléments de la barre de navigation à certaines tailles d'écran à l'aide de classes utilitaires réactives .
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.

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

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

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>

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.

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>

Liens alignés

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>

Exemple

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 .

Mettez facilement en évidence les éléments nouveaux ou non lus en ajoutant <span class="badge">des liens vers, des navigations Bootstrap, etc.

Boîte de réception42

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

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>

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>

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

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

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

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>

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.

Bien fait! Vous avez lu avec succès cet important message d'alerte.

La tête haute! Cette alerte requiert votre attention, mais elle n'est pas très importante.

Avertissement! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.

Oh claquement ! Modifiez quelques éléments et essayez de soumettre à nouveau.

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

Avertissement! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.

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

Liens dans les alertes

Utilisez la .alert-linkclasse utilitaire pour fournir rapidement des liens colorés correspondants dans n'importe quelle alerte.

Bien fait! Vous avez lu avec succès cet important message d'alerte .

La tête haute! Cette alerte requiert votre attention , mais elle n'est pas très importante.

Avertissement! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien .

Oh claquement ! Modifiez quelques éléments et essayez de soumettre à nouveau.

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

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.

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

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

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

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

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

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>

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.

Cras justo odio Dapibus ac facilisis à Morbi leo risus Porta ac consectetur ac Vestibule à eros

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

Cras justo odio Dapibus ac facilisis à Morbi leo risus Porta ac consectetur ac Vestibule à eros

<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

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.

En-tête d'élément de groupe de liste

Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.

En-tête d'élément de groupe de liste

Donec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.

En-tête d'élément de groupe de liste

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.

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>

Panneau avec pied de page

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

Bas de page

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

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>

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>

Composants

Glyphicons

Glyphes disponibles

Comment utiliser

Ne pas mélanger avec d'autres composants

À utiliser uniquement sur des éléments vides

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

Icônes accessibles

Exemples

Listes déroulantes

Exemple

Alignement

Peut nécessiter un positionnement supplémentaire

.pull-rightAlignement obsolète

En-têtes

Diviseur

Éléments de menu désactivés

Groupes de boutons

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

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

Exemple de base

Barre d'outils des boutons

Dimensionnement

Nidification

Variation verticale

Groupes de boutons justifiés

Gérer les frontières

IE8 et bordures

Avec <a>des éléments

Liens faisant office de boutons

Avec <button>des éléments

Listes déroulantes des boutons

Dépendance aux plugins

Listes déroulantes à un seul bouton

Listes déroulantes des boutons de fractionnement

Dimensionnement

Variation de chute

Groupes d'entrée

Textes <input>uniquement

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

Ne pas mélanger avec d'autres composants

Toujours ajouter des libellés

Exemple de base

Dimensionnement

Cases à cocher et modules radio

Ajouts de boutons

Boutons avec listes déroulantes

Boutons segmentés

Plusieurs boutons

Navs

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

Rendre les navs utilisés comme navigation accessibles

Onglets

Pilules

Justifié

Navs justifiés Safari et responsive

Liens désactivés

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

Utilisation des listes déroulantes

Onglets avec listes déroulantes

Pilules avec listes déroulantes

Barre de navigation

Barre de navigation par défaut

Contenu débordant

Nécessite le plug-in JavaScript

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

Rendre les barres de navigation accessibles

Image de marque

Formes

Avertissements concernant les appareils mobiles

Toujours ajouter des libellés

Boutons

Utilisation spécifique au contexte

Texte

Liens hors navigation

Alignement des composants

Alignement à droite de plusieurs composants

Fixé en haut

Rembourrage corporel requis

Fixé au fond

`.pull-right`Alignement obsolète

Assurez-vous d'être correct `role`et fournissez une étiquette

Avec `<a>`des éléments

Avec `<button>`des éléments

Textes `<input>`uniquement