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.

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 supposons 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-coloret appliquez les soulignements de lien uniquement sur :hover.
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>

Conduire

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">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>

.market .smalldes classes sont également disponibles pour appliquer les mêmes styles au fur <mark>et à mesure <small>tout en évitant les implications sémantiques indésirables que les balises apporteraient.

Bien que cela ne soit pas indiqué ci-dessus, 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.

Utilitaires de texte

Modifiez l'alignement, la transformation, le style, l'épaisseur et la couleur du texte avec nos utilitaires de texte et nos utilitaires 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.

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

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Nommer une source

Ajoutez un <footer class="blockquote-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 class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alignement

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

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 text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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 text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

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.

Le terme tronqué est tronqué

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nidification

Liste de définitions imbriquées: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Typographie réactive

La typographie réactive fait référence à la mise à l'échelle du texte et des composants en ajustant simplement l'élément racine font-sizedans une série de requêtes multimédias. Bootstrap ne le fait pas pour vous, mais il est assez facile à ajouter si vous en avez besoin.

En voici un exemple en pratique. Choisissez les font-sizes et les requêtes multimédias que vous souhaitez.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}