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

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 :

La gauche Milieu Droit

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

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

La tête haute

Le CSS pour les groupes de boutons se trouve dans un fichier séparé, button-groups.less.

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

La tête haute! Les listes déroulantes de boutons nécessitent le plug-in de liste déroulante Bootstrap pour fonctionner.

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.

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

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.

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.

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

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

Classe de base puissante

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.

Quand utiliser

Les onglets et les pilules sont parfaits pour les sections de contenu ou pour naviguer entre les pages de contenu connexe.

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.

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>

Empilable Faire des onglets ou des pilules verticales

Comment les empiler

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 pour les composants de navigation avancés

Des menus riches simplifiés

Les menus déroulants dans les onglets et les pilules Bootstrap sont très simples et ne nécessitent qu'un peu de HTML supplémentaire et un plugin jQuery léger.

Rendez-vous sur la page Javascript pour lire la documentation sur l' initialisation des listes déroulantes dans Bootstrap.

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 Créez des navigations empilées simples, idéales pour les barres latérales

Navigation de style application

Les listes de navigation offrent 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.

Structurellement, ils sont construits sur les mêmes styles de navigation de base que les onglets et les pilules, de sorte que l'utilisation et la personnalisation sont simples.

Avec icônes

Les listes de navigation sont également faciles à équiper d'icônes. <i>Ajoutez la balise appropriée avec la classe et vous êtes prêt.

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 classe = "active" > 
    <a href = "#" > Accueil </a> 
  </li>
  <li>
    <a href = "#" > Bibliothèque </a> 
  </li>
  ...
</ul>

Exemple avec icônes

Même exemple, mais avec <i>des balises pour les icônes.

<ul class = "nav nav-liste" > 
  ...
  <li>
    <a href="#"> _ _ _ 
      <i class = "icon-book" ></i> 
      Bibliothèque
    </a>
  </li>
  ...
</ul>

Navigation tabulaire Donnez vie aux onglets via javascript

Ce qui est inclu

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.

Changer entre eux est facile et ne nécessite que très peu de changement de balisage.

Exemple tablable

Pour rendre les onglets tabulables, enveloppez le .nav-tabsdans un autre div avec la classe .tabbable.

Je suis en section 1.

Bonjour, je suis dans la section 2.

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

Plugin jQuery personnalisé

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.

Obtenir le javascript →

Balisage simple

L'utilisation d'onglets tabulables nécessite une div d'habillage, un ensemble d'onglets et un ensemble de volets de contenu tabulables.

< classe div = "tabbable" > 
  <ul class = "nav nav-onglets" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Section 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Section 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Je suis dans la section 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Bonjour, je suis dans la section 2. </p>
    </div>
  </div>
</div>

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>

Exemple de barre de navigation statique

Un exemple de barre de navigation statique (non fixée en haut) avec le nom du projet, la navigation et le formulaire de recherche.

Échafaudage Navbar

La barre de navigation ne nécessite que quelques divs pour bien la structurer pour un affichage statique ou fixe.

<div class = "barre de navigation" > 
  <div class = "navbar-inner" > 
    < classe div = "conteneur" > 
      ...
    </div>
  </div>
</div>

Barre de navigation fixe

Pour que la barre de navigation soit fixée en haut de la fenêtre d'affichage, ajoutez .navbar-fixed-topà la div la plus externe, .navbar.

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

Dans votre CSS, vous devrez également tenir compte du chevauchement qu'il provoque en ajoutant 40 pixels ou plus de rembourrage à votre fichier <body>. Assurez-vous de l'ajouter après le CSS Bootstrap principal et avant le CSS réactif facultatif.

Marque

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

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

Formulaire de recherche

Les formulaires de recherche reçoivent des styles personnalisés dans la barre de navigation avec la .navbar-searchclasse. Incluez .pull-leftou .pull-rightsur formpour l'aligner.

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

Variation réactive facultative

En fonction de la quantité de contenu dans votre barre supérieure, vous souhaiterez peut-être implémenter les options réactives. Pour ce faire, enveloppez votre contenu 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" > 
        <!-- .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 .

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>

Alignement des composants

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

Ajout de listes déroulantes

L'ajout de listes déroulantes à la navigation est très simple, mais nécessite l'utilisation de notre plugin javascript .

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

Obtenir le javascript →

Pourquoi les utiliser

La navigation par fil d'Ariane est utilisée pour montrer aux utilisateurs où ils se trouvent dans une application ou un site, mais pas pour la navigation principale. Gardez leur utilisation clairsemée et succincte pour être plus efficace.

Exemples

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

Balisage

HTML est votre liste non ordonnée standard avec des liens.

<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 classe = "active" > 
    <a href = "#" > Données </a> 
  </li>
</ul>

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

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

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>

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

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 :

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

<div class = "page-haeder" > 
  <h1> Exemple d'en-tête de page </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

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 :

<ul class = "thumbnails" > 
  <li classe = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Libellé de la vignette </h5>
      <p> Légende de la vignette juste ici... </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.

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.

< classe div = "alerte" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Attention ! </strong> Tu ferais mieux de vérifier toi-même, tu n'as pas l'air trop bien.
</div>

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

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

<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" > 
  < classe div = "barre" 
       style = " largeur : 60 %; " ></div> 
</div>

Rayé

Utilise un dégradé pour créer un effet rayé.

<div class = "progrès progrès-info 
     progress-rayé" >
  < classe div = "barre" 
       style = " largeur : 20 %; " ></div> 
</div>

Animé

Prend l'exemple rayé et l'anime.

<div class = "progrès progrès-danger 
     progress-striped active" >
  < classe div = "barre" 
       style = " largeur : 40 %; " ></div> 
</div>

Options et prise en charge du navigateur

Couleurs supplémentaires

Les barres de progression utilisent certains des mêmes noms de classe que les boutons et les alertes pour un style similaire.

.progress-info
.progress-success
.progress-danger

Alternativement, vous pouvez personnaliser les fichiers LESS et rouler vos propres couleurs et tailles.

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-8 ou les versions antérieures de Firefox.

Opera ne prend pas en charge les animations pour le moment.

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>

Insignes

Utilisez un badge sur un élément pour un décompte des non lus ou comme simple indicateur.

<span class = "badge" > 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.

<a class = "fermer" > × </a>

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

Groupes de boutons

Les meilleures pratiques

Exemple par défaut

Exemple de barre d'outils

Case à cocher et saveurs radio

La tête haute

Listes déroulantes de boutons Menus déroulants contextuels construits sur des groupes de boutons

Listes déroulantes des boutons

Exemple de balisage

Listes déroulantes des boutons de fractionnement

Exemple de balisage

Navigation, onglets et pilules Navigation de style liste hautement personnalisable

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

Classe de base puissante

Quand utiliser

Alignement des composants

Onglets de base

Pilules de base

Empilable Faire des onglets ou des pilules verticales

Comment les empiler

Onglets empilés

Pilules empilées

Listes déroulantes pour les composants de navigation avancés

Des menus riches simplifiés

Onglets avec listes déroulantes

Pilules avec listes déroulantes

Listes de navigation Créez des navigations empilées simples, idéales pour les barres latérales

Navigation de style application

Avec icônes

Exemple de liste de navigation

Exemple avec icônes

Navigation tabulaire Donnez vie aux onglets via javascript

Ce qui est inclu

Exemple tablable

Plugin jQuery personnalisé

Balisage simple

Tablable dans n'importe quelle direction

Onglets en bas

Onglets à gauche

Onglets à droite

Barre de navigation

Exemple de barre de navigation statique

Échafaudage Navbar

Barre de navigation fixe

Marque

Formulaire de recherche

Variation réactive facultative

Liens de navigation

Alignement des composants

Ajout de listes déroulantes

Chapelure

Pourquoi les utiliser

Exemples

Balisage

Pagination Deux options pour parcourir le contenu

Pagination multi-pages

Quand utiliser

Liens de page avec état

Alignement flexible

Exemples

Balisage

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

À propos du téléavertisseur

Exemple par défaut

Liens alignés

Étiquettes en ligne Étiqueter et annoter du texte

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

Unité de héros

Balisage

Bonjour le monde!

En-tête de page

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

Vignettes par défaut

Hautement personnalisable

Libellé de vignette

Libellé de vignette

Pourquoi utiliser des vignettes

Balisage simple et flexible

Utilise des tailles de colonne de grille