Amorcer

Composants

Des dizaines de composants réutilisables sont intégrés à Bootstrap pour fournir une navigation, des alertes, des popovers et bien plus encore.

Groupes de boutons Joindre des boutons pour plus de fonctionnalités de type barre d'outils

Groupes de boutons

Utilisez des groupes de boutons pour joindre plusieurs boutons en un seul composant composite. Construisez-les avec une série d' éléments <a>ou <button>.

Les meilleures pratiques

Nous recommandons les directives suivantes pour l'utilisation des groupes de boutons et des barres d'outils :

  • Utilisez toujours le même élément dans un seul groupe de boutons, <a>ou <button>.
  • Ne mélangez pas des boutons de couleurs différentes dans le même groupe de boutons.
  • Utilisez des icônes en plus ou à la place du texte, mais assurez-vous d'inclure le texte alternatif et le titre, le cas échéant.

Les groupes de boutons associés avec des listes déroulantes (voir ci-dessous) doivent être appelés séparément et toujours inclure un curseur déroulant pour indiquer le comportement souhaité.

Exemple par défaut

Voici à quoi ressemble le code HTML pour un groupe de boutons standard construit avec des boutons de balise d'ancrage :

  1. <div class = "btn-group" > 
  2.   <bouton classe = "btn" > 1 </bouton> 
  3.   <bouton classe = "btn" > 2 </bouton> 
  4.   <bouton classe = "btn" > 3 </bouton> 
  5. </div>

Exemple de barre d'outils

Combinez des ensembles de <div class="btn-group">dans un <div class="btn-toolbar">pour des composants plus complexes.

  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </div>
  5. </div>

Case à cocher et saveurs radio

Les groupes de boutons peuvent également fonctionner comme des radios, où un seul bouton peut être actif, ou des cases à cocher, où n'importe quel nombre de boutons peut être actif. Consultez la documentation Javascript pour cela.

Obtenir le javascript »

Listes déroulantes dans les groupes de boutons

La tête haute! Les boutons avec des listes déroulantes doivent être enveloppés individuellement .btn-groupdans un .btn-toolbarpour un rendu correct.

Menus déroulants de boutons Construits sur des groupes de boutons pour fournir des menus contextuels

Listes déroulantes des boutons

Présentation et exemples

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

Exemple de balisage

Semblable à un groupe de boutons, notre balisage utilise un balisage de bouton régulier, mais avec quelques ajouts pour affiner le style et prendre en charge le plugin jQuery déroulant de Bootstrap.

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  3.     Action
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- liens du menu déroulant -->
  8.   </ul>
  9. </div>

Fonctionne avec toutes les tailles de boutons

Les listes déroulantes de boutons fonctionnent à n'importe quelle taille. vos tailles de bouton à .btn-large, .btn-smallou .btn-mini.

Nécessite javascript

Les listes déroulantes de boutons nécessitent le plug-in de liste déroulante Bootstrap pour fonctionner.

Dans certains cas, comme les mobiles, les menus déroulants s'étendent en dehors de la fenêtre d'affichage. Vous devez résoudre l'alignement manuellement ou avec un javascript personnalisé.


Listes déroulantes des boutons de fractionnement

Présentation et exemples

En nous appuyant sur les styles et le balisage des groupes de boutons, nous pouvons facilement créer un bouton partagé. Les boutons partagés comportent une action standard à gauche et une bascule déroulante à droite avec des liens contextuels.

Tailles

Utilisez les classes de boutons supplémentaires .btn-mini, .btn-smallou .btn-largepour le dimensionnement.

  1. <div class = "btn-group" > 
  2.   ...
  3.   <ul class = "dropdown-menu pull-right" > 
  4.     <!-- liens du menu déroulant -->
  5.   </ul>
  6. </div>

Exemple de balisage

Nous développons les listes déroulantes de boutons normales pour fournir une deuxième action de bouton qui fonctionne comme un déclencheur de liste déroulante distinct.

  1. <div class = "btn-group" > 
  2.   <bouton class = "btn" > Action </bouton> 
  3.   <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </bouton>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- liens du menu déroulant -->
  8.   </ul>
  9. </div>

Menus déroulants

Les menus déroulants peuvent également être basculés de bas en haut en ajoutant une seule classe au parent immédiat de .dropdown-menu. Il inversera la direction du .caretet repositionnera le menu lui-même pour se déplacer de bas en haut au lieu de haut en bas.

  1. <div class = "btn-group dropup" > 
  2.   <button class = "btn" > Dropup </button> 
  3.   <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </bouton>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- liens du menu déroulant -->
  8.   </ul>
  9. </div>

Pagination Deux options pour parcourir le contenu

Pagination multi-pages

Quand utiliser

Pagination ultra simpliste et minimaliste 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.

Liens de page avec état

Les liens sont personnalisables et fonctionnent dans un certain nombre de circonstances avec la bonne classe. .disabledpour les liens non cliquables et .activepour la page courante.

Alignement flexible

Ajoutez l'une des deux classes facultatives pour modifier l'alignement des liens de pagination : .pagination-centeredet .pagination-right.

Exemples

Le composant de pagination par défaut est flexible et fonctionne dans un certain nombre de variantes.

Balisage

Enveloppé dans un <div>, la pagination est juste un <ul>.

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li><a href = "#" > Précédent </a></li> 
  4.     <li classe = "active" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > 4 ​​</a></li> 
  10.     <li><a href = "#" > Suivant </a></li> 
  11.   </ul>
  12. </div>

Téléavertisseur Pour des liens rapides précédents et suivants

À propos du téléavertisseur

Le composant pager est un ensemble de liens pour des implémentations de pagination simples avec un balisage léger et des styles encore plus légers. C'est idéal pour les sites simples comme les blogs ou les magazines.

État désactivé facultatif

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

Exemple par défaut

Par défaut, le pager centre les liens.

  1. <ul class = "pager" > 
  2.   <li>
  3.     <a href = "#" > Précédent </a> 
  4.   </li>
  5.   <li>
  6.     <a href = "#" > Suivant </a> 
  7.   </li>
  8. </ul>

Liens alignés

Alternativement, vous pouvez aligner chaque lien sur les côtés :

  1. <ul class = "pager" > 
  2.   <li classe = "précédent" > 
  3.     <a href = "#" > ← Plus ancien </a> 
  4.   </li>
  5.   <li classe = "suivant" > 
  6.     <a href = "#" > Plus récent → </a> 
  7.   </li>
  8. </ul>

Étiquettes en ligne Étiqueter et annoter du texte

Étiquettes Balisage
Défaut <span class="label">Default</span>
Succès <span class="label label-success">Success</span>
Avertissement <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Indicateurs de badges et comptages non lus

À propos de

Les badges sont de petits composants simples permettant d'afficher un indicateur ou un décompte quelconque. On les trouve couramment dans les clients de messagerie comme Mail.app ou sur les applications mobiles pour les notifications push.

Cours disponibles

Nom Exemple Balisage
Défaut 1 <span class="badge">1</span>
Succès 2 <span class="badge badge-success">2</span>
Avertissement 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse dix <span class="badge badge-inverse">10</span>

Composants typographiques En-tête de page et unité principale pour segmenter le contenu

Unité de héros

Bootstrap fournit un composant léger et flexible appelé unité de héros pour présenter le contenu de votre site. Cela fonctionne bien sur les sites marketing et à forte teneur en contenu.

Balisage

Enveloppez votre contenu dans un divcomme suit :

  1. <div class = "hero-unit" > 
  2.   <h1> Titre </h1>
  3.   <p> Slogan </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       Apprendre encore plus
  7.     </a>
  8.   </p>
  9. </div>

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

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 h1default , ainsi que la plupart des autres composants (avec des styles supplémentaires).small

Exemple d'en-tête de page Sous- texte pour l'en-tête

  1. <div class = "en-tête de page" > 
  2.   <h1> Exemple d'en-tête de page </h1>
  3. </div>

Vignettes Grilles d'images, de vidéos, de texte, etc.

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

Hautement personnalisable

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.

    Action Action

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

    Action Action

Pourquoi utiliser des vignettes

Les vignettes (auparavant .media-gridjusqu'à la v1.4) sont idéales pour les grilles de photos ou de vidéos, les résultats de recherche d'images, les produits de vente au détail, les portefeuilles et bien plus encore. Il peut s'agir de liens ou de contenu statique.

Balisage simple et flexible

Le balisage des miniatures est simple : un ulavec n'importe quel nombre d' liéléments est tout ce qui est requis. Il est également super flexible, permettant à tout type de contenu avec juste un peu plus de balisage pour envelopper votre contenu.

Utilise des tailles de colonne de grille

Enfin, le composant vignettes utilise des classes de système de grille existantes, telles que .span2ou, .span3pour contrôler les dimensions des vignettes.

Le balisage

Comme mentionné précédemment, le balisage requis pour les vignettes est léger et simple. Voici un aperçu de la configuration par défaut des images liées :

  1. <ul class = "thumbnails" > 
  2.   <li classe = "span3" > 
  3.     <a href = "#" class = "thumbnail" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

Pour le contenu HTML personnalisé dans les miniatures, le balisage change légèrement. Pour autoriser le contenu au niveau du bloc n'importe où, nous remplaçons le <a>par un <div>semblable :

  1. <ul class = "thumbnails" > 
  2.   <li classe = "span3" > 
  3.     <div class = "thumbnail" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> Libellé de la vignette </h5>
  6.       <p> Légende de la vignette juste ici... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

Plus d'exemples

Explorez toutes vos options avec les différentes classes de grille à votre disposition. Vous pouvez également mélanger et assortir différentes tailles.

Styles d' alertes pour les messages de réussite, d'avertissement et d'erreur

Valeurs par défaut légères

Classe de base réécrite

Avec Bootstrap 2, nous avons simplifié la classe de base : .alertau lieu de .alert-message. Nous avons également réduit le balisage minimum requis : no <p>est requis par défaut, juste le <div>.

Message d'alerte unique

Pour un composant plus durable avec moins de code, nous avons supprimé l'apparence de différenciation pour les alertes de blocage, les messages qui viennent avec plus de rembourrage et généralement plus de texte. La classe a également changé en .alert-block.

Va très bien avec javascript

Bootstrap est livré avec un excellent plugin jQuery qui prend en charge les messages d'alerte, ce qui permet de les rejeter rapidement et facilement.

Obtenir le plug-in »

Exemples d'alertes

Enveloppez votre message et une icône de fermeture facultative dans une div avec une classe simple.

Avertissement! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien. 
  1. < classe div = "alerte" > 
  2.   <bouton classe = "fermer" data-dismiss = "alerte" > × </bouton>  
  3.   <strong> Attention ! </strong> Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.
  4. </div>

La tête haute! Les appareils iOS nécessitent un href="#"pour le rejet des alertes. Assurez-vous de l'inclure ainsi que l'attribut de données pour les icônes de fermeture d'ancre. Vous pouvez également utiliser un <button>élément avec l'attribut data, ce que nous avons choisi de faire pour nos documents. Lorsque vous utilisez <button>, vous devez inclure type="button"ou vos formulaires peuvent ne pas être soumis.

Étendez facilement le message d'alerte standard avec deux classes facultatives : .alert-blockpour plus de contrôles de remplissage et de texte et .alert-headingpour un en-tête correspondant.

Avertissement!

Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" > 
  2.   <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  3.   <h4 class = "alert-heading" > Attention ! </h4> 
  4.   Tu ferais mieux de vérifier toi-même, tu n'es pas...
  5. </div>

Alternatives contextuelles Ajouter des classes facultatives pour modifier la connotation d'une alerte

Erreur ou danger

Oh claquement ! Modifiez quelques éléments et essayez de soumettre à nouveau. 
  1. <div class = "alerte alerte-erreur" > 
  2.   ...
  3. </div>

Succès

Bien fait! Vous avez lu avec succès cet important message d'alerte. 
  1. <div class = "alert alert-success" > 
  2.   ...
  3. </div>

Informations

La tête haute! Cette alerte requiert votre attention, mais elle n'est pas très importante. 
  1. <div class = "alerte alerte-info" > 
  2.   ...
  3. </div>

Barres de progression Pour le chargement, la redirection ou l'état de l'action

Exemples et balisage

De base

Barre de progression par défaut avec un dégradé vertical.

  1. < classe div = "progrès" > 
  2.   < classe div = "barre" 
  3.        style = " largeur : 60 %; " ></div> 
  4. </div>

Rayé

Utilise un dégradé pour créer un effet rayé (pas d'IE).

  1. <div class = "progress progress-striped" > 
  2.   < classe div = "barre" 
  3.        style = " largeur : 20 %; " ></div> 
  4. </div>

Animé

Prend l'exemple rayé et l'anime (pas d'IE).

  1. <div class = "progress progress-striped 
  2.      actif" >
  3.   < classe div = "barre" 
  4.        style = " largeur : 40 %; " ></div> 
  5. </div>

Options et prise en charge du navigateur

Couleurs supplémentaires

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

Barres rayées

Semblables aux couleurs unies, nous avons des barres de progression rayées variées.

Comportement

Les barres de progression utilisent des transitions CSS3, donc si vous ajustez dynamiquement la largeur via javascript, elles se redimensionneront en douceur.

Si vous utilisez la .activeclasse, vos .progress-stripedbarres de progression animeront les rayures de gauche à droite.

Prise en charge du navigateur

Les barres de progression utilisent des dégradés, des transitions et des animations CSS3 pour obtenir tous leurs effets. Ces fonctionnalités ne sont pas prises en charge dans IE7-9 ou les versions antérieures de Firefox.

Opera et IE ne prennent pas en charge les animations pour le moment.

Composants utilitaires légers divers

puits

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

Regarde, je suis dans un puits ! 
  1. < classe div = "bien" > 
  2.   ...
  3. </div>

Fermer l'icône

Utilisez l'icône de fermeture générique pour ignorer le contenu comme les modaux et les alertes.

  1. <bouton classe = "fermer" > × </bouton>

Les appareils iOS nécessitent un href="#" pour les événements de clic si vous utilisez plutôt une ancre.

  1. <a class = "close" href = "#" > × </a>