Plus d'une douzaine de composants réutilisables conçus pour fournir une iconographie, des listes déroulantes, des groupes de saisie, une navigation, des alertes et bien plus encore.
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 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.
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.
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.
Erreur:Entrez une adresse mail valide
Listes déroulantes
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.
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.
En-têtes
Ajoutez un en-tête pour étiqueter les sections d'actions dans n'importe quel menu déroulant.
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.
Barre d'outils des boutons
Combinez des ensembles de <div class="btn-group">dans un <div class="btn-toolbar">pour des composants plus complexes.
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.
Nidification
Placez un .btn-groupdans un autre .btn-grouplorsque vous souhaitez mélanger des menus déroulants avec une série de boutons.
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.
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.
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.
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.
É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.
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.
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.
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.
Boutons avec listes déroulantes
Boutons segmentés
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.
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.
Onglets
Notez que la .nav-tabsclasse nécessite la .navclasse de base.
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é .
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.
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.
Image de marque
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.
Formes
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.
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.
Boutons
Ajoutez la .navbar-btnclasse aux <button>éléments ne résidant pas dans a <form>pour les centrer verticalement dans la barre de navigation.
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.
Texte
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.
Liens hors navigation
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.
Alignement des composants
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.
Fixé en haut
Ajoutez .navbar-fixed-topet incluez un .containerou .container-fluidpour centrer et remplir le contenu de la barre de navigation.
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.
Assurez-vous de l'inclure après le noyau Bootstrap CSS.
Fixé au fond
Ajoutez .navbar-fixed-bottomet incluez un .containerou .container-fluidpour centrer et remplir le contenu de la barre de navigation.
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.
Assurez-vous de l'inclure après le noyau Bootstrap CSS.
Haut statique
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.
Barre de navigation inversée
Modifiez l'apparence de la barre de navigation en ajoutant .navbar-inverse.
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.
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.
É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.
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.
Dimensionnement
Envie d'une pagination plus grande ou plus petite ? Ajoutez .pagination-lgou .pagination-smpour des tailles supplémentaires.
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.
Liens alignés
Alternativement, vous pouvez aligner chaque lien sur les côtés :
État désactivé facultatif
Les liens de pager utilisent également la .disabledclasse d'utilité générale de la pagination.
É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
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
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.
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.
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.
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.
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).
Exemple d'en-tête de page Sous- texte pour l'en-tête
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.
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.
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.
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.
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.
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.
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.
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é
Avec étiquette
Supprimez la classe <span>with .sr-onlyde la barre de progression pour afficher un pourcentage visible.
60%
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%
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)
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)
Animé
Ajoutez .activeà .progress-bar-stripedpour animer les rayures de droite à gauche. Non disponible dans IE9 et ci-dessous.
45 % terminé
empilé
Placez plusieurs barres dans la même .progresspour les empiler.
35 % terminé (succès)
20 % terminé (avertissement)
10 % terminé (danger)
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.
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.
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.
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
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
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.
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.
Articles désactivés
Ajoutez .disabledà a .list-group-itempour le griser afin qu'il apparaisse désactivé.
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
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
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
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
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
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
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
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.
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 !
Cours optionnels
Contrôlez le rembourrage et les coins arrondis avec deux classes de modificateurs facultatives.