Composants

Des dizaines de composants réutilisables conçus pour fournir une navigation, des alertes, des popovers, etc.

Exemples

Deux options de base, ainsi que deux variantes plus spécifiques.

Groupe de boutons unique

Enveloppez une série de boutons avec .btnin .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Gauche </button>
  3. <button class = "btn" > Milieu </button>
  4. <button class = "btn" > Droite </button>
  5. </div>

Plusieurs groupes de boutons

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>

Groupes de boutons verticaux

Faire apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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.

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.

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

  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 : .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 JavaScript personnalisé.


Listes déroulantes des boutons de fractionnement

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.

  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>

Tailles

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

  1. <div class = "btn-group" >
  2. <bouton class = "btn btn-mini" > Action </bouton>
  3. <bouton class = "btn btn-mini 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 standard

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.

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

Choix

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li classe = "actif" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Vous pouvez éventuellement remplacer les ancres actives ou désactivées par des étendues afin de supprimer la fonctionnalité de clic tout en conservant les styles souhaités.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li classe = "actif" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Tailles

Envie d'une pagination plus grande ou plus petite ? Ajoutez .pagination-large, .pagination-small, ou .pagination-minipour des tailles supplémentaires.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination-pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Alignement

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

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.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Précédent </a></li>
  3. <li><a href = "#" > Suivant </a></li>
  4. </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>

État désactivé facultatif

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

  1. <ul class = "pager" >
  2. <li class = "précédent désactivé" >
  3. <a href = "#" > Plus ancien </a>
  4. </li>
  5. ...
  6. </ul>

Étiquettes

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

Insignes

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>

Facilement pliable

Pour une mise en œuvre facile, les étiquettes et les badges s'effondreront simplement (via le :emptysélecteur CSS) lorsqu'aucun contenu n'existe à l'intérieur.

Unité de héros

Un composant léger et flexible pour présenter le contenu clé de votre site. Cela fonctionne bien sur les sites marketing et à forte teneur en contenu.

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

  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>

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

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

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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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.

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 = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Libellé de la vignette </h3>
  6. <p> Légende de la vignette... </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.

Alerte par défaut

Enveloppez n'importe quel texte et un bouton de rejet facultatif .alertpour un message d'alerte d'avertissement de base.

Avertissement! Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.
  1. < classe div = "alerte" >
  2. < type de bouton = "bouton" class = "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>

Ignorer les boutons

Les navigateurs Mobile Safari et Mobile Opera, en plus de l' data-dismiss="alert"attribut, nécessitent un href="#"pour le rejet des alertes lors de l'utilisation d'une <a>balise.

  1. <a href = "#" class = "close" data-dismiss = "alert" > × </a>

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.

  1. < type de bouton = "bouton" class = "fermer" data-dismiss = "alerte" > × </bouton>

Ignorer les alertes via JavaScript

Utilisez le plugin alerts jQuery pour un rejet rapide et facile des alertes.


Choix

Pour les messages plus longs, augmentez le rembourrage en haut et en bas du wrapper d'alerte en ajoutant .alert-block.

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. < type de bouton = "bouton" class = "fermer" data-dismiss = "alerte" > × </bouton>
  3. <h4> Attention ! </h4>
  4. Tu ferais mieux de vérifier toi-même, tu n'es pas...
  5. </div>

Alternatives contextuelles

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

Exemples et balisage

De base

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

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

Rayé

Utilise un dégradé pour créer un effet rayé. Non disponible dans IE7-8.

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

Animé

Ajoutez .activeà .progress-stripedpour animer les rayures de droite à gauche. Non disponible dans toutes les versions d'IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " largeur : 40 %; " ></div>
  3. </div>

empilé

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

  1. < classe div = "progrès" >
  2. <div class = "bar bar-success" style = " largeur : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " largeur : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " largeur : 10 %; " ></div>
  5. </div>

Choix

Couleurs supplémentaires

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " largeur : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " largeur : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " largeur : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " largeur : 80 % " ></div>
  12. </div>

Barres rayées

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " largeur : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " largeur : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " largeur : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " largeur : 80 % " ></div>
  12. </div>

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.

Les versions antérieures à Internet Explorer 10 et Opera 12 ne prennent pas en charge les animations.

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.

Exemple par défaut

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

64x64

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

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

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.
  1. < classe div = "média" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Titre du média </h4>
  7. ...
  8.  
  9. <!-- Objet multimédia imbriqué -->
  10. < classe div = "média" >
  11. ...
  12. </div>
  13. </div>
  14. </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).

  • 64x64

    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.

    64x64

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

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

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

    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.
  1. <ul class = "media-list" >
  2. <li classe = "média" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Titre du média </h4>
  8. ...
  9.  
  10. <!-- Objet multimédia imbriqué -->
  11. < classe div = "média" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Cours optionnels

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

Regarde, je suis dans un puits !
  1. <div class = "bien bien-large" >
  2. ...
  3. </div>
Regarde, je suis dans un puits !
  1. <div class = "bien bien-petit" >
  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="#"événement for click si vous préférez utiliser une ancre.

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

Cours d'assistance

Des cours simples et ciblés pour de petits ajustements d'affichage ou de comportement.

.pull-gauche

Faire flotter un élément à gauche

  1. class = "tirer vers la gauche"
  1. . tirer - à gauche {
  2. flottant : gauche ;
  3. }

.tirer à droite

Faire flotter un élément à droite

  1. class = "tirer à droite"
  1. . tirer - droite {
  2. flottant : droite ;
  3. }

.en sourdine

Changer la couleur d'un élément en#999

  1. classe = "muet"
  1. . en sourdine {
  2. couleur : #999;
  3. }

.clearfix

Effacer le floatsur n'importe quel élément

  1. classe = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. & : avant ,
  4. & : après {
  5. affichage : tableau ;
  6. contenu : "" ;
  7. }
  8. & : après {
  9. clair : les deux ;
  10. }
  11. }