Typographie Bootstrap5

Paramètres par défaut de Bootstrap 5

La valeur par défaut de Bootstrap 5font-sizeest de 16px,line-heightest de 1.5.

La famille de polices par défautfont-familyest "Helvetica Neue", Helvetica, Arial, sans-serif.

De plus, tous les<p>élémentsmargin-top: 0 、 margin-bottom: 1rem (16px).

<h1> - <h6>

Bootstrap définit des styles pour tous les titres HTML (h1 à h6). Voir l'exemple ci-dessous :

Exemple

<div class="container"> <h1>h1 Titre Bootstrap</h1> <h2>h2 Titre Bootstrap</h2> <h3>h3 Titre Bootstrap</h3> <h4>h4 Titre Bootstrap</h4> <h5>h5 Titre Bootstrap</h5> <h6>h6 Titre Bootstrap</h6> </div>

Essayez-le »

Vous pouvez également utiliser.h1pour.h6classes pour styliser les éléments :

Exemple

<div class="container"> <p class="h1">h1 Titre Bootstrap</p> <p class="h2">h2 Titre Bootstrap</p> <p class="h3">h3 Titre Bootstrap</p> <p class="h4">h4 Titre Bootstrap</p> <p class="h5">h5 Titre Bootstrap</p> <p class="h6">h6 Titre Bootstrap</p> </div>

Essayez-le »

Classes de titres Display

Bootstrap fournit également quatre classes Display pour contrôler les styles de titres : .display-1, .display-2, .display-3, .display-4.

Exemple

<div class="container"> <h1>Titre d'affichage</h1> <p>Les titres d'affichage peuvent produire des styles de police plus grands et plus gras.</p> <h1 class="display-1">Titre d'affichage 1</h1> <h1 class="display-2">Titre d'affichage 2</h1> <h1 class="display-3">Titre d'affichage 3</h1> <h1 class="display-4">Titre d'affichage 4</h1> </div>

Essayez-le »

<small>

Dans Bootstrap 5, l'élément HTML<small>est utilisé pour créer un texte plus petit et de couleur plus claire :

Exemple

<div class="container"> <h1>Titre de texte plus petit</h1> <p>L'élément small est utilisé pour un texte plus petit et de couleur plus claire :</p> <h1>Titre h1<small>Sous-titre</small></h1> <h2>Titre h2<small>Sous-titre</small></h2> <h3>Titre h3<small>Sous-titre</small></h3> <h4>titre h4<small>Sous-titre</small></h4> <h5>titre h5<small>Sous-titre</small></h5> <h6>titre h6<small>Sous-titre</small></h6> </div>

Essayez-le »

<mark>

Bootstrap 5 définit la balise<mark>et la classe.markavec un arrière-plan jaune et un peu de remplissage :

Exemple

<div class="container"> <h1>Texte surligné</h1> <p>Utilisez l'élément mark pour<mark>surligner</mark>texte.</p> </div>

Essayez-le »

<abbr>

Bootstrap 5 définit le style de l'élément HTML<abbr>s'affiche sous la forme d'une bordure en pointillés au bas du texte :

Exemple

<div class="container"> <h1>Abréviations</h1> <p>L'élément abbr est utilisé pour baliser une abréviation ou un acronyme :</p> <p>Le <abbr title="Organisation mondiale de la Santé">OMS</abbr> a été fondée en 1948.</p> </div>

Essayez-le »

<blockquote>

Pour le contenu cité, vous pouvez utiliser<blockquote>avec la classe.blockquote:

Exemple

<div class="container"> <h1>Citations</h1> <p>L'élément blockquote est utilisé pour présenter du contenu d'une autre source :</p> <blockquote class="blockquote"> <p>Depuis 50 ans, le WWF protège l'avenir de la nature. La principale organisation mondiale de conservation, le WWF travaille dans 100 pays et est soutenu par 1.2 million de membres aux États-Unis et près de 5 millions dans le monde.</p> <footer class="blockquote-footer">Du site web du WWF</footer> </blockquote> </div>

Essayez-le »

<dl>

Bootstrap 5 définit les styles de l'élément HTML<dl>comme suit :

Exemple

<div class="container"> <h1>Listes de description</h1> <p>L'élément dl indique une liste de description :</p> <dl> <dt>Café</dt> <dd>- boisson chaude noire</dd> <dt>Lait</dt> <dd>- boisson froide blanche</dd> </dl> </div>

Essayez-le »

<code>

Bootstrap 5 définit les styles de l'élément HTML<code>comme suit :

Exemple

<div class="container"> <h1>Extrait de code</h1> <p>Vous pouvez placer certains éléments de code à l'intérieur de l'élément code :</p> <p>Les éléments HTML suivants :<code>span</code>, <code>section</code>, et<code>div</code>sont utilisés pour définir des parties du contenu du document.</p> </div>

Essayez-le vous-même »

<kbd>

Bootstrap 5 définit les styles de l'élément HTML<kbd>comme suit :

Exemple

<div class="container"> <h1>Entrées clavier</h1> <p>Pour indiquer une entrée qui est généralement saisie au clavier, utilisez l'élément kbd :</p> <p>Utilisez <kbd>ctrl + p</kbd> pour ouvrir la boîte de dialogue Imprimer.</p> </div>

Essayez-le vous-même »

<pre>

Bootstrap 5 définit les styles de l'élément HTML<pre>comme suit :

Exemple

<div class="container"> <h1>Plusieurs lignes de code</h1> <p>Pour plusieurs lignes de code, utilisez l'élément pre :</p> <pre> Le texte dans un élément pre est affiché dans une police à chasse fixe, et il préserve à la fois les espaces et les sauts de ligne. </pre> </div>

Essayez-le vous-même »

Autres classes de typographie

Le tableau suivant fournit des exemples d'autres classes de typographie Bootstrap 5 :

Nom de classe Description Exemple
.lead Faire ressortir un paragraphe Essayez-le vous-même
.small Spécifie un texte plus petit (85% de l'élément parent) Essayez-le vous-même
.text-start Aligné à gauche Essayez-le vous-même
.text-center Centré Essayez-le vous-même
.text-end Aligné à droite Essayez-le vous-même
.text-justify Définir l'alignement du texte ; le texte d'un paragraphe qui dépasse l'écran passe automatiquement à la ligne. Essayez-le vous-même
.text-nowrap Le texte d'un paragraphe qui dépasse l'écran ne passe pas à la ligne. Essayez-le vous-même
.text-lowercase Mettre le texte en minuscules Essayez-le vous-même
.text-uppercase Mettre le texte en majuscules Essayez-le vous-même
.text-capitalize Mettre en majuscule la première lettre de chaque mot Essayez-le vous-même
.initialism Le texte à l'intérieur de l'élément <abbr> est affiché dans une police plus petite et peut convertir les lettres minuscules en lettres majuscules. Essayez-le vous-même
.list-unstyled Supprime le style de liste par défaut, et les éléments de liste sont alignés à gauche (dans <ul> et <ol>). Cette classe ne s'applique qu'aux éléments de liste enfants directs. (Si vous devez supprimer les éléments de liste imbriqués, vous devez utiliser ce style sur la liste imbriquée.) Essayez-le vous-même
.list-inline Placer tous les éléments de liste sur la même ligne Essayez-le vous-même
Autres extensions