Bootstrap 4 : le texte

image_pdfimage_print

Dans ce chapitre nous allons voir comment Bootstrap met en forme les éléments de base des pages : titres, texte, abréviations, citations, listes… Nous verrons aussi les utilitaires qui permettent de centrer, montrer ou cacher, créer des remplissages et des marges … En gros la base de ce qui constitue les pages.

Une page d’exemple

Comme rien ne vaut les exemples voici une page qui regroupe les principaux éléments que nous allons voir au cours de ce chapitre avec une utilisation concrète de la grille :

<!DOCTYPE HTML>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="css/bootstrap.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <header class="row">
        <div class="col">
          <h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em>
          </p>
          <p>
            Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux, ainsi que du <abbr title="Centre de Recherche sur les Félins" class="initialism">CRF</abbr>. 
          </p>
          <p class="lead text-right">
            N'hésitez pas à soutenir la cause des tigres !
          </p>
          <blockquote class="blockquote text-right">
            Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. 
            Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde. L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur, il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles. Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.
            <footer class="blockquote-footer">Texte recueilli dans <cite>Wikipedia</cite></footer>
          </blockquote>
        </div>
      </header>
      <section>
        <div class="row">
          <div class="col">
            <h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t1.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t2.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t3.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t4.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t5.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t6.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t7.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t8.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t9.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t10.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t11.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="images/t12.jpg" alt="Tigre"></div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p><strong>Sous-espèces des tigres :</strong></p>
            <ul>
              <li>Tigre de Sibérie</li>
              <li>Tigre de Chine méridionale</li>
              <li>Tigre de Bali</li>
              <li>Tigre de d'Indochine</li>
              <li>Tigre de Malaisie</li>
              <li>Tigre de Java</li>
              <li>Tigre de Sumatra</li>
              <li>Tigre du Bengale</li>
              <li>Tigre de la Caspienne</li>
            </ul>
          </div>
          <div class="col-md-8">
            <img class="img-fluid" src="images/photo-tigre.jpg" alt="Tigre">
          </div>
        </div>
      </section>
      <section class="row">
        <div class="col">
          <h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>
          <dl class="row">
            <dt class="col-md-3">Grand Mekong</dt>
            <dd class="col-md-9">Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des habitats du fait du développement non durable d’infrastructures</dd>
            <dt class="col-md-3">Île de Sumatra</dt>
            <dd class="col-md-9">Production d’huile de palme et de pâtes à papiers</dd>
            <dt class="col-md-3 text-truncate">Indonésie et Malaisie</dt>
            <dd class="col-md-9">Pâte à papier, l’huile de palme et le caoutchouc</dd>
            <dt class="col-md-3">États-Unis</dt>
            <dd class="col-md-9">Les tigres captifs représentent un danger pour les tigres sauvages</dd>
            <dt class="col-md-3">Europe</dt>
            <dd class="col-md-9">Gros appétit pour l’huile de palme</dd>
            <dt class="col-md-3">Népal</dt>
            <dd class="col-md-9">Commerce illégal de produits dérivés de tigres</dd>
          </dl>
        </div>
        <div class="w-100"></div>
        <blockquote class="col blockquote">
          Il est vital de préserver un espace adapté à sa survie. Malgré l'augmentation de la pollution, malgré l’extension des zones cultivées, malgré les incendies, malgré le trafic illégal à des fins purement commerciales, il est possible de protéger son habitat tout en soutenant les intérêts des populations locales.
          <footer class="blockquote-footer">Texte recueilli dans <cite>Planète tigre</cite></footer>
        </blockquote>
        <div class="w-100"></div>
        <p class="col text-justify">
          Nous avons lancé une grande opération de préservation des tigres et nous vous convions à participer à cette démarche essentielle à la survie de ces nobles animaux. Pour tout renseignements veuillez me contacter à l'adresse ci-dessous.
        </p>
      </section>
      <hr>
      <footer class="row justify-content-center">
        <address>
          <strong>Tigrou Michel</strong><br>
          Avenue des poils<br>
          25600 Le Félin
        </address>
      </footer>
    </div>
  </body>
</html>

Affichage sur très grand écran

Partie supérieure :

Partie inférieure :

Affichage sur tablette

Sur tablette la principale adaptation a lieu au niveau des photos :

Affichage sur smartphone en mode paysage et portrait

Pour ne pas alourdir ce chapitre je vous invite à voir l’aspect pour smartphones directement en ligne.

Tester en ligne

Les titres

Titres classiques

Bootstrap met en forme les titres pour les balises de <h1>à<h6> :

On a un titre <h1> dans la page d’exemple :

On remarque du texte délavé dans la fin du titre. C’est la classe text-muted qui a ici été utilisée :

<h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>

Cette classe fait partie des classes utilitaires de Bootstrap. Il y a d’autres classes utilitaires dans ce code mais j’en parlerai plus loin dans un sous-chapitre dédié.

Vous pouvez obtenir le même effet visuel avec les nouvelles classes h1 à h6 .

Quel est l’intérêt de ces classes puisqu’on a déjà les balises ?

Les balises <h1> à <h6> sont de type block. Imaginez que vous vouliez cet aspect pour un élément en ligne. Vous pouvez alors utiliser ces classes :

<p>Ceci : <span class="h1">ressemble à un titre</span> mais n'en est pas un.</p>

Classe « display »

Une nouvelle classe fait aussi son apparition dans cette version pour créer des titres qui se démarquent du reste de la page :

<h1 class="display-4">Classe display-4</h1>
<h1 class="display-3">Classe display-3</h1>
<h1 class="display-2">Classe display-2</h1>
<h1 class="display-1">Classe display-1</h1>

C’est ce qui est utilisé pour ce titre de la page d’exemple :

Avec ce code :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>

Je parlerai plus loin des autres classes utilisées. Notez que l’effet visuel serait le même quelle que soit la balise de titre utilisée. Ici j’ai utilisé<h2>pour la sémantique de la page.

Classe lead

Une autre façon de mettre du texte en valeur sans que ce soit un titre est d’utiliser la classe lead. Cette classe est utilisée dans cette partie de la page d’exemple :

<p class="lead text-right">
  N'hésitez pas à soutenir la cause des tigres !
</p>

Cette classe utilise ces règles :

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

Citations et abréviations

Les citations

La page d’exemple utilise deux fois la balise <blockquote> pour des citations.

Il y en a une en bas de la page avec ce code :

<blockquote class="col blockquote">
  Il est vital ...
  <footer class="blockquote-footer">Texte recueilli dans <cite>Planète tigre</cite></footer>
</blockquote>

Avec ce rendu :

Il y a un footer pour insérer la référence de la citation, la mise en forme de cette référence fonctionne grâce à la présence de la classe blockquote-footer.

La seconde citation est en haut de la page :

<blockquote class="blockquote text-right">
  Le Tigre ...
  <footer class="blockquote-footer">Texte recueilli dans <cite>Wikipedia</cite></footer>
</blockquote>

Avec ce rendu :

On remarque deux choses :

  • la justification se fait sur la droite parce que j’ai utilisé la classe utilitaire de texte text-right, sinon elle serait à gauche comme dans le cas vu ci-dessus,
  • il y a un footer pour insérer la référence de la citation comme on l’a déjà vu ci-dessus pour les mêmes raisons.

Les abréviations

Il y a deux abréviations dans la page :

<p>
  Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux, ainsi que du <abbr title="Centre de Recherche sur les Félins" class="initialism">CRF</abbr>. 
</p>

Voici le rendu pour la première :

La seconde utilise la classe initialism pour avoir une police légèrement plus petite :

Vous ne voyez pas la différence ?

J’avoue que moi non plus, la proportion retenue est 90%.

Listes classiques et listes de définitions

Les listes classiques

Il y a une liste non ordonnée dans la page d’exemple :

<ul>
  <li>Tigre de Sibérie</li>
  <li>Tigre de Chine méridionale</li>
  <li>Tigre de Bali</li>
  <li>Tigre de d'Indochine</li>
  <li>Tigre de Malaisie</li>
  <li>Tigre de Java</li>
  <li>Tigre de Sumatra</li>
  <li>Tigre du Bengale</li>
  <li>Tigre de la Caspienne</li>
</ul>

Avec ce rendu :

Si vous ne voulez pas voir apparaître les puces utilisez la classe list-unstyled :

<ul class="list-unstyled">

Vous obtenez alors cet affichage :

Une autre possibilité consiste à avoir la liste en ligne avec les classes list-inline et list-inline-item. Ce n’est alors plus vraiment une liste et les cas d’utilisation ne me semblent pas très clairs.

<ul class="list-inline">
    <li class="list-inline-item">Tigre de Sibérie</li>
    ...
</ul>

Évidemment dans la page d’exemple ce n’est pas très heureux comme résultat :

Les listes de définitions

On a une liste de définition sur la page d’exemple :

<div class="col">
  <h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>
  <dl class="row">
    <dt class="col-md-3">Grand Mekong</dt>
    <dd class="col-md-9">Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des habitats du fait du développement non durable d’infrastructures</dd>
    ...
    <dt class="col-md-3">Népal</dt>
    <dd class="col-md-9">Commerce illégal de produits dérivés de tigres</dd>
  </dl>
</div>

La mise en page est assurée par la grille et voici le rendu sur grand écran :

Remarquez cette ligne de code :

<dt class="col-md-3 text-truncate">Indonésie et Malaisie</dt>

On utilise la classe text-truncate pour dire de raccourcir le texte s’il ne rentre pas complètement dans l’espace, ce qui est le cas sur tablette :

Si on n’utilise pas cette classe c’est un peu le désordre dans la liste :

Étant donné que j’ai utilisé des classes col-md-* sur les smartphones tout s’empile :

Classes utilitaires

Bootstrap est muni de nombreuses classes utilitaires bien pratiques, que vous utiliserez fréquemment, et que nous allons voir à présent.

Positionnement horizontal du texte

On a souvent besoin de placer du texte à droite, au centre, ou même parfois de le forcer à gauche. On veut aussi pouvoir le justifier. Voici les classes disponibles :

<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-justify">Texte justifié</p>
<p class="text-nowrap">Texte qui ne passe pas à la ligne même s'il n'a plus de place</p>

Voici le rendu :

On utilise le centrage dans la page d’exemple, par exemple pour ce titre :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>

On utilise la justification dans un paragraphe en bas de la page :

<p class="col text-justify">
  Nous avons lancé une grande opération de préservation des tigres et nous vous convions à participer à cette démarche essentielle à la survie de ces nobles animaux. Pour tout renseignements veuillez me contacter à l'adresse ci-dessous.
</p>

Les 3 premières classes existent en version « responsive » : text-sm-left, text-sm-center, text-sm-right

Invisibilité

Pour rendre un élément invisible on peut utiliser les classes dont j’ai déjà parlé dans la première partie de ce cours. Dans la page d’exemple on cache le titre « Quelques photos de tigres » sur les tablettes et smartphones :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>

Transformations du texte

On joue avec la casse

Regardez cette ligne de code de la page d’exemple :

<h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>

La classe text-uppercase met tous les caractères en majuscules :

Il existe ces deux autres classes :

  • text-lowercase pour tout mettre en minuscules,
  • text-capitalize pour mettre uniquement le premier caractère en majuscule.

On joue avec les couleurs

Regardez ce code dans la page d’exemple :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>

La classe text-danger met en rouge le texte du titre :

Il y a ainsi 7 classes pour colorer le texte :

<div class="container bg-dark">
  <p class="text-muted">Texte délavé</p>
  <p class="text-primary">Texte primaire</p>
  <p class="text-secondary">Texte secondaire</p>
  <p class="text-success">Texte vert</p>
  <p class="text-info">Texte cyan</p>
  <p class="text-warning">Texte orange</p>
  <p class="text-danger">Texte rouge</p>
  <p class="text-white">Texte blanc</p>
  <p class="text-dark bg-white">Texte noir</p>
</div>

Le texte délavé a été utilisé pour une partie du titre de la page d’exemple.

On peut aussi colorer le fond plutôt que le texte, c’est ce qui a été fait pour ce titre sur la page d’exemple :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>

Voici toutes les possibilités :

<p class="bg-primary text-white">Fond bleu</p>
<p class="bg-success text-white">Fond vert</p>
<p class="bg-info text-white">Fond cyan</p>
<p class="bg-warning text-white">Fond orange</p>
<p class="bg-danger text-white">Fond rouge</p>
<p class="bg-dark text-white">Fond noir</p>
<p class="bg-light">Fond délavé</p>
<p class="bg-white">Fond blanc</p>

Marges et remplissage

Une nouveauté intéressante de la version 4 réside dans la création de classes pour les marges et le remplissage (padding). Regardez par exemple cette partie du code de la page d’exemple :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>

Vous y trouvez la classe p-md-3 qui peut se lire ainsi :

  • p : padding
  • md : medium
  • 3 : valeur 3 (ça va de 0 à 5)

Autrement dit un remplissage de valeur moyenne. En voici une illustration :

Dans ce cas on obtiendrait le même résultat avec une marge, donc la classe m-md-3. Vous avez compris le principe. Plutôt que de vous donner la liste complète des classes, que vous pouvez trouver sur le site, je préfère vous expliquer la logique des appellations.

La classe est composée de trois éléments, dont le troisième est optionnel, séparés par des traits d’union:

{propriété}{côtés optionnels}-{support optionnel}-{dimension}

1) La propriété définit le type :

  • m : marge
  • p : remplissage (padding)

2) Les côtés définissent la position :

  • t : haut (top)
  • r : droite (right)
  • b : bas (bottom)
  • l : gauche (left)
  • x : gauche et droite
  • y : haut et bas

3) Le dernier élément définit la valeur :

  • 0 : aucune valeur
  • 6 : valeur maximale

Par exemple on a ce code dans la page d’exemple :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>

La classe mb-3 crée des marges en haut et en bas de valeur moyenne pour tous les supports :

Ces classes permettent d’éviter de créer des règles spécifiques pour peaufiner les mises en page.

En résumé

  • Bootstrap met en forme automatiquement les balises du contenu des pages.
  • Bootstrap ajoute des classes pour modifier l’aspect du texte et du fond.
  • Bootstrap est muni de nombreuses classes utilitaires pour positionner texte et éléments et créer des remplissages et marges.

Laisser un commentaire