Bootstrap 4 : Texte et typographie

Bootstrap 4 applique certains styles et formatages par défaut sur les éléments HTML comme les titres, les paragraphes, les listes, ... Nous allons voir dans ce tutoriel ce qui est proposé à cet effet.

Pour commencer, notons que Bootstrap 4 définit, par défaut certains styles parmi tant d'autres : 

  • Taille de police (font-size) : 16px
  • Police (font-family) : Roboto,"Helvetica Neue",Arial,sans-serif,..
  • Paragraphe (<p>) : marge extérieure haut à 0 et marge extérieure bas à 16px (margin-top:0;margin-bottom:1rem)
  • Les titres (h1, h2, h3, h4, h5, h6) : marge extérieure haut à 0 et marge extérieure bas à 8px (margin-top:0;margin-bottom:.5rem)

Les titres

Les titres de <h1> à <h6> sont définis comme suit :

Titre Exemple Taille
h1

Titre Bootstrap h1

40px
h2

Titre Bootstrap h2

32px
h3

Titre Bootstrap h3

28px
h4

Titre Bootstrap h4

24px
h5
Titre Bootstrap h5
20px
h6
Titre Bootstrap h6
16px
<h1>Titre Bootstrap h1</h1>
<h2>Titre Bootstrap h2</h2>
<h3>Titre Bootstrap h3</h3>
<h4>Titre Bootstrap h4</h4>
<h5>Titre Bootstrap h5</h5>
<h6>Titre Bootstrap h6</h6>

Par ailleurs, bien que des styles soient appliqués directement sur les balises titre, on peut utiliser des classes pour avoir le même résultat sur d'autres éléments. Ces class sont explicites : 

Class Exemple Taille
.h1
Style titre Bootstrap h1
40px
.h2
Style titre Bootstrap h2
32px
.h3
Style titre Bootstrap h3
28px
.h4
Style titre Bootstrap h4
24px
.h5
Style titre Bootstrap h5
20px
.h6
Style titre Bootstrap h6
16px
<div class="h1">Style titre Bootstrap h1</div>
<div class="h2">Style titre Bootstrap h2</div>
<div class="h3">Style titre Bootstrap h3</div>
<div class="h4">Style titre Bootstrap h4</div>
<div class="h5">Style titre Bootstrap h5</div>
<div class="h6">Style titre Bootstrap h6</div>

Au delà des styles de titres traditionnels, il existe des styles de titres assez particuliers pour les titres d'affichage afin de se démarquer du reste du contenu avec une taille plus grande légèrement marquée : 

Class Exemple
.display-1
Display 1
.display-2
Display2
.display-3
Display 3
.display-4
Display 4
<h1 class="display-1">Titre avec la class display-1</h1>
<h1 class="display-2">Titre avec la class display-2</h1>
<h1 class="display-3">Titre avec la class display-3</h1>
<h1 class="display-4">Titre avec la class display-4</h1>

A l'intérieur d'un même titre, bootstrap 4 vous permet de définir une portion comme secondaire avec la balise <small> : 

Titre Exemple
h1

Titre avec portion secondaire

<h1>Titre avec <small>portion secondaire</small></h1>

Les paragraphes

Vous pouvez appliquer un style particulier pour faire ressortir un paragraphe avec la class .lead

Exemple

Un paragraphe normal sans la class lead

Un paragraphe ressorti avec la class lead
<p>Un paragraphe normal sans la class lead</p>
<p class="lead">Un paragraphe ressorti avec la class lead</p>

Les éléments HTML en ligne

Pour des éléments HTML se disposant en ligne, les styles suivants sont appliqués en fonction de l'effet recherché

Elément Exemple
<mark>

Un élément pour marquer en couleur de fond un texte

.mark

Une class pour marquer en couleur de fond un texte

<p>Un élément pour <mark>marquer</mark> en couleur de fond un texte</p>
<p>Une class pour <span class="mark">marquer</span> en couleur de fond un texte</p>
Elément Exemple
<del>

Un élément pour barrer un texte

<s>

Un élément pour barrer un texte

<p><del>Un élément pour barrer un texte</del></p>
<p><s>Un élément pour barrer un texte</s></p>
Elément Exemple
<ins>

Un élément pour souligner un texte

<u>

Un élément pour souligner un texte

<p><ins>Un élément pour souligner un texte</ins></p>
<p><u>Un élément pour souligner un texte</u></p>
Elément Exemple
<small>

Un élément pour un texte en petit caractère

.small

Une class pour un texte en petit caractère

<p><small>Un élément pour un texte en petit caractère</small></p>
<p class="small">Un élément pour un texte en petit caractère</p>
Elément Exemple
<strong>

Un élément pour un texte en gras

<p><strong>Un élément pour un texte en gras</strong></p>
Elément Exemple
<em>

Un élément pour un texte en italique

<p><em>Un élément pour un texte en italique</em></p>
Elément Exemple
<abbr>

HTML est le langage de balisage conçu pour représenter les pages web

L'élément abbr est utilisé pour les abréviations et permet d'afficher, au survol du curseur, un contenu développé de ladite abréviation.

<p><abbr title="HyperText Markup Language">HTML</abbr> est le langage de balisage conçu pour représenter les pages web</p>
Elément Exemple
<blockquote>

Une citation d'un auteur connu quelconque

Nom auteur dans source avec page

L'élément blockquote est utilisé pour les citations et permet d'afficher aussi la source avec la class blockquote-footer

<blockquote class="blockquote">
  <p>Une citation d'un auteur connu quelconque</p>
  <footer class="blockquote-footer">Nom auteur dans <cite title="Source Title">source avec page</cite></footer>
</blockquote>
Elément Exemple
<dl>
élément 1
- détails élément 1
élément 2
- détails élément 2

L'élément dl est utilisé pour des listes

<dl>
 <dt>élément 1</dt>
  <dd>- détails élément 1</dd>
 <dt>élément 2</dt>
  <dd>- détails élément 2</dd>
</dl>
Elément Exemple
<pre>
ce texte a  double espace avant et 
retourne à la ligne ici

L'élément pre affiche exactement ce qui est écrit en respectant le nombre d'espace et les retours à la ligne

<pre>
ce texte a  double espace avant et 
retourne à la ligne ici
</pre>
Elément Exemple
<code> HTML a des balises comme div, nav, span, article, ... pour construire une page.

L'élément code affiche de façon évidente les éléments concernés comme s'il s'agissait d'un code

<p>
 HTML a des balises comme <code>div</code>, <code>nav</code>, <code>span</code>, <code>article</code>, ... pour construire une page.
</p>
Elément Exemple
<kbd> Faites la combinaison ctrl + c du clavier pour copier un élément.

L'élément kbd permet d'afficher en forme de commande un texte généralement pour les touches de clavier.

<p>Faites la combinaison <kbd>ctrl + c</kbd> du clavier pour copier un élément.</p>

Des classes pour la mise en forme

class Description
.text-left Permet d'aligner un texte à gauche
.text-center Permet d'aligner un texte au centre
.text-right Permet d'aligner un texte à droite
.text-justify Permet de justifier un texte
.text-capitalize Permet d'écrire du texte en lettres capitales
.text-lowercase Permet d'écrire du texte en lettres minuscules
.text-uppercase Permet d'écrire du texte en lettres majuscules
.initialism Permet d'écrire du texte à l'intérieur d'un élément dans une taille de police légèrement plus petite
.list-inline Permet de placer les éléments d'une liste sur une ligne
.list-unstyled Permet de Supprimer le style de liste par défaut et la marge de gauche sur les éléments de liste (ul et ol). Cette classe est appliquée uniquement aux éléments de la liste
.dl-horizontal Permet d'aligner les termes (dt) et descriptions (dd) dans
côte-à-côte
.font-weight-bold Permet d'écrire du texte en gras
.font-weight-bolder Permet d'écrire du texte en gras
.font-weight-normal Permet d'écrire du texte normal (sans gras)
.font-weight-light Permet d'écrire du texte léger
.font-weight-lighter Permet d'écrire du texte léger
.text-decoration-none Permet de supprimer le soulignement d'un lien
.text-break Permet de garder la mise en forme en cas de long texte

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .