Typographie

Documentation et exemples pour la typographie Bootstrap, y compris les paramètres globaux, les en-têtes, le corps du texte, les listes, etc.

Sur cette page

Paramètres globaux

Bootstrap définit les styles d'affichage, de typographie et de lien globaux de base. Lorsque plus de contrôle est nécessaire, consultez les classes d'utilitaires textuels.

Utilisez une pile de polices natives qui sélectionne la meilleure font-family pour chaque Système d'exploitation et appareil.
Pour une échelle de caractères plus inclusive et accessible, nous utilisons la racine par défaut font-size du navigateur (généralement 16 px) afin que les visiteurs puissent personnaliser les paramètres par défaut de leur navigateur selon leurs besoins.
Utilisez les attributs $font-family-base, $font-size-base et $line-height-base comme base typographique appliquée au <body>.
Définissez la couleur globale du lien via $link-color.
Utilisez $body-bg pour définir une background-color sur le <body> (#fff par défaut).

Ces styles se trouvent dans _reboot.scss, et les variables globales sont définies dans _variables.scss. Assurez-vous de définir $font-size-base dans rem.

Titres

Tous les titres HTML, <h1> à <h6>, sont disponibles.

Titre	Exemple
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

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

Les classes

.h1 à .h6 sont également disponibles, lorsque vous souhaitez faire correspondre le style de police d'un titre mais que vous ne pouvez pas utiliser l'élément HTML associé.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Personnaliser les en-têtes

Utilisez les classes utilitaires incluses pour recréer le petit texte d'en-tête secondaire de Bootstrap 3.

En-tête d'affichage fantaisie Avec texte secondaire estompé

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Afficher les titres

Les éléments de titre traditionnels sont conçus pour fonctionner au mieux dans le contenu de votre page. Lorsque vous avez besoin d'un titre pour vous démarquer, envisagez d'utiliser un titre d'affichage : un style de titre plus grand et légèrement plus opiniâtre.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Les en-têtes d'affichage sont configurés via la carte Sass $display-font-sizes et deux variables, $display-font-weight et $display-line- hauteur.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

Mener

Faites ressortir un paragraphe en ajoutant .lead.

Ceci est un premier paragraphe. Il se démarque des paragraphes réguliers.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Éléments de texte en ligne

Style pour les éléments HTML5 intégrés courants.

Vous pouvez utiliser la balise mark pour surligner du texte.

~~Cette ligne de texte doit être traitée comme du texte supprimé.~~

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

Cette ligne de texte doit être traitée comme un ajout au document.

Cette ligne de texte s'affichera comme soulignée.

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

Cette ligne s'affiche en texte gras.

Cette ligne est rendue sous forme de texte en italique.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Attention, ces balises doivent être utilisées à des fins sémantiques :

 représente le texte qui est marqué ou mis en surbrillance à des fins de référence ou de notation.
<petit> représente les commentaires annexes et les petits caractères, comme le droit d'auteur et le texte légal.
<s> représente des éléments qui ne sont plus pertinents ou plus exacts.
 représente une étendue de texte en ligne qui doit être rendu de manière à indiquer qu'il contient une annotation non textuelle.

Si vous souhaitez styliser votre texte, vous devez plutôt utiliser les classes suivantes :

.mark appliquera les mêmes styles que .
.small appliquera les mêmes styles que .
.text-decoration-underline appliquera les mêmes styles que .
.text-decoration-line-through appliquera les mêmes styles que <s>.

Bien que cela ne soit pas indiqué ci-dessus, n'hésitez pas à utiliser  et  en HTML5.  est destiné à mettre en évidence des mots ou des phrases sans donner d'importance supplémentaire, tandis que  est principalement destiné à la voix, aux termes techniques, etc.

Utilitaires de texte

Modifiez l'alignement, la transformation, le style, l'épaisseur, la hauteur de ligne, la décoration et la couleur du texte avec nos utilitaires de texte et utilitaires de couleurs.

Abréviations

Mise en œuvre stylisée de l'élément HTML <abbr> pour les abréviations et les acronymes afin d'afficher la version développée au survol. Les abréviations ont un soulignement par défaut et un curseur d'aide pour fournir un contexte supplémentaire au survol et aux utilisateurs de technologies d'assistance.

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

attr

HTML

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

Citations en bloc

Pour citer des blocs de contenu provenant d'une autre source dans votre document. Enveloppez <blockquote class="blockquote"> autour de n'importe quel HTML comme citation.

Une citation bien connue, contenue dans un élément blockquote.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nommer une source

La spécification HTML exige que l'attribution de la citation de bloc soit placée en dehors du <blockquote>. Lorsque vous fournissez une attribution, enveloppez votre <blockquote> dans un <figure> et utilisez un <figcaption> ou un élément de niveau bloc ( par exemple, ) avec la classe .blockquote-footer. Assurez-vous également d'envelopper le nom de l'œuvre source dans <cite>.

Une citation bien connue, contenue dans un élément blockquote.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Alignement

Utilisez des utilitaires de texte au besoin pour modifier l'alignement de votre bloc de citation.

Une citation bien connue, contenue dans un élément blockquote.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Une citation bien connue, contenue dans un élément blockquote.

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Listes

Sans style

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

Ceci est une liste.
Il semble complètement sans style.
Sur le plan structurel, il s'agit toujours d'une liste.
Cependant, ce style ne s'applique qu'aux éléments enfants immédiats.
Listes imbriquées :
- ne sont pas affectés par ce style
- affichera toujours une puce
- et avoir une marge de gauche appropriée
Cela peut toujours être utile dans certaines situations.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>

  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

En ligne

Supprimez les puces d'une liste et appliquez une légère marge avec une combinaison de deux classes, .list-inline et .list-inline-item.

Ceci est un élément de liste.
Et un autre.
Mais ils sont affichés en ligne.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Alignement de la liste de descriptions

Alignez les termes et les descriptions horizontalement en utilisant les classes prédéfinies de notre système de grille (ou mixins sémantiques). Pour des termes plus longs, vous pouvez éventuellement ajouter une classe .text-truncate pour tronquer le texte avec des points de suspension.

Listes de description

Une liste de description est parfaite pour définir les termes.

Terme

Définition du terme.

Et un autre texte de définition d'espace réservé.

Autre terme

Cette définition est courte, donc pas de paragraphes supplémentaires ou quoi que ce soit.

Le terme tronqué est tronqué

Cela peut être utile lorsque l'espace est restreint. Ajoute des points de suspension à la fin.

Imbrication

Liste de définitions imbriquées: Je vous ai entendu aimer les listes de définitions. Permettez-moi de mettre une liste de définitions dans votre liste de définitions.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Tailles de police réactives

Dans Bootstrap 5, nous avons activé par défaut les tailles de police réactives, ce qui permet au texte de s'adapter plus naturellement à la taille de l'appareil et de la fenêtre d'affichage. Consultez la page RFS pour savoir comment cela fonctionne.

Sass

Variables

Les titres ont des variables dédiées pour le dimensionnement et l'espacement.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Divers éléments typographiques couverts ici et dans Reboot ont également des variables dédiées.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

Mixins

Il n'y a pas de mixins dédiés à la typographie, mais Bootstrap utilise Responsive Font Sizing (RFS).

Bootstrap 5.2 | Contenu

Typographie

Typographie

Paramètres globaux

Titres

Personnaliser les en-têtes

En-tête d'affichage fantaisie Avec texte secondaire estompé

Afficher les titres

Mener

Éléments de texte en ligne

Utilitaires de texte

Abréviations

Citations en bloc

Nommer une source

Alignement

Listes

Sans style

En ligne

Alignement de la liste de descriptions

Tailles de police réactives

Sass

Variables

Mixins