Découvrez les éléments clés de l'infrastructure de Bootstrap, y compris notre approche pour un développement Web meilleur, plus rapide et plus solide.

Type de document HTML5

Bootstrap utilise certains éléments HTML et propriétés CSS qui nécessitent l'utilisation du doctype HTML5. Incluez-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 facultatifs adaptés aux mobiles pour les aspects clés 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 mobiles facultatifs, ils sont intégrés directement dans le noyau. En fait, Bootstrap est d'abord mobile . Les premiers styles mobiles peuvent être trouvés dans toute la bibliothèque plutôt que dans des fichiers séparés.

Pour garantir un rendu et un zoom tactile corrects, ajoutez la balise méta de la fenêtre d'affichage à votre fichier <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 de la fenêtre d'affichage. Cela désactive le zoom, ce qui signifie que les utilisateurs ne peuvent que faire défiler, et donne à votre site l'impression d'être un peu plus comme une application native. Dans l'ensemble, nous ne le recommandons pas sur tous les sites, alors soyez prudent !

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

Typographie et liens

Bootstrap définit les styles d'affichage, de typographie et de lien globaux de base. Plus précisément, nous :

Fixé background-color: #fff;sur lebody
Utilisez les attributs @font-family-base, @font-size-baseet @line-height-basecomme base typographique
Définissez la couleur globale du lien via @link-coloret appliquez le soulignement du lien uniquement sur:hover

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

Normaliser.css

Pour un meilleur rendu multi-navigateurs, nous utilisons Normalize.css , un projet de Nicolas Gallagher et Jonathan Neal .

Conteneurs

Bootstrap nécessite un élément conteneur pour envelopper le contenu du site et héberger notre système de grille. Vous pouvez choisir l'un des deux conteneurs à utiliser dans vos projets. Notez qu'en raison de paddinget de plus, aucun conteneur n'est emboîtable.

À utiliser .containerpour un conteneur réactif à largeur fixe.

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

À utiliser .container-fluidpour un conteneur pleine largeur, couvrant toute la largeur de votre fenêtre.

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

Bootstrap comprend un premier système de grille fluide réactif et mobile qui s'adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille de l'appareil ou de la fenêtre d'affichage augmente. Il comprend des classes prédéfinies pour des options de mise en page faciles, ainsi que de puissants mixins pour générer des mises en page plus sémantiques .

Introduction

Les systèmes de grille sont utilisés pour créer des mises en page à travers une série de lignes et de colonnes qui hébergent votre contenu. Voici comment fonctionne le système de grille Bootstrap :

Les rangées doivent être placées dans une .container(largeur fixe) ou .container-fluid(pleine largeur) pour un alignement et un rembourrage corrects.
Utilisez des rangées pour créer des groupes horizontaux de colonnes.
Le contenu doit être placé dans des colonnes, et seules les colonnes peuvent être des enfants immédiats des lignes.
Des classes de grille prédéfinies telles que .rowet .col-xs-4sont disponibles pour créer rapidement des dispositions de grille. Moins de mixins peuvent également être utilisés pour des mises en page plus sémantiques.
Les colonnes créent des gouttières (espaces entre le contenu des colonnes) via padding. Ce rembourrage est décalé en lignes pour la première et la dernière colonne via une marge négative sur .rows.
La marge négative est la raison pour laquelle les exemples ci-dessous sont en retrait. C'est ainsi que le contenu des colonnes de la grille est aligné avec le contenu hors grille.
Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, trois colonnes égales utiliseraient trois .col-xs-4.
Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une unité, enveloppé sur une nouvelle ligne.
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 remplacent les classes de grille ciblées sur les appareils plus petits. Par conséquent, par exemple, appliquer n'importe quelle .col-md-*classe à un élément n'affectera pas seulement son style sur les appareils moyens mais aussi sur les grands appareils si une .col-lg-*classe n'est pas présente.

Regardez les exemples pour appliquer ces principes à votre code.

Requêtes médias

Nous utilisons les requêtes multimédias suivantes dans nos fichiers Less pour créer les points d'arrêt clés dans 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 développons occasionnellement ces requêtes multimédias pour inclure un max-widthpour limiter le CSS à un ensemble plus restreint 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 Bootstrap fonctionnent sur plusieurs appareils avec un tableau pratique.

	Très petits appareils Téléphones (<768px)	Petits appareils Tablettes (≥768px)	Appareils moyens Ordinateurs de bureau (≥992px)	Grands appareils Ordinateurs de bureau (≥1200px)
Comportement de la grille	Horizontale en tout temps	Réduit pour commencer, horizontal au-dessus des points d'arrêt
Largeur du conteneur	Aucun (auto)	750px	970px	1170px
Préfixe de classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de colonnes	12
Largeur de colonne	Auto	~62px	~81px	~97px
Largeur de gouttière	30px (15px de chaque côté d'une colonne)
Emboîtable	Oui
Décalages	Oui
Ordre des colonnes	Oui

Exemple : empilé à l'horizontale

À l' aide d'un seul ensemble de .col-md-*classes de grille, vous pouvez créer un système de grille de base qui commence par être empilé sur les appareils mobiles et les tablettes (la gamme extra petite à petite) avant de devenir horizontal sur les appareils de bureau (moyens). Placez des colonnes de grille dans n'importe quel fichier .row.

.col-md-1

.col-md-8

.col-md-4

.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 : réservoir de liquide

Transformez n'importe quelle disposition de grille à largeur fixe en une disposition pleine largeur en changeant votre plus externe .containeren .container-fluid.

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

Exemple : mobile et ordinateur de bureau

Vous ne voulez pas que vos colonnes s'empilent simplement dans des appareils plus petits ? Utilisez les classes de grille d'appareils extra petits et moyens en ajoutant .col-xs-* .col-md-*à vos colonnes. Voir l'exemple ci-dessous pour une meilleure idée de la façon dont tout cela fonctionne.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.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 : Mobile, tablette, ordinateur de bureau

Tirez parti de l'exemple précédent en créant des mises en page encore plus dynamiques et puissantes avec des .col-sm-*classes de tablette.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-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>

Exemple : retour à la ligne de colonne

Si plus de 12 colonnes sont placées dans une seule ligne, chaque groupe de colonnes supplémentaires sera, comme une unité, enveloppé sur une nouvelle ligne.

.col-xs-9

.col-xs-4
Puisque 9 + 4 = 13 > 12, cette div à 4 colonnes est enveloppée sur une nouvelle ligne comme une unité contiguë.

.col-xs-6
Les colonnes suivantes continuent le long de la nouvelle ligne.

<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 colonne réactives

Avec les quatre niveaux de grilles disponibles, vous êtes obligé de rencontrer des problèmes où, à certains points d'arrêt, vos colonnes ne s'effacent pas tout à fait correctement car l'une est plus haute que l'autre. Pour résoudre ce problème, utilisez une combinaison de a .clearfixet de nos classes utilitaires réactives .

.col-xs-6 .col-sm-3
Redimensionnez votre fenêtre ou consultez-la sur votre téléphone pour un exemple.

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

En plus de l'effacement des colonnes aux points d'arrêt réactifs, vous devrez peut-être réinitialiser les décalages, les poussées ou les tractions . Voyez ceci en action dans l'exemple de grille .

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

Colonnes de décalage

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

.col-md-4

.col-md-4 .col-md-offset-4

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

Vous pouvez également remplacer les décalages des niveaux de grille inférieurs avec des .col-*-offset-0classes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Colonnes imbriquées

Pour imbriquer votre contenu avec la grille par défaut, ajoutez un nouveau .rowet un ensemble de colonnes dans une colonne .col-sm-*existante . .col-sm-*Les lignes imbriquées doivent inclure un ensemble de colonnes qui totalisent jusqu'à 12 colonnes ou moins (il n'est pas nécessaire que vous utilisiez les 12 colonnes disponibles).

Niveau 1 : .col-sm-9

Niveau 2 : .col-xs-8 .col-sm-6

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

Ordre des colonnes

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

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

Moins de mixins et de variables

En plus des classes de grille prédéfinies pour des mises en page rapides, Bootstrap inclut Less variables et mixins pour générer rapidement vos propres mises en page sémantiques simples.

variables

Les variables déterminent le nombre de colonnes, la largeur de la gouttière et le point de requête multimédia auquel commencer les colonnes flottantes. 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;

Mélanges

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 mise en page à 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>

Rubriques

Tous les titres HTML, <h1>à <h6>, sont disponibles. .h1à travers .h6les classes sont également disponibles, lorsque vous souhaitez faire correspondre le style de police d'un titre mais que vous souhaitez toujours que votre texte soit affiché en ligne.

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 un texte secondaire plus léger dans n'importe quel titre avec une <small>balise générique ou la .smallclasse.

h1. Titre bootstrap Texte secondaire

h2. Titre bootstrap Texte secondaire

h3. Titre bootstrap Texte secondaire

h4. Titre bootstrap Texte secondaire

h5. Titre bootstrap Texte secondaire

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

Corps du texte

La valeur globale par défaut de Bootstrap font-sizeest 14px , avec un line-heightde 1.428 . Ceci s'applique aux <body>et à tous les paragraphes. De plus, <p>(paragraphes) reçoivent une marge inférieure de 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.

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

<p>...</p>

Copie du corps principal

Faites ressortir un paragraphe en ajoutant .lead.

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

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

Construit avec moins

L'échelle typographique est basée sur deux variables Less dans variables.less : @font-size-baseet @line-height-base. Le premier est la taille de police de base utilisée partout et le second est la hauteur de ligne de base. Nous utilisons ces variables et quelques calculs simples pour créer les marges, les rembourrages et les hauteurs de ligne de tous nos types et plus encore. Personnalisez-les et Bootstrap s'adapte.

Éléments de texte en ligne

Texte marqué

Pour mettre en évidence une suite de texte en raison de sa pertinence dans un autre contexte, utilisez la <mark>balise.

Vous pouvez utiliser la balise de marque poursoulignertexte.

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

Texte supprimé

Pour indiquer les blocs de texte qui ont été supprimés, utilisez la <del>balise.

~~Cette ligne de texte est destinée à être traitée comme du texte supprimé.~~

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

Texte barré

Pour indiquer des blocs de texte qui ne sont plus pertinents, utilisez la <s>balise.

~~Cette ligne de texte est destinée à être traitée comme n'étant plus exacte.~~

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

Texte inséré

Pour indiquer des ajouts au document, utilisez la <ins>balise.

Cette ligne de texte est destinée à être traitée comme un ajout au document.

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

Texte souligné

Pour souligner le texte, utilisez la <u>balise.

Cette ligne de texte sera rendue comme soulignée

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

Utilisez les balises d'emphase par défaut de HTML avec des styles légers.

Petit texte

Pour désaccentuer des lignes ou des blocs de texte, utilisez la <small>balise pour définir le texte à 85 % de la taille du parent. Les éléments d'en-tête reçoivent le leur pour les éléments font-sizeimbriqués .<small>

Vous pouvez également utiliser un élément en ligne avec .smallà la place de n'importe quel <small>.

Cette ligne de texte doit être traitée comme des petits caractères.

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

Audacieux

Pour mettre en valeur un extrait de texte avec un poids de police plus lourd.

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

<strong>rendered as bold text</strong>

Italique

Pour mettre en évidence un extrait de texte en italique.

L'extrait de texte suivant est rendu sous forme de texte en italique .

<em>rendered as italicized text</em>

Éléments alternatifs

N'hésitez pas à utiliser <b>et <i>en HTML5. <b>est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire, tandis qu'il <i>est principalement destiné à la voix, aux termes techniques, etc.

Cours d'alignement

Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte.

Texte aligné à gauche.

Texte aligné au centre.

Texte aligné à droite.

Texte justifié.

Pas de texte d'habillage.

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

Cours de transformation

Transformez le texte en composants avec des classes de capitalisation de texte.

Texte en minuscule.

Texte en majuscule.

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

Abréviations

Implémentation stylisée de l'élément HTML <abbr>pour les abréviations et les acronymes pour afficher la version étendue au survol. Les abréviations avec un titleattribut ont une bordure inférieure en pointillé clair et un curseur d'aide au survol, fournissant un contexte supplémentaire au survol et aux utilisateurs de technologies d'assistance.

Abréviation de base

Une abréviation du mot attribut est attr .

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

Initialisme

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

HTML est la meilleure chose depuis le pain en tranches.

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

Adresses

Présentez les coordonnées de l'ancêtre le plus proche ou de l'ensemble de l'œuvre. Préservez la mise en forme en terminant toutes les lignes par <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103 Téléphone
: (123) 456-7890

Nom complet
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Citations en bloc

Pour citer des blocs de contenu provenant d'une autre source dans votre document.

Citation par défaut

Enveloppez <blockquote>n'importe quel HTML comme citation. Pour les guillemets droits, nous recommandons 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 en bloc

Changements de style et de contenu pour de simples variations par rapport à une norme <blockquote>.

Nommer une source

Ajoutez un <footer>pour identifier la source. Enveloppez le nom du travail source dans <cite>.

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

Quelqu'un de célèbre dans le 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

Ajouter .blockquote-reversepour un blockquote avec un contenu aligné à droite.

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

Quelqu'un de célèbre dans le titre de la source

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listes

Non ordonné

Une liste d'éléments dans lesquels l'ordre n'a pas d' importance explicite.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
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>

Commandé

Une liste d'éléments dans lesquels l'ordre importe explicitement.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Sans style

Supprimez la marge par défaut list-styleet la marge de gauche des éléments de liste (enfants immédiats uniquement). Cela s'applique uniquement aux éléments de liste enfants immédiats , ce qui signifie que vous devrez également ajouter la classe pour toutes les listes imbriquées.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
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>

En ligne

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

La description

Une liste de termes avec leurs descriptions associées.

Listes de descriptions: Une liste de description est parfaite pour définir les termes.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida et eget metus.
Porte Malesuada: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Description horizontale

Alignez les termes et les descriptions <dl>côte à côte. Commence par être empilé comme les <dl>s par défaut, mais lorsque la barre de navigation s'agrandit, il en va de même.

Listes de descriptions: Une liste de description est parfaite pour définir les termes.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida et eget metus.
Porte Malesuada: 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 termes trop longs pour tenir dans la colonne de gauche avec text-overflow. Dans les fenêtres plus étroites, elles adopteront la disposition empilée par défaut.

En ligne

Enveloppez des extraits de code en ligne avec <code>.

Par exemple, <section>doit être enveloppé en ligne.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Entrée utilisateur

Utilisez le <kbd>pour indiquer l'entrée qui est généralement saisie au clavier.

Pour changer de répertoire, tapez cdsuivi du nom du répertoire.
Pour modifier les paramètres, appuyez sur ctrl + ,

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

Bloc de base

À utiliser <pre>pour plusieurs lignes de code. Assurez-vous d'échapper tous les crochets angulaires dans le code pour un rendu correct.

<p>Exemple de texte ici...</p>

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

Vous pouvez éventuellement ajouter la .pre-scrollableclasse, qui définira une hauteur maximale de 350px et fournira une barre de défilement sur l'axe y.

variables

Pour indiquer les variables, utilisez la <var>balise.

y = m x + b

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

Exemple de sortie

Pour indiquer la sortie de l'échantillon de blocs d'un programme, utilisez la <samp>balise.

Ce texte est destiné à être traité comme un exemple de sortie d'un programme informatique.

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

Exemple de base

Pour un style de base (remplissage léger et séparateurs horizontaux uniquement), ajoutez la classe de base .tableà n'importe quel fichier <table>. Cela peut sembler super redondant, mais étant donné l'utilisation généralisée des tableaux pour d'autres plugins comme les calendriers et les sélecteurs de dates, nous avons choisi d'isoler nos styles de tableau personnalisés.

Légende facultative du tableau.
#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class="table">
  ...
</table>

Rangées rayées

Utilisez .table-stripedpour ajouter des rayures zébrées à n'importe quelle ligne de tableau dans le fichier <tbody>.

Compatibilité entre navigateurs

Les tableaux rayés sont stylisés via le :nth-childsélecteur CSS, qui n'est pas disponible dans Internet Explorer 8.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class="table table-striped">
  ...
</table>

Tableau bordé

Ajoutez .table-bordereddes bordures sur tous les côtés du tableau et des cellules.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class="table table-bordered">
  ...
</table>

Survoler les lignes

Ajoutez .table-hoverpour activer un état de survol sur les lignes de tableau dans un fichier <tbody>.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

<table class="table table-hover">
  ...
</table>

Tableau condensé

Ajoutez .table-condensedpour rendre les tableaux plus compacts en coupant de moitié le rembourrage des cellules.

#	Prénom	Nom de famille	Nom d'utilisateur
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

<table class="table table-condensed">
  ...
</table>

Classes contextuelles

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

Classer	La description
`.active`	Applique la couleur de survol à une ligne ou une cellule particulière
`.success`	Indique une action réussie ou positive
`.info`	Indique un changement informatif neutre ou une action
`.warning`	Indique un avertissement qui pourrait nécessiter votre 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 la colonne	Contenu de la colonne	Contenu de la colonne
2	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
3	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
4	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
5	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
6	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
sept	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
8	Contenu de la colonne	Contenu de la colonne	Contenu de la colonne
9	Contenu de la colonne	Contenu de la colonne	Contenu de la 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>

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens à une ligne de tableau ou à une cellule individuelle ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (le texte visible dans la ligne/cellule du tableau concerné), soit incluses par d'autres moyens, tels que du texte supplémentaire masqué avec la .sr-onlyclasse.

Tableaux réactifs

Créez des tableaux réactifs en enveloppant n'importe lequel .tablepour .table-responsiveles faire défiler horizontalement sur de petits appareils (moins de 768 pixels). Lors de la visualisation sur quelque chose de plus grand que 768 pixels de large, vous ne verrez aucune différence dans ces tableaux.

Détourage vertical/troncature

Les tableaux réactifs utilisent overflow-y: hidden, qui coupe tout contenu qui dépasse les bords inférieur ou supérieur du tableau. En particulier, cela peut couper les menus déroulants et autres widgets tiers.

Firefox et les ensembles de champs

Firefox a un style de champs maladroit impliquant widthqui interfère avec la table réactive. Cela ne peut pas être remplacé sans un hack spécifique à Firefox que nous ne fournissons pas dans Bootstrap :

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

Pour plus d'informations, lisez cette réponse Stack Overflow .

#	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau
1	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
2	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
3	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau

#	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau
1	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
2	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
3	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Exemple de base

Les contrôles de formulaire individuels reçoivent automatiquement un style global. Tous les éléments textuels <input>, <textarea>et <select>avec .form-controlsont définis sur width: 100%;par défaut. Enveloppez les étiquettes et les commandes .form-grouppour un espacement optimal.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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 mélangez pas les groupes de formulaires avec les groupes d'entrée

Ne mélangez pas directement les groupes de formulaires avec les groupes d'entrée . Au lieu de cela, imbriquez le groupe d'entrée à l'intérieur du groupe de formulaires.

Formulaire en ligne

Ajoutez .form-inlineà votre formulaire (qui ne doit pas nécessairement être un <form>) pour les contrôles alignés à gauche et en ligne. Cela s'applique uniquement aux formulaires dans les fenêtres d'au moins 768 pixels de large.

Peut nécessiter des largeurs personnalisées

Les entrées et les sélections ont été width: 100%;appliquées par défaut dans Bootstrap. Dans les formulaires en ligne, nous réinitialisons cela pour width: auto;que plusieurs contrôles puissent résider sur la même ligne. Selon votre mise en page, des largeurs personnalisées supplémentaires peuvent être nécessaires.

Toujours ajouter des libellés

Les lecteurs d'écran auront des problèmes avec vos formulaires si vous n'incluez pas une étiquette pour chaque entrée. Pour ces formulaires en ligne, vous pouvez masquer les étiquettes à l'aide de la .sr-onlyclasse. Il existe d'autres méthodes alternatives pour fournir une étiquette pour les technologies d'assistance, telles que l' attribut aria-label, aria-labelledbyou . titleSi aucun de ces éléments n'est présent, les lecteurs d'écran peuvent recourir à l'utilisation de l' placeholderattribut, s'il est présent, mais notez que l'utilisation de placeholderen remplacement d'autres méthodes d'étiquetage n'est pas conseillée.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" 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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forme horizontale

Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale en ajoutant .form-horizontalau formulaire (qui ne doit pas nécessairement être un <form>). Cela change .form-groups pour qu'il se comporte comme des lignes de grille, donc pas besoin de .row.

<form class="form-horizontal">
  <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>

Contrôles pris en charge

Exemples de contrôles de formulaire standard pris en charge dans un exemple de mise en page de formulaire.

Contributions

Contrôle de formulaire le plus courant, champs de saisie textuels. Inclut 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 entièrement stylées que si elles typesont correctement déclarées.

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

Groupes d'entrée

Pour ajouter du texte intégré ou des boutons avant et/ou après tout texte <input>, consultez le composant de groupe d'entrée .

Zone de texte

Contrôle de formulaire prenant en charge plusieurs lignes de texte. Modifiez rowsl'attribut si nécessaire.

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

Cases à cocher et radios

Les cases à cocher permettent de sélectionner une ou plusieurs options dans une liste, tandis que les radios permettent de sélectionner une option parmi plusieurs.

Les cases à cocher et les radios désactivées sont prises en charge, mais pour fournir un curseur "non autorisé" au survol du parent <label>, vous devrez ajouter la .disabledclasse au parent .radio, .radio-inline, .checkboxou .checkbox-inline.

Par défaut (empilé)

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

Cases à cocher et radios en ligne

Utilisez les classes .checkbox-inlineou sur une série de cases à cocher ou de radios pour les contrôles qui apparaissent sur la même ligne..radio-inline

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

Cases à cocher et radios sans texte d'étiquette

Si vous n'avez pas de texte dans le <label>, l'entrée est positionnée comme prévu. Ne fonctionne actuellement que sur les cases à cocher et les radios non intégrées. N'oubliez pas de toujours fournir une forme d'étiquette pour les technologies d'assistance (par exemple, en utilisant aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Sélectionne

Notez que de nombreux menus de sélection natifs, notamment dans Safari et Chrome, ont des coins arrondis qui ne peuvent pas être modifiés via les border-radiuspropriétés.

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

Pour <select>les contrôles avec l' multipleattribut, plusieurs options sont affichées par défaut.

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

Contrôle statique

Lorsque vous devez placer du texte brut à côté d'une étiquette de formulaire dans un formulaire, utilisez la .form-control-staticclasse sur un fichier <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

État de mise au point

Nous supprimons les styles par défaut outlinesur certains contrôles de formulaire et appliquons un box-shadowà sa place pour :focus.

`:focus`État de démonstration

L'exemple d'entrée ci-dessus utilise des styles personnalisés dans notre documentation pour illustrer l' :focusétat sur un fichier .form-control.

État désactivé

Ajoutez l' disabledattribut booléen sur une entrée pour empêcher les interactions de l'utilisateur. Les entrées désactivées apparaissent plus claires et ajoutent un not-allowedcurseur.

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

Ensembles de champs désactivés

Ajoutez l' disabledattribut à a <fieldset>pour désactiver tous les contrôles dans le <fieldset>à la fois.

Mise en garde sur la fonctionnalité de lien de`<a>`

Par défaut, les navigateurs traiteront tous les contrôles de formulaire natifs ( <input>, <select>et <button>éléments) à l'intérieur d'un <fieldset disabled>comme désactivés, empêchant à la fois les interactions clavier et souris sur eux. Cependant, si votre formulaire comprend également des <a ... class="btn btn-*">éléments, ceux-ci ne recevront que le style pointer-events: none. Comme indiqué dans la section sur l'état désactivé pour les boutons (et plus particulièrement dans la sous-section pour les éléments d'ancrage), cette propriété CSS n'est pas encore normalisée et n'est pas entièrement prise en charge dans Opera 18 et inférieur, ou dans Internet Explorer 11, et a gagné n'empêche pas les utilisateurs de clavier de pouvoir se concentrer ou activer ces liens. Donc, pour être sûr, utilisez JavaScript personnalisé pour désactiver ces liens.

Compatibilité entre navigateurs

Alors que Bootstrap appliquera ces styles dans tous les navigateurs, Internet Explorer 11 et les versions antérieures ne prennent pas entièrement en charge l' disabledattribut sur un fichier <fieldset>. Utilisez JavaScript personnalisé pour désactiver l'ensemble de champs dans ces navigateurs.

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

État en lecture seule

Ajoutez l' readonlyattribut booléen sur une entrée pour empêcher la modification de la valeur de l'entrée. Les entrées en lecture seule apparaissent plus claires (tout comme les entrées désactivées), mais conservent le curseur standard.

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

Texte d'aide

Texte d'aide au niveau du bloc pour les contrôles de formulaire.

Associer le texte d'aide aux champs de formulaire

Le texte d'aide doit être explicitement associé au contrôle de formulaire auquel il se rapporte à l'aide de l' aria-describedbyattribut. Cela garantira que les technologies d'assistance - telles que les lecteurs d'écran - annonceront ce texte d'aide lorsque l'utilisateur se concentre ou entre dans la commande.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

États de validation

Bootstrap inclut des styles de validation pour les états d'erreur, d'avertissement et de réussite sur les contrôles de formulaire. Pour utiliser, ajoutez .has-warning, .has-errorou .has-successà l'élément parent. Tout élément .control-label, .form-controlet .help-blockdans cet élément recevra les styles de validation.

Transmission de l'état de validation aux technologies d'assistance et aux utilisateurs daltoniens

L'utilisation de ces styles de validation pour indiquer l'état d'un contrôle de formulaire fournit uniquement une indication visuelle basée sur la couleur, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran, ou aux utilisateurs daltoniens.

Assurez-vous qu'une autre indication d'état est également fournie. Par exemple, vous pouvez inclure un indice sur l'état dans le <label>texte du contrôle de formulaire lui-même (comme c'est le cas dans l'exemple de code suivant), inclure un Glyphicon (avec un texte alternatif approprié utilisant la .sr-onlyclasse - voir les exemples Glyphicon ), ou en fournissant un bloc de texte d'aide supplémentaire . Spécifiquement pour les technologies d'assistance, les contrôles de formulaire non valides peuvent également se voir attribuer un aria-invalid="true"attribut.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</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>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Avec icônes facultatives

Vous pouvez également ajouter des icônes de commentaires facultatives avec l'ajout de .has-feedbacket l'icône de droite.

Les icônes de commentaires ne fonctionnent qu'avec des <input class="form-control">éléments textuels.

Icônes, étiquettes et groupes d'entrée

Le positionnement manuel des icônes de retour est requis pour les entrées sans étiquette et pour les groupes d'entrées avec un module complémentaire à droite. Nous vous encourageons fortement à fournir des étiquettes pour toutes les entrées pour des raisons d'accessibilité. Si vous souhaitez empêcher l'affichage des étiquettes, masquez-les avec la .sr-onlyclasse. Si vous devez vous passer des étiquettes, ajustez la topvaleur de l'icône de rétroaction. Pour les groupes d'entrée, ajustez la rightvaleur à une valeur de pixel appropriée en fonction de la largeur de votre module complémentaire.

Transmettre la signification de l'icône aux technologies d'assistance

Pour garantir que les technologies d'assistance, telles que les lecteurs d'écran, transmettent correctement la signification d'une icône, du texte masqué supplémentaire doit être inclus dans la .sr-onlyclasse et explicitement associé au contrôle de formulaire auquel il se rapporte à l'aide de aria-describedby. Vous pouvez également vous assurer que la signification (par exemple, le fait qu'il existe un avertissement pour un champ de saisie de texte particulier) est transmise sous une autre forme, telle que la modification du texte du réel <label>associé au contrôle de formulaire.

Bien que les exemples suivants mentionnent déjà l'état de validation de leurs contrôles de formulaire respectifs dans le <label>texte lui-même, la technique ci-dessus (utilisant .sr-onlytext et aria-describedby) a été incluse à des fins d'illustration.

<div 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" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</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" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</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" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Icônes facultatives dans les formulaires horizontaux et en ligne

<form class="form-horizontal">
  <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" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <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" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Icônes facultatives avec `.sr-only`étiquettes masquées

Si vous utilisez la .sr-onlyclasse pour masquer un contrôle de formulaire <label>(plutôt que d'utiliser d'autres options d'étiquetage, telles que l' aria-labelattribut), Bootstrap ajustera automatiquement la position de l'icône une fois qu'elle aura été ajoutée.

<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" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Contrôle de la taille

Définissez les hauteurs à l'aide de classes telles que .input-lg, et définissez les largeurs à l'aide de classes de colonnes de grille telles que .col-lg-*.

Dimensionnement en hauteur

Créez des contrôles de formulaire plus grands ou plus courts qui correspondent à la taille 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>

Tailles des groupes de formulaires horizontaux

Redimensionnez rapidement les étiquettes et les contrôles de formulaire .form-horizontalen ajoutant .form-group-lgou .form-group-sm.

<form class="form-horizontal">
  <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>

Dimensionnement des colonnes

Enveloppez les entrées dans des colonnes de grille ou dans 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>

Balises de bouton

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

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

Utilisation spécifique au contexte

Bien que les classes de boutons puissent être utilisées sur les éléments <a>et <button>, seuls <button>les éléments sont pris en charge dans nos composants nav et navbar.

Liens faisant office de boutons

Si les <a>éléments sont utilisés pour agir comme des boutons - déclenchant une fonctionnalité dans la page, plutôt que de naviguer vers un autre document ou une section de la page actuelle - ils doivent également recevoir un role="button".

Rendu multi-navigateur

Comme bonne pratique, nous vous recommandons fortement d'utiliser l' <button>élément chaque fois que possible pour garantir un rendu compatible entre les navigateurs.

Entre autres choses, il y a un bogue dans Firefox <30 qui nous empêche de définir les line-heightboutons <input>basés sur -, les faisant ne pas correspondre exactement à la hauteur des autres boutons sur Firefox.

Choix

Utilisez l'une des classes de boutons disponibles pour créer rapidement un bouton stylé.

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

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter une signification à un bouton ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (le texte visible du bouton), soit incluses par d'autres moyens, tels que du texte supplémentaire masqué avec la .sr-onlyclasse.

Tailles

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-lg, .btn-sm, ou .btn-xspour 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 au niveau du bloc (ceux qui s'étendent sur toute la largeur 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

Les boutons apparaîtront enfoncés (avec un arrière-plan plus sombre, une bordure plus sombre et une ombre incrustée) lorsqu'ils sont actifs. Pour <button>les éléments, cela se fait via :active. Pour <a>les éléments, c'est fait avec .active. Cependant, vous pouvez utiliser .activeon <button>s (et inclure l' aria-pressed="true"attribut) si vous avez besoin de répliquer l'état actif par programme.

Élément de bouton

Pas besoin d'ajouter :activecar c'est une pseudo-classe, mais si vous avez besoin de forcer la même apparence, 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 d'ancrage

Ajoutez la .activeclasse aux <a>boutons.

Lien principal 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é

Rendez les boutons incliquables en les estompant avec opacity.

Élément de bouton

Ajoutez l' disabledattribut aux <button>boutons.

<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é entre navigateurs

Si vous ajoutez l' disabledattribut à un <button>, Internet Explorer 9 et les versions antérieures rendront le texte gris avec une ombre de texte désagréable que nous ne pouvons pas corriger.

Élément d'ancrage

Ajoutez la .disabledclasse aux <a>boutons.

Lien principal 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 l'utilisons .disabledici comme classe utilitaire, similaire à la .activeclasse commune, donc aucun préfixe n'est requis.

Mise en garde sur la fonctionnalité de lien

Cette classe utilise pointer-events: nonepour essayer de désactiver la fonctionnalité de lien de <a>s, mais cette propriété CSS n'est pas encore normalisée et n'est pas entièrement prise en charge dans Opera 18 et inférieur, ou dans Internet Explorer 11. De plus, même dans les navigateurs qui prennent en charge pointer-events: none, le clavier la navigation reste inchangée, ce qui signifie que les utilisateurs de clavier voyants et les utilisateurs de technologies d'assistance pourront toujours activer ces liens. Donc, pour être sûr, utilisez JavaScript personnalisé pour désactiver ces liens.

Images réactives

Les images dans Bootstrap 3 peuvent être rendues réactives via l'ajout de la .img-responsiveclasse. Cela s'applique à max-width: 100%;, height: auto;et display: block;à l'image afin qu'elle s'adapte bien à l'élément parent.

Pour centrer les images qui utilisent la .img-responsiveclasse, utilisez à la .center-blockplace de .text-center. Voir la section des classes d'assistance pour plus de détails sur l' .center-blockutilisation.

Images SVG et Internet Explorer 8-10

Dans Internet Explorer 8-10, les images SVG avec .img-responsivesont de taille disproportionnée. Pour résoudre ce problème, ajoutez width: 100% \9;si nécessaire. Bootstrap ne l'applique pas automatiquement car cela entraîne des complications pour d'autres formats d'image.

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

Formes d'images

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

Compatibilité entre navigateurs

Gardez à l'esprit qu'Internet Explorer 8 ne prend pas en charge les coins arrondis.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Couleurs contextuelles

Transmettez le sens à travers la couleur avec une poignée de classes utilitaires d'accentuation. Ceux-ci peuvent également être appliqués aux liens et s'assombrissent au survol, tout comme nos styles de lien par défaut.

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.

Mécène 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>

Faire face à la spécificité

Parfois, les classes d'emphase ne peuvent pas être appliquées en raison de la spécificité d'un autre sélecteur. Dans la plupart des cas, une solution de contournement suffisante consiste à envelopper votre texte dans un <span>avec la classe.

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (les couleurs contextuelles ne sont utilisées que pour renforcer le sens déjà présent dans le texte/le balisage), soit sont incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-onlyclasse .

Arrière-plans contextuels

Semblable aux classes de couleurs de texte contextuelles, définissez facilement l'arrière-plan d'un élément sur n'importe quelle classe contextuelle. Les composants d'ancrage s'assombrissent au survol, tout comme les classes de texte.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Mécène 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>

Faire face à la spécificité

Parfois, les classes d'arrière-plan contextuelles ne peuvent pas être appliquées en raison de la spécificité d'un autre sélecteur. Dans certains cas, une solution de contournement suffisante consiste à envelopper le contenu de votre élément dans un <div>avec la classe.

Donner du sens aux technologies d'assistance

Comme pour les couleurs contextuelles , assurez-vous que toute signification véhiculée par la couleur est également véhiculée dans un format qui n'est pas purement de présentation.

Fermer l'icône

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

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

Carets

Utilisez des carets pour indiquer la fonctionnalité et la direction de la liste déroulante. Notez que le caret par défaut s'inversera automatiquement dans les menus déroulants .

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

Flotteurs rapides

Faire flotter un élément vers la gauche ou vers la droite avec une classe. !importantest inclus pour éviter les problèmes de spécificité. Les classes peuvent également ê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();
}

Centrer les blocs de contenu

Définissez un élément sur display: blocket centrez-le via margin. Disponible sous forme de mixin et de classe.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Clearfix

Effacez facilement floats en ajoutant .clearfix à l'élément parent . Utilise le micro clearfix popularisé par Nicolas Gallagher. Peut également être utilisé comme 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();
}

Afficher et masquer du contenu

Forcez l'affichage ou le masquage d'un élément ( y compris pour les lecteurs d'écran ) à l'aide des classes .showet . .hiddenCes classes permettent !importantd'éviter les conflits de spécificité, tout comme les quick floats . Ils ne sont disponibles que pour basculer au niveau du bloc. Ils peuvent également être utilisés comme mixins.

.hideest disponible, mais il n'affecte pas toujours les lecteurs d'écran et est obsolète à partir de la v3.0.1. Utilisez .hiddenou .sr-onlyà la place.

De plus, .invisiblepeut être utilisé pour basculer uniquement la visibilité d'un élément, ce qui signifie qu'il displayn'est pas modifié et que l'élément peut toujours affecter le flux du document.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

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

Contenu de navigation du lecteur d'écran et du clavier

Cachez un élément sur tous les appareils sauf les lecteurs d'écran avec .sr-only. Combinez .sr-onlyavec .sr-only-focusablepour afficher à nouveau l'élément lorsqu'il est activé (par exemple, par un utilisateur au clavier uniquement). Nécessaire pour suivre les meilleures pratiques d'accessibilité . Peut également être utilisé comme 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

Utilisez la .text-hideclasse ou le mixin pour vous aider à remplacer le contenu textuel d'un élément par une image d'arrière-plan.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Pour un développement plus rapide et adapté aux mobiles, utilisez ces classes utilitaires pour afficher et masquer le contenu par appareil via une requête multimédia. Sont également incluses des classes utilitaires pour basculer le contenu lors de l'impression.

Essayez de les utiliser de manière limitée et évitez de créer des versions entièrement différentes du même site. Utilisez-les plutôt pour compléter la présentation de chaque appareil.

Cours disponibles

Utilisez une seule ou une combinaison des classes disponibles pour basculer le contenu entre les points d'arrêt de la fenêtre.

	Petits appareils supplémentairesTéléphones (<768px)	Petits appareilsTablettes (≥768px)	Appareils moyensOrdinateurs de bureau (≥992px)	Gros appareilsOrdinateurs de bureau (≥1200px)
`.visible-xs-*`	Visible	Caché	Caché	Caché
`.visible-sm-*`	Caché	Visible	Caché	Caché
`.visible-md-*`	Caché	Caché	Visible	Caché
`.visible-lg-*`	Caché	Caché	Caché	Visible
`.hidden-xs`	Caché	Visible	Visible	Visible
`.hidden-sm`	Visible	Caché	Visible	Visible
`.hidden-md`	Visible	Visible	Caché	Visible
`.hidden-lg`	Visible	Visible	Visible	Caché

Depuis la v3.2.0, les .visible-*-*classes de chaque point d'arrêt se déclinent en trois variantes, une pour chaque displayvaleur de propriété CSS répertoriée ci-dessous.

Groupe de cours	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsAinsi, pour les écrans très petits ( ) par exemple, les .visible-*-*classes disponibles sont : .visible-xs-block, .visible-xs-inline, et .visible-xs-inline-block.

Les classes .visible-xs, .visible-sm, .visible-mdet .visible-lgexistent également, mais sont obsolètes depuis la v3.2.0 . Ils sont approximativement équivalents à .visible-*-block, sauf avec des cas spéciaux supplémentaires pour basculer les <table>éléments liés à .

Cours d'impression

Semblables aux classes réactives habituelles, utilisez-les pour basculer le contenu vers l'impression.

Des classes	Navigateur	Imprimer
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Caché	Visible
`.hidden-print`	Visible	Caché

La classe .visible-printexiste également mais est obsolète depuis la v3.2.0. Il est approximativement équivalent à .visible-print-block, sauf avec des cas spéciaux supplémentaires pour les <table>éléments liés à -.

Cas de test

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

Visible sur...

Les coches vertes indiquent que l'élément est visible dans votre fenêtre actuelle.

Super petit ✔ Visible sur très petit

Petit ✔ Visible sur les petits

Moyen ✔ Visible sur support

Grand ✔ Visible en grand

Très petit et petit ✔ Visible sur x-small et small

Moyen et grand ✔ Visible sur moyen et grand

Très petit et moyen ✔ Visible sur x-small et medium

Petit et grand ✔ Visible sur petits et grands

Très petit et grand ✔ Visible sur x-small et large

Petit et moyen ✔ Visible sur les petites et moyennes

Caché sur...

Ici, les coches vertes indiquent également que l'élément est masqué dans votre fenêtre actuelle.

Super petit ✔ Caché sur x-small

Petit ✔ Caché sur les petits

Moyen ✔ Caché sur le support

Grand ✔ Caché sur grand

Très petit et petit ✔ Caché sur x-small et small

Moyen et grand ✔ Caché sur moyen et grand

Très petit et moyen ✔ Caché sur x-petit et moyen

Petit et grand ✔ Caché sur les petits et les grands

Très petit et grand ✔ Caché sur x-petit et grand

Petit et moyen ✔ Caché sur les petites et moyennes

Le CSS de Bootstrap est construit sur Less, un préprocesseur avec des fonctionnalités supplémentaires comme des variables, des mixins et des fonctions pour compiler CSS. Ceux qui cherchent à utiliser les fichiers source Less au lieu de nos fichiers CSS compilés peuvent utiliser les nombreuses variables et mixins que nous utilisons tout au long du framework.

Les variables de grille et les mixins sont traités dans la section Système de grille .

Compiler Bootstrap

Bootstrap peut être utilisé d'au moins deux manières : avec le CSS compilé ou avec les fichiers source Less. Pour compiler les fichiers Less, consultez la section Mise en route pour savoir comment configurer votre environnement de développement pour exécuter les commandes nécessaires.

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

variables

Les variables sont utilisées tout au long du projet pour centraliser et partager des valeurs couramment utilisées telles que les couleurs, l'espacement ou les piles de polices. Pour une ventilation complète, veuillez consulter le Customizer .

Couleurs

Utilisez facilement deux schémas de couleurs : niveaux de gris et sémantique. Les couleurs en niveaux de gris offrent un accès rapide aux nuances de noir couramment utilisées, tandis que la sémantique comprend diverses couleurs attribuées à des valeurs contextuelles significatives.

@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: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Utilisez l'une de ces variables de couleur telles quelles ou ré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 les éléments clés du squelette de votre site.

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

Liens

Stylez facilement vos liens avec la bonne couleur 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;
  }
}

Notez que le @link-hover-colorutilise une fonction, un autre outil génial de Less, pour créer automatiquement la bonne couleur de survol. Vous pouvez utiliser darken, lighten, saturateet desaturate.

Typographie

Définissez facilement votre police de caractères, la taille du texte, l'interlignage et plus encore avec quelques variables rapides. Bootstrap les utilise également pour fournir des mixins typographiques faciles.

@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 fichier de vos icônes.

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

Composants

Les composants de Bootstrap utilisent certaines variables par défaut pour définir des valeurs communes. Voici les plus couramment utilisés.

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

Mélanges de fournisseurs

Les mixins de fournisseur sont des mixins permettant de prendre en charge plusieurs navigateurs en incluant tous les préfixes de fournisseur pertinents dans votre CSS compilé.

Dimensionnement de la boîte

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

Le mixin est obsolète à partir de la v3.2.0, avec l'introduction d'Autoprefixer. Pour préserver la rétrocompatibilité, Bootstrap continuera à utiliser le mixin en interne jusqu'à 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é sans préfixe border-radius. En tant que tel, il n'y a pas de .border-radius()mixin, mais Bootstrap inclut des raccourcis pour arrondir rapidement deux coins d'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;
}

Boîte d'ombres (gouttes)

Si votre public cible utilise les navigateurs et appareils les plus récents et les plus performants, assurez-vous d'utiliser la box-shadowpropriété seule. Si vous avez besoin d'assistance pour les anciens appareils Android (pré-v4) et iOS (pré-iOS 5), utilisez le mixin obsolète pour récupérer le -webkitpréfixe requis.

Le mixin est obsolète à partir de la v3.1.0, car Bootstrap ne prend pas officiellement en charge les plates-formes obsolètes qui ne prennent pas en charge la propriété standard. Pour préserver la rétrocompatibilité, Bootstrap continuera à utiliser le mixin en interne jusqu'à Bootstrap v4.

Assurez-vous d'utiliser des rgba()couleurs dans vos ombres de boîte afin qu'elles se fondent aussi parfaitement que possible avec 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

Mixins multiples pour plus de flexibilité. Définissez toutes les informations de transition avec une seule ou spécifiez un délai et une durée distincts si nécessaire.

Les mixins sont obsolètes à partir de la v3.2.0, avec l'introduction d'Autoprefixer. Pour préserver la rétrocompatibilité, Bootstrap continuera à utiliser les mixins en interne jusqu'à 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 pivoter, redimensionnez, translatez (déplacez) ou inclinez n'importe quel objet.

.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 mixin unique pour utiliser toutes les propriétés d'animation de CSS3 dans une déclaration et d'autres mixins pour des propriétés individuelles.

.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éfinissez l'opacité pour tous les navigateurs et fournissez une filtersolution de secours pour IE8.

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

Texte d'espace réservé

Fournissez un contexte pour les contrôles de formulaire dans 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 via CSS dans 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 deux couleurs en un dégradé d'arrière-plan. Allez plus loin et définissez une direction, utilisez trois couleurs ou utilisez un dégradé radial. Avec un seul mixin, vous obtenez toutes les syntaxes préfixées dont vous aurez 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 bicolore standard :

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

Si vous avez besoin d'un dégradé de style barbier, c'est aussi facile. Spécifiez simplement une seule couleur et nous superposerons une bande blanche translucide.

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

Montez la barre et utilisez trois couleurs à la place. Définissez la première couleur, la deuxième couleur, l'arrêt de couleur de la deuxième couleur (une valeur en pourcentage comme 25 %) et la troisième couleur avec ces mixins :

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

La tête haute! Si vous avez besoin de supprimer un dégradé, assurez-vous de supprimer tout élément spécifique à IE filterque vous avez ajouté. Vous pouvez le faire en utilisant le .reset-filter()mixin à côté de background-image: none;.

Mélanges utilitaires

Les mixins utilitaires sont des mixins qui combinent des propriétés CSS autrement sans rapport pour atteindre un objectif ou une tâche spécifique.

Clearfix

Oubliez l'ajout class="clearfix"à n'importe quel élément et ajoutez plutôt le .clearfix()mixin le cas échéant. Utilise le micro clearfix de Nicolas Gallagher .

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

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

Centrage horizontal

Centrez rapidement n'importe quel élément dans son parent. Nécessite widthou max-widthà définir.

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

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

Aides au dimensionnement

Spécifiez 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 tout autre élément. Par défaut, le comportement normal du navigateur ( both).

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

Tronquer le texte

Tronquez facilement le texte avec des points de suspension avec un seul mixin. Nécessite que l'élément soit blockou de inline-blockniveau.

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

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

Images de la rétine

Spécifiez deux chemins d'image et les dimensions de l'image @1x, et Bootstrap fournira une requête multimédia @2x. Si vous avez de nombreuses images à diffuser, envisagez d'écrire manuellement le CSS de votre image Retina dans une seule requête multimédia.

.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);
}

Bien que Bootstrap soit construit sur Less, il possède également un port Sass officiel . Nous le maintenons dans un référentiel GitHub séparé et gérons les mises à jour avec un script de conversion.

Ce qui est inclu

Étant donné que le port Sass a un dépôt séparé et sert un public légèrement différent, le contenu du projet diffère grandement du projet principal Bootstrap. Cela garantit que le port Sass est aussi compatible avec autant de systèmes basés sur Sass que possible.

Chemin	La description
`lib/`	Ruby gem code (configuration Sass, intégrations Rails et Compass)
`tasks/`	Scripts de conversion (passant en amont de Less à Sass)
`test/`	Essais de compilation
`templates/`	Manifeste du package Compass
`vendor/assets/`	Sass, JavaScript et fichiers de police
`Rakefile`	Tâches internes, telles que ratisser et convertir

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

Installation

Pour plus d'informations sur l'installation et l'utilisation de Bootstrap for Sass, consultez le fichier readme du référentiel GitHub . Il s'agit de la source la plus à jour et comprend des informations à utiliser avec les projets Rails, Compass et Sass standard.

Bootstrap pour Sass

CSS

Aperçu

Type de document HTML5

Mobile d'abord

Typographie et liens

Normaliser.css

Conteneurs

Système de grille

Introduction

Requêtes médias

Options de grille

Exemple : empilé à l'horizontale

Exemple : réservoir de liquide

Exemple : mobile et ordinateur de bureau

Exemple : Mobile, tablette, ordinateur de bureau

Exemple : retour à la ligne de colonne

Réinitialisations de colonne réactives

Colonnes de décalage

Colonnes imbriquées

Ordre des colonnes

Moins de mixins et de variables

variables

Mélanges

Exemple d'utilisation

Typographie

Rubriques

h1. En-tête bootstrap

h2. En-tête bootstrap

h3. En-tête bootstrap

h4. En-tête bootstrap

h5. En-tête bootstrap

h6. En-tête bootstrap

h1. Titre bootstrap Texte secondaire

h2. Titre bootstrap Texte secondaire

h3. Titre bootstrap Texte secondaire

h4. Titre bootstrap Texte secondaire

h5. Titre bootstrap Texte secondaire

h6. Titre bootstrap Texte secondaire

Corps du texte

Copie du corps principal

Construit avec moins

Éléments de texte en ligne

Texte marqué

Texte supprimé

Texte barré

Texte inséré

Texte souligné

Petit texte

Audacieux

Italique

Éléments alternatifs

Cours d'alignement

Cours de transformation

Abréviations

Abréviation de base

Initialisme

Adresses

Citations en bloc

Citation par défaut

Options de citation en bloc

Nommer une source

Affichages alternatifs

Listes

Non ordonné

Commandé

Sans style

En ligne

La description

Description horizontale

Troncature automatique

Code

En ligne

Entrée utilisateur

Bloc de base

variables

Exemple de sortie

les tables

Exemple de base

Rangées rayées

Compatibilité entre navigateurs

`:focus`État de démonstration

Mise en garde sur la fonctionnalité de lien de`<a>`

Icônes facultatives avec `.sr-only`étiquettes masquées