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 native qui sélectionne la meilleure font-familypour chaque système d'exploitation et appareil.
Pour une échelle de type plus inclusive et accessible, nous utilisons la racine par défaut du navigateur font-size(généralement 16 pixels) 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-baseet $line-height-basecomme base typographique appliquée au <body>.
Définissez la couleur globale du lien via $link-color.
Utilisez $body-bgpour régler a background-colorsur <body>( #fffpar défaut).

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

Rubriques

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

Titre	Exemple
`<h1></h1>`	h1. En-tête bootstrap
`<h2></h2>`	h2. En-tête bootstrap
`<h3></h3>`	h3. En-tête bootstrap
`<h4></h4>`	h4. En-tête bootstrap
`<h5></h5>`	h5. En-tête bootstrap
`<h6></h6>`	h6. En-tête bootstrap

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

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

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

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

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.

<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 $display-font-sizescarte Sass et deux variables, $display-font-weightet $display-line-height.

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

Conduire

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 de marque poursoulignertexte.

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

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

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

Cette ligne de texte sera rendue comme soulignée.

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

Cette ligne est rendue sous forme de texte en 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.
représente les commentaires secondaires et les petits caractères, comme le droit d'auteur et le texte légal.
<s>représente un élément qui n'est plus pertinent ou qui n'est plus exact.
représente une étendue de texte en ligne qui doit être rendu d'une manière qui indique qu'il a une annotation non textuelle.

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

.markappliquera les mêmes styles que .
.smallappliquera les mêmes styles que .
.text-decoration-underlineappliquera les mêmes styles que .
.text-decoration-line-throughappliquera 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 qu'il 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 de couleur .

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 ont un soulignement par défaut et gagnent un curseur d'aide pour fournir un contexte supplémentaire au survol et aux utilisateurs de technologies d'assistance.

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

attribut

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">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 bloc de citation 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 .blockquote-footerclasse. Assurez-vous d'inclure <cite>également le nom de l'œuvre source.

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

Ceci est une liste.
Il apparaît complètement sans style.
Structurellement, c'est toujours 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
- montrera toujours une balle
- 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 un peu de lumière marginavec une combinaison de deux classes, .list-inlineet .list-inline-item.

Il s'agit d'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 description

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 .text-truncateclasse pour tronquer le texte avec des points de suspension.

Listes de descriptions

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

Terme

Définition du terme.

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

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

Nidification

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é les tailles de police réactives par défaut, permettant au texte de s'adapter plus naturellement à toutes les tailles d'appareils et de fenêtres. Consultez la page RFS pour savoir comment cela fonctionne.

Toupet

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 de typographie 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;

Mélanges

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