Vue d'ensemble

Découvrez les éléments essentiels de l'infrastructure de Bootstrap, dont notre approche pour un développement Web meilleur, plus rapide et plus puissant.

Doctype HTML5

Bootstrap utilise certains éléments HTML et propriétés CSS nécessitant l'utilisation du doctype HTML5. Ajoutez-le au début de tous vos projets.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Mobile d'abord

Avec Bootstrap 2, nous avons ajouté des styles optimisés pour les mobiles en option pour des aspects essentiels du framework. Avec Bootstrap 3, nous avons réécrit le projet pour qu'il soit adapté aux mobiles dès le départ. Au lieu d'ajouter des styles optimisés pour les mobiles en option, ceux-ci sont intégrés au noyau. En fait, Bootstrap est mobile first. Les styles mobile first sont présents à travers la bibliothèque entière, plutôt que dans des fichiers séparés.

Pour assurer un rendu optimal et un zoom tactile fontionnel, ajoutez la balise méta viewport à votre <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Vous pouvez désactiver les fonctionnalités de zoom sur les appareils mobiles en ajoutant user-scalable=no à la balise méta viewport. Ceci désactive le zoom, ce qui signifie que les utilisateurs ne pourront que faire défiler l'écran. Votre site fonctionnera donc davantage comme une application native. En général, nous ne conseillons pas cela pour tous les sites, donc utilisez cette option avec précaution !

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrap définit l'affichage, la typographie et les styles de liens globaux de base. Plus spécifiquement, nous :

  • Définissez background-color: #fff; dans le body
  • Utilisons les attributs @font-family-base, @font-size-base et @line-height-base comme base typographique
  • Définissons la couleur globale des liens via @link-color et soulignons les liens uniquement pour les :hover

Ces styles peuvent être trouvés dans scaffolding.less.

Normalize.css

Pour un meilleur rendu dans les différents navigateurs, nous utilisons Normalize.css, un projet créé par Nicolas Gallagher et Jonathan Neal.

Contenants

Bootstap demande un élément conteneur pour envelopper le contenu du site et supporter notre système de grille. Vous devez choisir l'un de nos deux conteneurs pour vos projets. Noter qu'en raison des codes comme padding et autres, le conteneur ("container") se doivent pas être utilisés en cascade.

Utiliser .container pour une maquette responsive avec une largeur fixe.

<div class="container">
  ...
</div>

Utiliser .container-fluid pour une maquette utilise toute la largeur de la fenêtre en fonction du lecteur.

<div class="container-fluid">
  ...
</div>

Système de grille

Bootstrap inclut un système de grille fluide mobile first, s'étendant de façon adaptée jusqu'à 12 colonnes lorsque la taille de l'appareil ou du viewport augmente. Il comprend des classes prédéfinies puissantes pour des options de disposition simple, et aussi des mixins puissants pour créer des dispositions plus sémantiques.

Introduction

Les systèmes de grille sont utilisés pour créer des dispositions de page grâce à une série de lignes et de colonnes qui abritent votre contenu. Voici comment fonctionne le système de grille de Bootstrap :

  • Les lignes doivent être placées à l'intérieur d'un .container (largeur fixe) ou d'un .container-fluid (pleine largeur) pour un alignement et un padding optimaux.
  • Utilisez les lignes pour créer des groupes horizontaux de colonnes.
  • Le contenu devrait être placé à l'intérieur des colonnes, et seules les colonnes pourraient être des descendants directs des lignes.
  • Les classes de grille prédéfinies comme .row et .col-xs-4 sont disponibles pour la création rapide des dispositions de grille. Les mixins Less peuvent également être utilisés pour des dispositions plus sémantiques.
  • Les colonnes créent des gouttières (des espaces entre le contenu des colonnes) via padding. Cet espacement est compensé dans les lignes pour la première et dernière colonne via une marge négative dans les .rows (lignes).
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Les colonnes de grille sont créées en spécifiant le nombre des douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Les classes de grille s'appliquent aux appareils dont la largeur d'écran est supérieure ou égale aux tailles des points d'arrêt, et outrepassent les classes de grille cibles dans les appareils plus petits. Ainsi, l'application de toute classe .col-md- à un élément affectera non seulement son style sur les appareils moyens mais aussi sur les grands appareils si une classe .col-lg- n'est pas présente.

Examinez les exemples pour appliquer ces principes dans votre code.

Media queries

Nous utilisons les media queries suivantes dans nos fichiers Less pour créer les points d'arrêt essentiels de notre système de grille.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Nous étendons occasionnellement ces media queries pour inclure un max-width pour restreindre CSS à un ensemble réduit d'appareils.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Options de grille

Découvrez comment les aspects du système de grille de Bootstrap fonctionnent sur divers appareils dans un tableau pratique.

Appareils très petits Téléphones (<768px) Petits appareils Tablettes (≥768px) Appareils moyens Ordinateurs de bureau (≥992px) Grands appareils Ordinateurs de bureau (≥1200px)
Comportement de grille Horizontale en permanence D'abord réduite, horizontale au-dessus des points d'arrêt
Largeur du conteneur Aucune (automatique) 750px 970px 1170px
Préfixe de classe .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Largeur de colonne Automatique ~62px ~81px ~97px
Largeur de gouttière 30px (15px de chaque côté d'une colonne)
Intégrable Oui
Décalages Oui
Tri de colonnes Oui

Exemple : Réduit vers horizontal

Avec un seul jeu de classes de grille .col-md-*, vous pouvez créer un système de grille simple qui commence réduit sur les appareils mobiles et tablettes (la plage très petit à petit) avant de passer à l'horizontale sur les ordinateurs de bureau (taille moyenne). Placez les colonnes de grille dans n'importe quelle .row (ligne).

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Exemple : Conteneur fluide

Transformez toute disposition de grille de largeur fixe en une disposition pleine-largeur en remplaçant votre .container extérieur par un .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Exemple : Mobiles et ordinateurs de bureau

Vous ne souhaitez pas que vos colonnes restent empilées sur les appareils les plus petits ? Utilisez les classes de grille des appareils de taille très petite et moyenne en ajoutant .col-xs-* .col-md-* à vos colonnes. Consultez l'exemple suivant pour avoir une meilleure idée de comment cela fonctionne

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Exemple : Mobiles, tablettes, ordinateurs de bureau

Poursuivez l'exemple précédent en créant des dispositions encore plus dynamiques et puissantes avec les classes .col-sm-* des tablettes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Réinitialisations de colonnes réactives

Avec les quatre niveaux de grille disponibles, vous rencontrerez probablement des problèmes lorsque, à certains points d'arrêt, vos colonnes ne s'effacent pas bien, car une colonne est plus grande que l'autre. Pour résoudre ce problème, utilisez un mélange de .clearfix et de nos classes d'utilitaire réactives.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Décalage de colonnes

Déplacez des colonnes sur la droite avec les classes .col-md-offset-*. Ces classes augmentent la marge à gauche d'une colonne de * colonnes. Par exemple, .col-md-offset-4 déplace .col-md-4 de de quatre colonnes.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Intrégration de colonnes

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Tri de colonnes

Changez facilement l'ordre de nos colonnes de grille intégrées avec les classes de modificateur .col-md-push-* et .col-md-pull-*.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less mixins and variables

In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.

Variables

Les variables déterminent le nombre de colonnes, la largeur de gouttière et le point de la media query à partir duquel on commence à faire flotter les colonnes. Nous les utilisons pour générer les classes de grille prédéfinies documentées ci-dessus, ainsi que pour les mixins personnalisés répertoriés ci-dessous.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Les mixins sont utilisés conjointement avec les variables de grille pour générer du CSS sémantique pour les colonnes de grille individuelles.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Exemple d'utilisation

Vous pouvez modifier les variables avec vos propres valeurs personnalisées, ou simplement utiliser les mixins avec leurs valeurs par défaut. Voici un exemple d'utilisation des paramètres par défaut pour créer une disposition à deux colonnes avec un espace entre les deux.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Typographie

En-têtes

Tous les en-têtes HTML, de <h1> à <h6>, sont disponibles. Les classes de .h1 à .h6 sont également disponibles, ce qui vous sert lorsque vous souhaitez faire correspondre le style de police d'un en-tête mais vous souhaitez quand même conserver un affichage dans la ligne pour votre texte.

h1. En-tête Bootstrap

Semi-gras 36px

h2. En-tête Bootstrap

Semi-gras 30px

h3. En-tête Bootstrap

Semi-gras 24px

h4. En-tête Bootstrap

Semi-gras 18px
h5. En-tête Bootstrap
Semi-gras 14px
h6. En-tête Bootstrap
Semi-gras 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Créez du texte secondaire plus léger dans n'importe quel en-tête avec une balise <small> générique ou la classe .small.

h1. En-tête Bootstrap Texte secondaire

h2. En-tête Bootstrap Texte secondaire

h3. En-tête Bootstrap Texte secondaire

h4. En-tête Bootstrap Texte secondaire

h5. En-tête Bootstrap Texte secondaire
h6. En-tête Bootstrap Texte secondaire
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Texte du corps

La taille de police font-size globale par défaut de Bootstrap est 14px, avec une hauteur de ligne line-height de 1.428. Ceci est appliqué au <body> et à tous les paragraphes. De plus; les paragraphes <p> reçoivent une marge extérieure en bas qui est la moitié de leur hauteur de ligne calculée (10px par défaut)

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Texte d'introduction du corps

Mettez un paragraphe en valeur en ajoutant .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Créé avec LESS

L'échelle typographique se base sur deux variables LESS dans variables.less : @font-size-base et @line-height-base. La première est la taille de police de base utilisée globalement et la seconde est la hauteur de ligne de base. Nous utilisons ces variables et des fonctions mathématiques simples pour créer les marges, décalages et hauteurs de ligne de tous nos types et plus. Personnalisez-les et Bootstrap s'y adaptera.

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted text

For indicating additions to the document use the <ins> tag.

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Underlined text

To underline text use the <u> tag.

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Utilisez les balises de mise en valeur par défaut de HTML avec des styles légers.

Petit texte

Pour annuler la mise en valeur de lignes ou blocs de texte, utilisez la balise <small> pour configurer le texte à 85 % de la taille du parent. Les éléments d'en-tête reçoivent leur propre font-size pour les éléments <small> imbriqués.

Vous pouvez sinon utiliser un élément sur la ligne avec .small à la place de tout <small>.

Cette ligne du texte doit être traitée comme un texte en petits caractères.

<small>This line of text is meant to be treated as fine print.</small>

Gras

Pour mettre en valeur un extrait de texte avec un poids de police plus conséquent.

L'extrait de texte suivant est affiché comme un texte en gras.

<strong>rendered as bold text</strong>

Italique

Pour mettre en valeur un extrait de texte en italique.

L'extrait de texte suivant est affiché comme un texte en italique.

<em>rendered as italicized text</em>

Alterner les éléments

N'hésitez pas à utiliser <b> et <i> dans HTML5. <b> est conçu pour mettre en valeur des mots ou des phrases sans y attacher d'importance supplémentaire, alors que <i> est généralement utilisé pour les citations, les termes techniques, etc.

Classes d'alignement

Réalignez facilement les textes des composants avec les classes d'alignement de texte.

Texte aligné à gauche

Texte centré

Texte aligné à droite.

Texte justifié.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformation classes

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abréviations

Une implémentation stylisée de l'élément HTML <abbr> pour les abréviations et acronymes pour afficher leur version complète lorsque l'utilisateur passe la souris dessus. Les abréviations avec un attribut title sont soulignées avec un trait en pointillés, et un curseur d'aide s'affiche lorsque l'utilisateur passe la souris dessus pour proposer plus de contexte.

Abréviation de base

Pour afficher un texte en entier lorsque l'utilisateur s’attarde sur l’abréviation, ajoutez l'attribut title avec l'élément <abbr>.

Une abréviation du mot attribut est attr.

<abbr title="attribute">attr</abbr>

Initialisme

Ajoutez .initialism à une abréviation pour une taille de police légèrement plus petite.

HTML est la meilleure chose depuis le pain tranché.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Adresses

Les informations de contact présentes pour l'ancêtre le plus proche ou le document complet. Préservez le format en terminant toutes les lignes par <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nom complet
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Citations

Pour citer des blocs de contenu d'autres sources dans votre document.

Citation par défaut

Ajoutez <blockquote> autour de tout code HTML servant de citation. Pour les citations directes, nous conseillons un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Options de citation

Des changements de style et de contenu pour des variations simples sur un <blockquote> standard.

Nommer une source

Ajoutez la balise <footer> pour identifier la source. Englobez le nom du document source dans <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Titre de la source
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Affichages alternatifs

Ajoutez .blockquote-reverse pour une citation avec du contenu aligné à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Titre de la source
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listes

Non triée

Une liste d'éléments dont l'ordre n'est explicitement pas important.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Triée

Une liste d'éléments dont l'ordre est explicitement important.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Sans mise en forme

Supprime les list-style et la marge à gauche des éléments de liste (enfants directs uniquement). Ceci s'applique uniquement aux éléments de liste enfants directs, ce qui signifie que vous allez devoir aussi ajouter la classe pour toute liste imbriquée.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Sur la ligne

Placez tous les éléments de la liste sur une seule ligne avec display: inline-block; et un léger décalage.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Description

Une liste de tous les termes et de leurs descriptions associées.

Listes de description
Une liste de description est parfaite pour la définition des termes.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Description horizontale

Force les termes et descriptions de dans <dl> à s'aligner côte à côte. Commence réduite comme les <dl>s, mais elle s'étend en même temps que la barre de navigation.

Listes de description
Une liste de description est parfaite pour la définition des termes.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Troncature automatique

Les listes de description horizontales tronqueront les éléments trop longs pour rentrer dans la colonne gauche avec text-overflow. Sur les viewport plus étroits, la disposition empilée par défaut sera utilisée

Code

Sur la ligne

Englobe des extraits de code sur une ligne avec <code>.

Par exemple, <section> devrait être englobée en tant que texte sur la ligne.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

Utilisez <kbd> pour indiquer des données qui sont normalement saisies avec le clavier.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.

Bloc de base

Utilisez <pre> pour plusieurs lignes de code. Veillez à utiliser le caractère d'échappement pour les crochets du code pour un rendu correct.

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Vous pouvez, de façon optionnelle, ajouter la classe .pre-scrollable, qui définira une max-height de 350px et fournira une barre de défilement vertical.

Variables

For indicating variables use the <var> tag.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tableaux

Exemple simple

Pour une mise en forme de base (léger décalage et diviseurs horizontaux), ajoutez la classe de base .table à tout <table>. Ceci peut sembler extrêmement répétitif, mais compte tenu du développement de l'utilisation des tableaux pour d'autres plugins, comme des calendriers ou sélecteurs de dates, nous avons choisi d'isoler nos styles de tableau personnalisés.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Lignes rayées

Utilisez .table-striped pour ajouter des rayures zébrées à toute ligne de tableau à l'intérieur du <tbody>.

Compatibilité sur les différents navigateurs

Les tableaux rayés sont mis en forme avec le sélecteur CSS :nth-child, qui n'est pas disponible dans Internet Explorer 8.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Tableau à bordure

Ajoutez .table-bordered pour encadrer les quatre côtés du tableau et des cellules.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Lignes survolées

Ajoutez .table-hover pour activer l'état de survol de la souris sur les lignes de tableau à l'intérieur du <tbody>.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

Tableau condensé

Ajoutez .table-condensed pour rendre les tableaux plus compacts en divisant par deux la marge intérieure des cellules.

# Prénom Nom de famille Nom d'utilisateur
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

Classes contextuelles

Utilisez les classes contextuelles pour colorer des lignes ou cellules individuelles de tableaux.

Classe Description
.active Applique la couleur de passage de souris à une ligne ou une cellule particulière
.success Indique une action positive ou réussie
.info Indique un changement ou une action informatifs neutres.
.warning Indique un avertissement pouvant nécessiter une attention
.danger Indique une action dangereuse ou potentiellement négative
# En-tête de colonne En-tête de colonne En-tête de colonne
1 Contenu de colonne Contenu de colonne Contenu de colonne
2 Contenu de colonne Contenu de colonne Contenu de colonne
3 Contenu de colonne Contenu de colonne Contenu de colonne
4 Contenu de colonne Contenu de colonne Contenu de colonne
5 Contenu de colonne Contenu de colonne Contenu de colonne
6 Contenu de colonne Contenu de colonne Contenu de colonne
7 Contenu de colonne Contenu de colonne Contenu de colonne
8 Contenu de colonne Contenu de colonne Contenu de colonne
9 Contenu de colonne Contenu de colonne Contenu de colonne
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Tableaux réactifs

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

For more information, read this Stack Overflow answer.

# En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau
1 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
2 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
3 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
# En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau En-tête de tableau
1 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
2 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
3 Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau Cellule de tableau
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Formulaires

Exemple simple

Les commandes de formulaire individuelles reçoivent automatiquement une mise en forme globale. Tous les éléments textuels <input>, <textarea> et <select> avec .form-control sont définis sur width: 100%; par défaut. Englobez les libellés et commandes dans .form-group pour un espacement optimal.

Exemple : Texte d'aide du bloc ici.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Ne pas mélanger les groupes de formulaires avec les groupes de saisie

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Formulaire sur une ligne

Ajoutez .form-inline à votre <form> pour des commandes alignées à gauche et sur une ligne.Ceci s'applique seulement aux formulaires dans les viewports ayant une largeur minimale de 768px.

Requiert des largeurs personnalisées

Les entrées, sélections et zones textuelles ont une largeur par défaut de 100 % dans Bootstrap. Pour utiliser le formulaire sur une ligne, vous allez devoir définir une largeur sur les commandes de formulaire utilisées dedans.

Toujours ajouter des libellés

Les lecteurs d'écran auront du mal avec vos formulaires si vous n'ajoutez pas de libellé pour chaque entrée. Pour ces formulaires sur une ligne, vous pouvez masquer les libellés avec la classe .sr-only.

@
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Fomulaire horizontal

Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les libellés et les groupes de commandes de formulaire dans une disposition horizontale en ajoutant .form-horizontal au formulaire. Cela modifie les éléments .form-groups pour qu'ils se comportent comme des lignes de grilles ; .row n'est donc plus nécessaire.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Commandes prises en charge

Exemples de commandes de formulaire standard prises en charge dans un exemple de disposition de formulaire.

Entrées

Les champs d'entrée basés sur du texte et commandes de formulaire les plus communs. Comprend la prise en charge de tous les types HTML5 : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel et color.

Déclaration de type requise

Les entrées ne seront pleinement mises en forme que si leur type est bien déclaré.

<input type="text" class="form-control" placeholder="Text input">

Groupes de saisie

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Zone textuelle

Commande de formulaire prenant en charge plusieurs lignes de texte. Modifiez l'attribut rows selon vos besoins.

<textarea class="form-control" rows="3"></textarea>

Cases à cocher et boutons radio

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

Par défaut (réduit)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkboxes and radios

Utilisez les classes .checkbox-inline ou .radio-inline sur une série de cases à cocher ou de boutons radio pour que les commandes s'affichent sur la même ligne.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Sélection

Utilisez l'option par défaut, ou ajoutez multiple pour afficher plusieurs options à la fois.


<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Commande statique

Lorsque vous avez besoin de placer du texte non formaté à côté d’un libellé au sein d'un formulaire horizontal, utilisez la classe .form-control-static sur un <p>.

courriel@exemple.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Centrage sur entrée

Nous avons supprimé les styles outline par défaut pour certaines commandes de formulaire et appliqué un box-shadow à sa place pour :focus.

Démonstration de l'état de :focus

L'entrée de l'exemple ci-dessus utilise des mises en forme personnalisées dans notre documentation pour montrer l'état de :focus sur un .form-control

Entrées désactivées

Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Jeux de champs désactivés

Ajoutez l'attribut disabled à un <fieldset> pour désactiver toutes les commandes du <fieldset> en même temps.

Caveat about link functionality of <a>

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Compatibilité sur les différents navigateurs

Si Bootstrap appliquera ces styles dans tous les navigateurs, Internet Explorer 9 et ses versions antérieures ne prennent pas en charge l'attribut disabled sur un <fieldset>. Utilisez du JavaScript pour désactiver le jeu de champs sur ces navigateurs.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

États de validation

Bootstrap propose des styles de validation pour les états d'erreur, d'avertissement et de réussite sur les commandes de formulaire. Pour les utiliser, ajoutez .has-warning, .has-error ou .has-success à l'élément parent. Tout .control-label, .form-control, et .help-block de l'élément recevront les styles de validation.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

Avec des icônes supplémentaires

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Entrée réussie class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Optional icons in horizontal and inline forms

Entrée réussie class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
Entrée réussie class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Optional icons with hidden .sr-only labels

For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Control sizing

Dimensionnement de commande

Définissez les hauteurs avec des classes comme .input-lg et les largeurs avec des classes de colonnes de grille comme .col-lg-*.

Choix de la hauteur

Créez des commandes de formulaire plus ou moins grandes pour correspondre aux tailles des boutons.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

<form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Column sizing

Dimensions des colonnes

Englobe les entrées dans des colonnes de grille, ou tout élément parent personnalisé, pour appliquer facilement les largeurs souhaitées.
<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Help text

Texte d'aide

Texte d'aide de niveau bloc pour les commandes de formulaire.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Boutons

Options

Utilisez n'importe quelle classe de bouton disponible pour créer rapidement un bouton mis en forme.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Tailles

Vous aimez les petits ou les gros boutons ? Ajoutez .btn-lg, .btn-sm ou .btn-xs pour des tailles supplémentaires.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Créez des boutons de niveau bloc (ceux qui s'étendent sur la largeur complète d'un parent) en ajoutant .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

État actif

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state programmatically.

Élément bouton

Vous n'avez pas besoin d'ajouter :active vu que c'est pseudo-classe, mais si devez forcer le même aspect, allez-y et ajoutez .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Élément ancre

Ajoute la classe .active aux boutons <a>.

Lien primaire Lien

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

État désactivé

Faites en sorte que les boutons semblent non cliquables en estompant leurs couleurs de 50 %.

Élément bouton

Ajoutez l'attribut disabled aux boutons <button>.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibilité sur les différents navigateurs

Si vous ajoutez l'attribut disabled à un <button>, Internet Explorer 9 et ses versions antérieures afficheront le texte en gris avec une vilaine ombre, et nous ne pouvons pas résoudre ce problème.

Élément ancre

Ajoutez la classe .disabled aux boutons <a>.

Lien primaire Lien

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Nous utilisons ici .disabled comme classe d'utilitaires, similaire à la classe commune .active, aucun préfixe n'est donc requis.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Utilisation spécifique au contexte

Bien que les classes de boutons peuvent être utilisées dans les éléments <a> et <button>, seulement les éléments <button> sont pris en charge par nos composants de navigation et de barre de navigation.

Balises de boutons

Utilisez les classes de boutons sur un élément <a>, <button> ou <input>.

Lien
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Rendu sur les différents navigateurs

Nous vous conseillons, en tant que meilleure pratique, d'utiliser l'élément <button> aussi souvent que possible pour assurer un rendu identique sur tous les navigateurs.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Images

Images réactives

Dans Bootstrap 3, les images peuvent être rendues réactives grâce à l'ajout de la classe .img-responsive. Ceci applique max-width: 100%; et height: auto; à l'image afin qu'elle soit bien dimensionnée par rapport à l'élément père.

<img src="..." class="img-responsive" alt="Responsive image">

Formes d'image

Ajoutez des classes à un élément <img> pour mettre en forme des images facilement dans n'importe quel projet.

Compatibilité sur les différents navigateurs

Gardez en tête qu'Internet Explorer 8 ne prend pas en charge les coins arrondis.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Classes d'aide

Couleurs contextuelles

Exprimez un sens à travers les couleurs avec une poignée de classes d'utilité de mise en valeur. Celles-ci peuvent aussi être appliquées aux liens et elles devient sombres lors du survol de la souris exactement comme les styles par défaut des liens.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Traiter la spécificité

Parfois, les classes de mise en valeur ne peuvent pas être appliquées à cause de la spécificité d'un autre sélecteur. Dans la plupart des cas, il suffit d'englober votre texte par un <span> avec la classe.

Arrière-plans contextuels

Similaires aux classes contextuelles de couleur de texte, ils définissent facilement l'arrière plan d'un élément à n'importe quelle classe contextuelle. Les composants ancres deviendront sombres lors du passe de la souris, exactement comme pour les classes de texte.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Traiter la spécificité

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Icône Fermer

Utilisez l'icône Fermer générique pour révoquer du contenu comme les fenêtres modales ou les alertes.

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

Curseurs de saisie

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

Quick floats

Fait flotter un élément vers la gauche ou la droite avec une classe. !important est inclus pour éviter les problèmes de spécificité. Les classes peuvent aussi être utilisées comme mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Pas pour l'utilisation dans les barres de navigation

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Centrer les blocs de contenu

Définir un élément à display: block et centrer via margin. Disponible comme mixin et classe.

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a Mixin
.element {
  .clearfix();
}

Dévoiler ou masquer du contenu

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

De plus, .invisible peut être utilisée pour basculer seulement la visibilité d'un élément, ce qui signifie que son display n'est pas modifié et que l'élément peut encore affecter le flux du document.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Remplacement d'image

Utilise la classe ou le mixin .text-hide pour aider à remplacer le contenu textuel d'un élément avec une image d'arrière plan.

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

Utilitaires réactifs

Pour un développement mobile convivial plus rapide, utilisez ces classes d'utilitaires pour afficher et masquer du contenu en fonction des appareils par media query. Des classes d'utilitaires pour faire basculer le contenu lors de l'impression sont également fournies.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Classes disponibles

Utilisez une classe ou une combinaison des classes disponibles pour basculer le contenu à travers les points d'arrêt viewport.

Appareils très petits Téléphones (<768px) Petits appareils Tablettes (≥768px) Appareils moyens Ordinateurs de bureau (≥992px) Grands appareils Ordinateurs de bureau (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Classes d'impression

Similaires aux classes réactives ordinaires, utilisez-les pour basculer le contenu pour impression.

Classes Navigateur Impression
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Tests unitaires

Redimensionnez votre navigateur ou chargez-le sur différents appareils pour tester les classes d'utilitaires réactifs.

Visible sur...

Les encoches vertes indiques que l'élément est visible sur votre viewport actuel.

✔ Visible sur très petit
✔ Visible sur petit
Moyen ✔ Visible sur moyen
✔ Visible sur grand
✔ Visible sur très petit et petit
✔ Visible sur moyen et grand
✔ Visible sur très petit et moyen
✔ Visible sur petit et grand
✔ Visible sur très petit et grand
✔ Visible sur petit et moyen

Masqué sur...

Ici, les encoches vertes indiquent aussi que l'élément est masqué sur votre viewport actuel.

✔ Caché sur très petit
✔ Caché sur petit
Moyen ✔ Caché sur moyen
✔ Caché sur grand
✔ Caché sur très petit et petit
✔ Caché sur moyen et grand
✔ Caché sur très petit et moyen
✔ Caché sur petit et grand
✔ Caché sur très petit et grand
✔ Caché sur petit et moyen

Utilisation du Less

Le CSS de Bootstrap est conçu autour de Less, un préprocesseur avec des fonctionnalités supplémentaires telles que les variables, les mixins et les fonctions de compilation du CSS. Ceux qui souhaitent utiliser les fichiers sources de Less au lieu de nos fichiers CSS compilés peuvent utiliser les nombreux variables et mixins que nous utilisons à travers le framework.

Grid variables and mixins are covered within the Grid system section.

Compiler Bootstrap

Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

Les outils de compilation tiers peuvent fonctionner avec Bootstrap, mais ils ne sont pas pris en charge par notre équipe principale.

Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Couleurs

Faites usage de deux schémas de couleurs : niveau de gris et sémantique. Les couleurs en mode niveau de gris fournissent un accès rapide aux nuances de noir généralement utilisées tandis que les couleurs sémantiques incluent diverses couleurs assignées à des valeurs contextuels significatifs.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Utilisez n'importe quelle de ces variables de couleur directement ou affectez-les à des variables plus significatives pour votre projet.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Échafaudage

Une poignée de variables pour personnaliser rapidement des éléments clés de la structure de votre site.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Mettez facilement en forme vos liens avec la couleur adaptée avec une seule valeur.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Typographie

Définissez facilement votre type face, taille de texte, leading et plus encore avec quelques variables rapides. Bootstrap utilise aussi ceux-ci pour fournir des mixins typographiques.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icônes

Deux variables rapides pour personnaliser l'emplacement et le nom de fichiers de vos icônes.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Composants

Les composants à travers Bootstrap utilisent certaines variables par défaut pour définir des valeurs communes. Voici celles les plus généralement utilisées.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Mixins de vendeur

Les mixins de vendeur sont des mixins conçus pour prendre en charge plusieurs navigateurs en incluant tous les préfixes de vendeur pertinents dans votre CSS compilé.

Box-sizing

Réinitialisez le modèle de boîte de vos composants avec un seul mixin. Pour le contexte, lisez cet article utile créé par Mozilla.

The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Coins arrondis

Aujourd'hui tous les navigateurs modernes prennent en charge la propriété border-radius non-préfixée. Ainsi, il n'y a pas de mixin .border-radius(), mais Bootstrap inclut des raccourcis pour arrondir rapidement deux coins sur un côté particulier d'un objet.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Ombres de boîte

Si votre public cible utilisent les derniers et les meilleurs navigateurs et appareils, assurez-vous d'utiliser simplement la propriété box-shadow. Si vous avez besoin d'une prise en charge des appareils avec une ancienne version d'Android (antérieure à la version 4) et des appareils Apple iOS (version antérieure à iOS 5), utilisez le mixin obsolète pour choisir le préfixe -webkit requis.

Le mixin est obsolète à partir de la version 3.1.0, vu que Bootstrap ne prend officiellement pas en charge les plateformes obsolètes qui ne prennent pas en charge la propriété standard. Pour préserver la rétrocompatibilité, Bootstrap continuera d'utiliser le mixin en interne jusqu'à la version 4 de Bootstrap.

Assurez-vous d'utiliser les couleurs rgba() dans vos ombres de boîte afin qu'ils s’incrustent de façon aussi transparente que possible dans les arrière-plans.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transitions

Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformations

Faites tourner, dimensionnez, translatez (déplacez) ou inclinez n'importe quel objet.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animations

Un seule mixin pour utiliser toutes les propriétés d'animation de CSS3 dans une seule déclaration et d'autres mixins pour des propriétés individuelles.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacité

Définir l'opacité pour tous les navigateurs et fournir un retour de filter pour IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Texte de marque substitutive

Fournir du contexte pour les commandes de formulaire à l'intérieur de chaque champ.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Colonnes

Générez des colonnes avec du CSS à l'intérieur d'un seul élément.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Dégradés

Transformez facilement toutes deux couleurs en un dégradé d'arrière plan. Évoluez encore plus et définissez une direction, utilisez trois couleurs, ou utilisez un dégradé radial. Avec un seul mixin, vous obtenez toutes les syntaxes prédéfinies dont vous avez besoin.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Vous pouvez également spécifier l'angle d'un dégradé linéaire composé de deux couleurs :

#gradient > .directional(#333; #000; 45deg);

Si vous avez besoin d'un gradient de type enseigne de barbier, c'est facile. Spécifiez simplement une seule couleur et nous recouvrerons d'une bande blanche translucide.

#gradient > .striped(#333; 45deg);

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Attention ! Si vous devez retirer un dégradé, veillez à retirer tout filter spécifique à IE que vous avez pu ajouter. Vous pouvez faire ceci en utilisant le mixin .reset-filter() avec background-image: none;.

Mixins d'utilitaire

Les mixins d'utilitaire sont des mixins qui combinent des propriétaires CSS qui, autrement, ne sont pas liées pour atteindre un but particulier ou réaliser une tâche spécifique.

Clearfix

N'ajoutez pas de class="clearfix" à n'importe quel élément mais ajoutez plutôt le mixin .clearfix() le cas échéant. Utilise le micro clearfix créé par Nicolas Gallager.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Centrage horizontal

Centrez rapidement n'importe quel élément à l'intérieur de son parent. Nécessite width ou max-width pour être défini.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Assistants de dimensionnement

Spécifier plus facilement les dimensions d'un objet.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Zones de texte redimensionnables

Configurez facilement les options de redimensionnement pour n'importe quelle zone de texte, ou toute autre élément. Prend par défaut le comportement normal du navigateur (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Tronquer du texte

Tronquez facilement du texte avec une ellipse avec un seul mixin. Nécessite que l'élément soit au niveau block ou inline-block.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Images Retina

Spécifiez deux chemins d'image et les dimensions d'image de @1x, et Bootstrap fournira une media query @2x. Si vous avez plusieurs images à fournir, pensez à écrire le CSS de votre image retina manuellement dans une seule media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Utilisation du Sass

Bien que Bootstrap est conçu autour de Less, il dispose aussi d'un portage Sass officiel. Nous le maintenons dans un référentiel GitHub séparé et nous gérons les mises à jour avec un script de conversion.

Ce qui est inclus

Vu que le portage Sass a un référentiel séparé et qu'il s'adresse à un public légèrement différent, les contenus du projet diffèrent considérablement du projet Bootstrap principal. Ceci assure que le portage Sass est compatible avec un maximum de systèmes Sass.

Chemin Description
lib/ Code Ruby gem (configuration Saas, intégrations Rails et Compass)
tasks/ Scripts de convertisseur (transformation de Less en Sass)
test/ Tests de compilation
templates/ Manifeste des packages de Compass
vendor/assets/ Fichiers Sass, Javascript et polices
Rakefile Tâches internes, telles que ratisser et convertir

Visitez le référentiel du portage Sass sur GitHub pour voir ces fichiers en action.

Installation

Pour obtenir des informations sur la façon d'installer et utiliser Bootstrap pour Sass, consultez le Lisez-moi du référentiel sur GitHub. C'est la source la plus mise à jour et il contient des informations sur l'utilisation avec Rails, Compass et les projets Sass standard.

Bootstrap pour Sass