Typographie Bootstrap4
Paramètres par défaut de Bootstrap 4
La taille de police par défaut de Bootstrap 4font-sizeest de 16px, laline-heightest de 1.5.
La famille de polices par défautfont-familyest "Helvetica Neue", Helvetica, Arial, sans-serif.
De plus, tous les<p>éléments ontmargin-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 (2.5rem = 40px)</h1>
<h2>h2 Titre Bootstrap (2rem = 32px)</h2>
<h3>h3 Titre Bootstrap (1.75rem = 28px)</h3>
<h4>h4 Titre Bootstrap (1.5rem = 24px)</h4>
<h5>h5 Titre Bootstrap (1.25rem = 20px)</h5>
<h6>h6 Titre Bootstrap (1rem = 16px)</h6>
</div>
Essayez-le vous-même »
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 vous-même »
<small>
Dans Bootstrap 4, 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 vous-même »
<mark>
Bootstrap 4 définit<mark>comme ayant un arrière-plan jaune et un peu de padding :
Exemple
<div class="container">
<h1>Texte surligné</h1>
<p>Utilisez l'élément mark pour<mark>surligner</mark>texte.</p>
</div>
Essayez-le vous-même »
<abbr>
Bootstrap 4 définit le style de l'élément HTML<abbr>comme une bordure en pointillés affichée en 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 vous-même »
<blockquote>
Pour le contenu cité, vous pouvez ajouter le<blockquote>à la.blockquoteclasse :
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 vous-même »
<dl>
Bootstrap 4 définit le style 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 vous-même »
<code>
Bootstrap 4 définit le style de l'élément HTML<code>comme suit :
Exemple
<div class="container">
<h1>Extraits 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 4 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 4 définit le HTML<pre>Les styles de l'élément sont les suivants :
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 ci-dessous fournit plus d'exemples de classes de typographie Bootstrap 4 :
| Classe | Description | Exemple |
|---|---|---|
| .font-weight-bold | Texte en gras | Essayez-le |
| .font-weight-normal | Texte normal | Essayez-le |
| .font-weight-light | Texte plus léger | Essayez-le |
| .font-italic | Texte en italique | Essayez-le |
| .lead | Faire ressortir un paragraphe | Essayez-le |
| .small | Spécifie un texte plus petit (85% de l'élément parent) | Essayez-le |
| .text-left | Aligné à gauche | Essayez-le |
| .text-center | Aligné au centre | Essayez-le |
| .text-right | Aligné à droite | Essayez-le |
| .text-justify | Définit l'alignement du texte ; le texte dans les paragraphes qui dépasse l'écran est automatiquement renvoyé à la ligne. | Essayez-le |
| .text-nowrap | Le texte qui dépasse l'écran dans un paragraphe n'est pas renvoyé à la ligne. | Essayez-le |
| .text-lowercase | Mettre le texte en minuscules | Essayez-le |
| .text-uppercase | Mettre le texte en majuscules | Essayez-le |
| .text-capitalize | Mettre la première lettre de chaque mot en majuscule | Essayez-le |
| .initialism | Affiche le texte de l'élément <abbr> dans une petite police et peut convertir les lettres minuscules en majuscules. | Essayez-le |
| .list-unstyled | Supprime le style de liste par défaut et aligne à gauche les éléments de liste (dans <ul> et <ol>). Cette classe s'applique uniquement aux éléments de liste enfants directs. (Si vous devez supprimer les éléments de liste imbriqués, vous devez appliquer ce style à la liste imbriquée.) | Essayez-le |
| .list-inline | Placer tous les éléments de liste sur la même ligne | Essayez-le |
| .pre-scrollable | Rend l'élément <pre> défilable. La hauteur maximale de la zone de bloc de code est de 340px. Une fois cette hauteur dépassée, une barre de défilement apparaît sur l'axe Y. | Essayez-le |