Typographie de Bootstrap

Présentation

• Bootstrap comprend des styles qui définissent l’apparence des éléments de texte.
• Bootstrap applique une mise en forme sur toute les balises sémantiques HTML5.
• La typographie est l’un des éléments les plus importants d’une conception. Si elle est conçue correctement, elle captera l’attention de l’utilisateur, établira une hiérarchie des informations et créera une harmonie dans la page.

styles d'affichage de base (par défaut)

• Tout d’abord, il convient de noter que Bootstrap 4 modifie également les paramètres de texte par défaut.
• Ces changements incluent:
  • La taille de la police est de 16 pixels et la hauteur de ligne est de 1.5rem.
  • La famille de polices par défaut est "Helvetica Neue", Helvetica, Arial, sans-serif
  • Chaque élément <p> est maintenant configuré pour avoir margin-top: 0 et margin-bottom: 1rem (16px)

Les titres

• Tous les titres HTML (h1 à h6) sont stylés dans Bootstrap.
• Bootstrap définit les titres h1 à h6 comme suit :

<h1>h1. Titre</h1>
<h2>h2. Sous-titre</h2>
<h3>h3. Sous-sous-titre</h3>
<h4>h4. Sous-sous-sous-titre</h4>
<h5>h5. Sous-sous-sous-sous-titre</h5>
<h6>h6. Sous-sous-sous-sous-sous-titre</h6>

Les sous-titres

• Pour ajouter un sous-titre à l'un des en-têtes, ajoutez simplement <small> autour de l'un des éléments ou ajoutez la classe .small et vous obtiendrez un texte plus petit dans une couleur plus claire, comme indiqué dans l'exemple ci-dessous:

  <h1>h1 entête <small>Sous-titre</small></h1>
  <h2>h2 entête <small>Sous-titre</small></h2>
  <h3>h3 entête <small>Sous-titre</small></h3>
  <h4>h4 entête <small>Sous-titre</small></h4>
  <h5>h5 entête <small>Sous-titre</small></h5>
  <h6>h6 entête <small>Sous-titre</small></h6>

class: .lead

• Pour mettre un paragraphe en évidence, ajoutez class = "lead". Cela vous donnera une taille de police plus grande, un poids plus léger et une hauteur de ligne plus grande comme dans l'exemple suivant:

<small>Ce contenu est dans un <small> tag</small><br>
               <strong>Ce contenu est dans un<strong> tag</strong><br>
               <em>Ce contenu est dans un<em>tag et est rendu en italique</em><br>
               <p class="text-left">Texte aligné à gauche.</p>
               <p class="text-center">Texte centré.</p>
               <p class="text-right">Texte aligné à droite.</p>
               <p class="text-muted">Ce contenu est mis en sourdine</p>
               <p class="text-primary">Ce contenu comporte une classe primary</p>
               <p class="text-success">Ce contenu comporte une classe success</p>
               <p class="text-info">Ce contenu comporte une classe info</p>
               <p class="text-warning">Ce contenu comporte une classe warning</p>
               <p class="text-danger">Ce contenu comporte une classe de danger</p>
            

Orientation du texte

1. L'alignement par défaut

   • text-left: aligné à gauche
   • text-center: le texte est centré
   • text-right: aligné à droite
   • text-justify: justifiée
   • text-nowrap: obstruction du soulèvement

2. Les types d’alignement

   • De plus, il existe des variantes d’alignement qui ne sont valables que pour certaines fenêtres.
     • text-xs-left: Aligné à gauche lorsque la fenêtre "xs" est utilisée.
     • text-xs-center: Le texte est centré lorsque la fenêtre "xs" est utilisée.
     • text-xs-right: Aligné à droite lorsque la fenêtre "xs" est utilisée.
   • Ceci s'applique également à "sm", "md", "lg" et "xl".

Transformations du texte

• Les transformations convertissent le texte en minuscule en majuscule et vice versa.
  • text-lowercase: Convertit en minuscule
  • text-uppercase: Convertit en majuscule
  • text-capitalize: La première lettre de chaque mot est en majuscule.
  • text-weight-bold: Gras sans balise explicite.
  • text-weight-normal: Poids normal sans étiquette explicite
  • text-italics: Italique sans balise explicite

Les classes utilisées

Classe	Description
.lead	Fait un paragraphe démarquer
.small	Indique un petit texte (mis à 85% de la taille du parent)
.text-left	Indique un texte aligné à gauche
.text-center	Indique le texte aligné au centre
.text-right	Indique le texte aligné à droite
.text-justify	Indique un texte justifié
.text-nowrap	Indique texte nowrap,Empêchez le texte de s'habiller avec une .text-nowrapclasse.
.text-lowercase	Indique que le texte est en minuscules
.text-uppercase	Indique que le texte est en majuscule
.text-capitalize	Indique texte capitalisés,Transformez du texte en composants avec des classes de capitalisation de texte.
.initialism	Affiche le texte à l'intérieur d'un élément <abbr> dans une taille de police légèrement plus petite
.list-unstyled	Supprime le style de liste par défaut et la marge de gauche sur les éléments de liste (fonctionne aussi bien sur <ul> et <ol>). Cette classe est appliquée uniquement aux éléments de la liste
.list-inline	Place tous les éléments de la liste sur une seule ligne
.dl-horizontal	Aligne les termes (<dt>) et descriptions (<dd>) dans <dl> côte-à-côte.
.pre-scrollable	Applique le défilement sur un élément <pre>