Faire ressortir visuellement des textes
Les classes .display-1, .display-2, .display-3 et .display-4 permettent de faire ressortir visuellement un titre par rapport au reste du contenu.
On va pouvoir appliquer ces classes à nos éléments h afin de les styliser davantage. Voici l’effet produit par ces classes :
See the Pen
Bootstrap 2.2.1 by Pierre (@pierregiraud)
on CodePen.
Pour faire ressortir visuellement un paragraphe, on utilisera plutôt la classe .lead qui va produire le résultat suivant :
See the Pen
Bootstrap 2.2.2 by Pierre (@pierregiraud)
on CodePen.
Enfin, Bootstrap met à notre disposition les classes .h1, .h2… .h6 qui vont nous permettre d’appliquer des styles similaires aux titres à n’importe quel autre contenu textuel.
Cela va être très utile dans les situations où il n’est pas sémantiquement correct d’utiliser un élément de type h mais où on voudra quand même réutiliser les styles des titres (car je vous rappelle que le rôle du HTML est de donner du sens aux contenus, pas d’appliquer des styles).
See the Pen
Bootstrap 2.2.3 by Pierre (@pierregiraud)
on CodePen.
Modifier le poids ou le style d’une police
Pour modifier le poids d’une police, c’est-à-dire son épaisseur, on va pouvoir utiliser l’une des classes suivantes :
.font-weight-lighterpour obtenir un texte très fin ;.font-weight-lightpour obtenir un texte fin ;.font-weight-normalpour obtenir un texte normal ;.font-weight-boldpour obtenir un texte épais ;.font-weight-bolderpour obtenir un texte très épais.
Notez que les classes .font-weight-lighter et >.font-weight-bolder vont modifier l’épaisseur de la police de l’élément relativement à celle de son parent.
Pour qu’un texte s’affiche en italique, on peut utiliser la classe .font-italic.
See the Pen
Bootstrap 2.2.4 by Pierre (@pierregiraud)
on CodePen.
Modifier la casse des textes
Bootstrap nous fournit 3 classes permettant de modifier la casse (le fait que le texte s’affiche en majuscules ou en minuscules) de nos textes :
- La classe
.text-lowercasefera qu’un texte s’affiche en minuscules ; - La classe
.text-uppercasefera qu’un texte s’affiche en majuscules ; - La classe
.text-capitalizene va transformer que la première lettre de chaque mot pour la mettre en majuscules.
See the Pen
Bootstrap 2.2.5 by Pierre (@pierregiraud)
on CodePen.
Aligner un texte dans son élément parent
Bootstrap nous fournit différentes classes nous permettant d’aligner un texte à droite, au centre, à gauche ou de le justifier. Les classes d’alignement de base sont les suivantes :
.text-leftva aligner un texte à gauche ;.text-centerva centrer un texte ;.text-rightva aligner un texte à droite ;.text-justifyva justifier un texte.
Nous allons également pouvoir gérer l’alignement de nos textes de façon responsive, c’est-à-dire en leur donnant des ordres d’alignement différents en fonctions des différentes tailles de fenêtres de nos visiteurs.
Pour cela, nous allons devoir ajouter les préfixes connus -sm-, -md-, -lg- et -xl- à nos classes ci-dessus.
Notez cependant que l’utilisation de classes responsive d’alignement n’est possible que pour des alignements à gauche, au milieu et à droite mais pas pour un alignement justifié.
See the Pen
Bootstrap 2.2.6 by Pierre (@pierregiraud)
on CodePen.
Gérer les dépassements
Par défaut, un texte d’une page utilisant Bootstrap essaiera de ne pas dépasser de son conteneur et ira se positionner sur une nouvelle ligne s’il est plus long que son conteneur.
Pour annuler ce comportement et laisser un texte dépasser de son conteneur, on peut utiliser la classe .nowrap. Pour rétablir le comportement de non-dépassement, on utilisera la classe .text-wrap.
Dans le cas où on dispose d’un texte relativement long et d’un petit conteneur, on peut choisir de le tronquer, c’est-à-dire de n’afficher que la partie qui rentre dans le conteneur en utilisant la classe .text-truncate.
See the Pen
Bootstrap 2.2.7 by Pierre (@pierregiraud)
on CodePen.
Autres classes Bootstrap disponibles pour styliser nos textes
Bootstrap fournit encore d’autres classes pour nous permettre de styliser l’affichage qui peuvent s’avérer intéressante dans certaines situations particulières mais qui vont être beaucoup moins utilisées que celles déjà présentées dans cette leçon.
Parmi ces classes, on peut notamment citer les suivantes :
| Classe | Définition |
|---|---|
| .lead | Fait ressortir un paragraphe du reste du texte |
| .text-monospace | Applique la police Monospace à un texte |
| .initialism | Affiche le texte contenu dans un élément abbr avec une taille de police légèrement plus petite |
| .pre-scrollable | Permet d’affiche une barre de défilement (scroll) dans un élément pre |
