Exemple

Menu contextuel basculable pour afficher des listes de liens. Rendu interactif avec le plugin JavaScript déroulant .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Action </a></li>  
  <li><a tabindex = "-1" href = "#" > Autre action </a></li>  
  <li><a tabindex = "-1" href = "#" > Autre chose ici </a></li>  
  <li class = "diviseur" ></li> 
  <li><a tabindex = "-1" href = "#" > Lien séparé </a></li>  
</ul>

Balisage

En regardant uniquement le menu déroulant, voici le code HTML requis. Vous devez envelopper 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;. Ensuite, créez simplement le menu.

< classe div = "liste déroulante" > 
  <!-- Lien ou bouton pour basculer la liste déroulante -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Action </a></li>  
    <li><a tabindex = "-1" href = "#" > Autre action </a></li>  
    <li><a tabindex = "-1" href = "#" > Autre chose ici </a></li>  
    <li class = "diviseur" ></li> 
    <li><a tabindex = "-1" href = "#" > Lien séparé </a></li>  
  </ul>
</div>

Choix

Alignez les menus à droite et ajoutez des niveaux supplémentaires de listes déroulantes.

Alignement des menus

Ajouter .pull-rightà a .dropdown-menupour aligner à droite le menu déroulant.

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

Options de menu désactivées

Ajoutez .disabledà un <li>dans la liste déroulante pour désactiver le lien.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Lien régulier </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Lien désactivé </a></li>   
  <li><a tabindex = "-1" href = "#" > Autre lien </a></li>  
</ul>

Sous-menus sur les listes déroulantes

Ajoutez un niveau supplémentaire de menus déroulants, apparaissant au survol comme ceux d'OS X, avec quelques ajouts de balisage simples. Ajoutez .dropdown-submenuà n'importe quel limenu déroulant existant pour un style automatique.

Défaut

Déposer jusqu'à

Sous-menu de gauche

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Plus d'options </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

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.

<div class = "btn-group" > 
  <button class = "btn" > Gauche </button> 
  <button class = "btn" > Milieu </button> 
  <button class = "btn" > Droite </button> 
</div>

Plusieurs groupes de boutons

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Groupes de boutons verticaux

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Action
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- liens du menu déroulant -->
  </ul>
</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.

<div class = "btn-group" > 
  <bouton class = "btn" > Action </bouton> 
  <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </bouton>
  <ul class = "dropdown-menu" > 
    <!-- liens du menu déroulant -->
  </ul>
</div>

Tailles

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

<div class = "btn-group" > 
  <bouton class = "btn btn-mini" > Action </bouton> 
  <bouton class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </bouton>
  <ul class = "dropdown-menu" > 
    <!-- liens du menu déroulant -->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <bouton class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </bouton>
  <ul class = "dropdown-menu" > 
    <!-- liens du menu déroulant -->
  </ul>
</div>

Valeurs par défaut légères Même balisage, différentes classes

Tous les composants de navigation ici (onglets, pilules et listes) partagent le même balisage et les mêmes styles de base dans la .navclasse.

Onglets de base

Prenez un régulier <ul>de liens et ajoutez .nav-tabs:

<ul class = "nav nav-onglets" > 
  <li classe = "active" > 
    <a href = "#" > Accueil </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pilules de base

Prenez ce même code HTML, mais utilisez à la .nav-pillsplace :

<ul class = "nav nav-pilules" > 
  <li classe = "active" > 
    <a href = "#" > Accueil </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

État désactivé

Pour tout composant de navigation (onglets, pilules ou liste), ajoutez .disableddes liens gris et aucun effet de survol . Les liens resteront cependant cliquables, sauf si vous supprimez l' hrefattribut. Alternativement, vous pouvez implémenter JavaScript personnalisé pour empêcher ces clics.

<ul class = "nav nav-pilules" > 
  ...
  <li class = "disabled" ><a href = "#" > Accueil </a></li>  
  ...
</ul>

Alignement des composants

Pour aligner les liens de navigation, utilisez les classes utilitaires .pull-leftou . .pull-rightLes deux classes ajouteront un flottant CSS dans la direction spécifiée.

Empilable

Comme les onglets et les pilules sont horizontaux par défaut, ajoutez simplement une deuxième classe, .nav-stacked, pour les faire apparaître verticalement empilés.

Onglets empilés

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pilules empilées

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

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-onglets" > 
  <li class = "dropdown" > 
    <une classe = "dropdown-toggle" 
       data-toggle = "liste déroulante"
       href = "#" >
        Menu déroulant
        <b classe = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- liens -->
    </ul>
  </li>
</ul>

Pilules avec listes déroulantes

<ul class = "nav nav-pilules" > 
  <li class = "dropdown" > 
    <une classe = "dropdown-toggle" 
       data-toggle = "liste déroulante"
       href = "#" >
        Menu déroulant
        <b classe = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- liens -->
    </ul>
  </li>
</ul>

Listes de navigation

Un moyen simple et facile de créer des groupes de liens de navigation avec des en-têtes facultatifs. Ils sont mieux utilisés dans les barres latérales comme le Finder sous OS X.

Exemple de liste de navigation

Prenez une liste de liens et ajoutez class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > En-tête de liste </li> 
  <li class = "active" ><a href = "#" > Accueil </a></li>  
  <li><a href = "#" > Bibliothèque </a></li> 
  ...
</ul>

NoterPour l'imbrication dans une liste de navigation, incluez class="nav nav-list"sur n'importe quel fichier <ul>.

Diviseurs horizontaux

Ajoutez un séparateur horizontal en créant un élément de liste vide avec la classe .divider, comme ceci :

<ul class = "nav nav-liste" > 
  ...
  <li class = "diviseur" ></li> 
  ...
</ul>

Navigation tabulaire

Donnez vie à vos onglets avec un simple plugin pour basculer entre le contenu via des onglets. Bootstrap intègre des onglets tabulables dans quatre styles : haut (par défaut), droite, bas et gauche.

Exemple tablable

Pour rendre les onglets tabulables, créez un .tab-paneavec un ID unique pour chaque onglet et placez-les dans .tab-content.

Je suis en section 1.

Bonjour, je suis dans la section 2.

Quoi de neuf fille, c'est la section 3.

<div class = "tabbable" > <!-- Requis uniquement pour les onglets gauche/droite -->  
  <ul class = "nav nav-onglets" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Section 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Section 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Je suis dans la section 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Bonjour, je suis dans la section 2. </p>
    </div>
  </div>
</div>

Fondu dans les onglets

Pour faire apparaître les onglets en fondu, ajoutez .fadeà chacun .tab-pane.

Nécessite le plug-in jQuery

Tous les onglets tabulables sont alimentés par notre plugin jQuery léger. En savoir plus sur la façon de donner vie aux onglets tabulables sur la page de documentation JavaScript .

Tablable dans n'importe quelle direction

Onglets en bas

Inversez l'ordre du HTML et ajoutez une classe pour mettre des onglets en bas.

Je suis dans la section A.

Bonjour, je suis dans la section B.

Quoi de neuf fille, c'est la section C.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-onglets" > 
    ...
  </ul>
</div>

Onglets à gauche

Échangez la classe pour mettre les onglets à gauche.

Je suis dans la section A.

Bonjour, je suis dans la section B.

Quoi de neuf fille, c'est la section C.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-onglets" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Onglets à droite

Échangez la classe pour mettre les onglets à droite.

Je suis dans la section A.

Bonjour, je suis dans la section B.

Quoi de neuf fille, c'est la section C.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-onglets" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Barre de navigation de base

Pour commencer, les barres de navigation sont statiques (non fixées en haut) et incluent la prise en charge d'un nom de projet et d'une navigation de base. Placez-en un n'importe où dans un .container, qui définit la largeur de votre site et de son contenu.

<div class = "barre de navigation" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titre </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Accueil </a></li>  
      <li><a href = "#" > Lien </a></li> 
      <li><a href = "#" > Lien </a></li> 
    </ul>
  </div>
</div>

Composants de la barre de navigation

Marque

Un simple lien pour afficher votre marque ou le nom de votre projet ne nécessite qu'une balise d'ancrage.

<a class = "brand" href = "#" > Nom du projet </a>

Liens de navigation

Les éléments de navigation sont simples à ajouter via des listes non ordonnées.

<ul class = "nav" > 
  <li classe = "active" > 
    <a href = "#" > Accueil </a> 
  </li>
  <li><a href = "#" > Lien </a></li> 
  <li><a href = "#" > Lien </a></li> 
</ul>

Vous pouvez facilement ajouter des séparateurs à vos liens de navigation avec un élément de liste vide et une classe simple. Ajoutez simplement ceci entre les liens :

<ul class = "nav" > 
  ...
  <li class = "diviseur-vertical" ></li> 
  ...
</ul>

Formes

Pour styliser et positionner correctement un formulaire dans la barre de navigation, ajoutez les classes appropriées comme indiqué ci-dessous. Pour un formulaire par défaut, incluez .navbar-formet soit .pull-leftou .pull-rightpour l'aligner correctement.

<form class = "navbar-form pull-left" > 
  < type d'entrée = "texte" classe = "span2" >  
  <button type = "submit" class = "btn" > Soumettre </button>  
</form>

Formulaire de recherche

Pour un formulaire de recherche plus personnalisé, ajoutez .navbar-searchà formet .search-queryà l'entrée pour les styles spécialisés dans la barre de navigation.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Rechercher" >   
</form>

Alignement des composants

Alignez les liens de navigation, le formulaire de recherche ou le texte, utilisez les classes utilitaires .pull-leftou . .pull-rightLes deux classes ajouteront un flottant CSS dans la direction spécifiée.

Utilisation des listes déroulantes

Ajoutez des listes déroulantes et des listes déroulantes à la navigation avec un peu de balisage et le plugin JavaScript des listes déroulantes .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Compte
      <b classe = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Consultez la documentation des listes déroulantes JavaScript pour plus de balisage et d'informations sur l'appel des listes déroulantes.

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.

Variantes d'affichage facultatives

Fixez la barre de navigation en haut ou en bas de la fenêtre avec une classe supplémentaire sur la div la plus externe, .navbar.

Fixé en haut

Ajoutez .navbar-fixed-topet rappelez-vous de tenir compte de la zone cachée en dessous en ajoutant au moins 40 pixels paddingau fichier <body>. Assurez-vous de l'ajouter après le CSS Bootstrap principal et avant le CSS réactif facultatif.

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

Fixé au fond

Ajoutez .navbar-fixed-bottomà la place.

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

Barre de navigation supérieure statique

Créez une barre de navigation pleine largeur qui défile avec la page en ajoutant .navbar-static-top. Contrairement à la .navbar-fixed-topclasse, vous n'avez pas besoin de modifier le rembourrage sur le body.

<div class = "barre de navigation navbar-static-top" > 
  ...
</div>

Barre de navigation réactive

Pour implémenter une barre de navigation réactive qui s'effondre, enveloppez le contenu de votre barre de navigation dans une div contenant .nav-collapse.collapse, et ajoutez le bouton bascule de la barre de navigation, .btn-navbar.

<div class = "barre de navigation" > 
  <div class = "navbar-inner" > 
    < classe div = "conteneur" > 
 
      <!-- .btn-navbar est utilisé comme bascule pour le contenu de la barre de navigation réduite -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Assurez-vous de laisser la marque là-bas si vous voulez qu'elle soit affichée -->
      <a class = "brand" href = "#" > Nom du projet </a>  
 
      <!-- Tout ce que vous voulez caché à 940 pixels ou moins, placez-le ici -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

La tête haute! La barre de navigation réactive nécessite le plugin d'effondrement et le fichier CSS Bootstrap réactif .

Variante inversée

Modifiez l'apparence de la barre de navigation en ajoutant .navbar-inverse.

<div class = "barre de navigation barre de navigation inverse" > 
  ...
</div>

Exemples

Un seul exemple affiché tel qu'il peut être affiché sur plusieurs pages.

<ul class = "fil d'Ariane" > 
  <li><a href = "#" > Accueil </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bibliothèque </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Données </li> 
</ul>

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.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Précédent </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 = "#" > Suivant </a></li> 
  </ul>
</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.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li classe = "actif" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</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.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li classe = "actif" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tailles

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

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination-pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Alignement

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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.

<ul class = "pager" > 
  <li><a href = "#" > Précédent </a></li> 
  <li><a href = "#" > Suivant </a></li> 
</ul>

Liens alignés

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

<ul class = "pager" > 
  <li classe = "précédent" > 
    <a href = "#" > ← Plus ancien </a> 
  </li>
  <li classe = "suivant" > 
    <a href = "#" > Plus récent → </a> 
  </li>
</ul>

État désactivé facultatif

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

<ul class = "pager" > 
  <li class = "précédent désactivé" > 
    <a href = "#" > ← Plus ancien </a> 
  </li>
  ...
</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

<div class = "hero-unit" > 
  <h1> Titre </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Apprendre encore plus
    </a>
  </p>
</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

<div class = "en-tête de page" > 
  <h1> Exemple d'en-tête de page <small> Sous-texte pour l'en-tête </small></h1>
</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.

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

<ul class = "thumbnails" > 
  <li classe = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</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 :

<ul class = "thumbnails" > 
  <li classe = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Libellé de la vignette </h3>
      <p> Légende de la vignette... </p>
    </div>
  </li>
  ...
</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.

< classe div = "alerte" > 
  < type de bouton = "bouton" class = "fermer" data-dismiss = "alerte" > × </bouton>   
  <strong> Attention ! </strong> Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.
</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.

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

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

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

<div class = "alerte alerte-erreur" > 
  ...
</div>

Succès

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

<div class = "alert alert-success" > 
  ...
</div>

Informations

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

<div class = "alerte alerte-info" > 
  ...
</div>

Exemples et balisage

De base

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

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

Rayé

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

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

Animé

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

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

empilé

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

< classe div = "progrès" > 
  <div class = "bar bar-success" style = " largeur : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " largeur : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " largeur : 10 %; " ></div>   
</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.

<div class = "progress progress-info" > 
  <div class = "bar" style = " largeur : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " largeur : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " largeur : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " largeur : 80 % " ></div>   
</div>

Barres rayées

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " largeur : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " largeur : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " largeur : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " largeur : 80 % " ></div>   
</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.

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

< classe div = "média" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Titre du média </h4> 
    ...
 
    <!-- Objet multimédia imbriqué -->
    < classe div = "média" > 
      ...
    </div>
  </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.
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.

<ul class = "media-list" > 
  <li classe = "média" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Titre du média </h4> 
      ...
 
      <!-- Objet multimédia imbriqué -->
      < classe div = "média" > 
        ...
     </div>
    </div>
  </li>
</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 !

< classe div = "bien" > 
  ...
</div>

Cours optionnels

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

Regarde, je suis dans un puits !

<div class = "bien bien-large" > 
  ...
</div>

Regarde, je suis dans un puits !

<div class = "bien bien-petit" > 
  ...
</div>

Fermer l'icône

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

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

Les appareils iOS nécessitent un href="#"événement for click si vous préférez utiliser une ancre.

<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

class = "tirer vers la gauche"

. tirer - à gauche {
  flottant : gauche ;
}

.tirer à droite

Faire flotter un élément à droite

class = "tirer à droite"

. tirer - droite {
  flottant : droite ;
}

.en sourdine

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

classe = "muet"

. en sourdine {
  couleur : #999; 
}

.clearfix

Effacer le floatsur n'importe quel élément

classe = "clearfix"

. clearfix {
  * zoom : 1 ; 
  & : avant ,
  & : après {
    affichage : tableau ;
    contenu : "" ; 
  }
  & : après {
    clair : les deux ;
  }
}

Menus déroulants

Exemple

Balisage

Choix

Alignement des menus

Options de menu désactivées

Sous-menus sur les listes déroulantes

Groupes de boutons

Exemples

Groupe de boutons unique

Plusieurs groupes de boutons

Groupes de boutons verticaux

Case à cocher et saveurs radio

Listes déroulantes dans les groupes de boutons

Menus déroulants des boutons

Présentation et exemples

Fonctionne avec toutes les tailles de boutons

Nécessite JavaScript

Listes déroulantes des boutons de fractionnement

Tailles

Menus déroulants

Nav : onglets, pilules et listes

Valeurs par défaut légères Même balisage, différentes classes

Onglets de base

Pilules de base

État désactivé

Alignement des composants

Empilable

Onglets empilés

Pilules empilées

Listes déroulantes

Onglets avec listes déroulantes

Pilules avec listes déroulantes

Listes de navigation

Exemple de liste de navigation

Diviseurs horizontaux

Navigation tabulaire

Exemple tablable

Fondu dans les onglets

Nécessite le plug-in jQuery

Tablable dans n'importe quelle direction

Onglets en bas

Onglets à gauche

Onglets à droite

Barre de navigation

Barre de navigation de base

Composants de la barre de navigation

Marque

Liens de navigation

Formes

Formulaire de recherche

Alignement des composants

Utilisation des listes déroulantes

Texte

Variantes d'affichage facultatives

Fixé en haut

Fixé au fond

Barre de navigation supérieure statique

Barre de navigation réactive

Variante inversée

Chapelure

Exemples

Pagination Deux options pour parcourir le contenu

Pagination standard

Choix

États désactivé et actif

Tailles

Alignement

Téléavertisseur

Exemple par défaut

Liens alignés

État désactivé facultatif

Étiquettes et insignes

Étiquettes

Insignes

Facilement pliable

Composants typographiques

Unité de héros

Bonjour le monde!

En-tête de page