devstory

Le Tutoriel de Bootstrap Text Utility

1- Text Alignment (Alignement de Texte)

text-justify-example
<h4>.text-justify</h4>
<p class="text-justify">
   In my younger and more vulnerable years my father gave me some advice that
   I've been turning over in my mind ever since.
   'Whenever you feel like criticizing anyone,' he told me,
   'just remember that all the people in this world haven't had the advantages that you've had.'
</p>
text-alignment-example
<h4 class="mb-3">Text Alignment</h4>

<p class="text-left">(.text-left) Left aligned text.</p>
<p class="text-center">(.text-center) Center aligned text.</p>
<p class="text-right">(.text-right) Right aligned text.</p>
D'autre classses peuvent être utilisées dans la situation "Responsive" :
  • text-left
  • text-center
  • text-right
  • text-sm-left
  • text-sm-center
  • text-sm-right
  • text-md-left
  • text-md-center
  • text-md-right
  • text-lg-left
  • text-lg-center
  • text-lg-right
  • text-xl-left
  • text-xl-center
  • text-xl-right
text-alignment-responsive-example
<h4 class="mb-3">Text Alignment</h4>

<p class="text-left text-sm-center text-md-right">
   (.text-left .text-sm-center .text-md-right)
</p>

2- Text wrapping & overflow

Wrapping est le phénomène selon lequel une partie du contenu du texte est abaissée aux lignes inférieures si la longueur du texte est supérieure à la largeur de l'élément père.
​​​​​​​
text-wrapping-example
<h4>Text Wrapping</h4>
<div class="border border-danger">
  Bootstrap is a free and open-source front-end framework.
</div>
Appliquez la classe .text-nowrap au élément père pour enlever le phénomène wrapping, mais vous verrez le trop-plein (overflow) de texte de l'élément père.
text-nowrap-example
<h4 class="mb-4">.text-nowrap</h4>

<div class="text-nowrap border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>
Pour éviter le trop-plein de texte de l'élément père, vous pouvez utiliser la classe .text-truncate pour appliquer au élément père. Le contenu du trop-plein est caché et des trois points (...) apparaîtrent à la fin du texte.
La classe .text-truncate applique seulement aux éléments pour établir {display:block} ou {display:inline-block}. Remarque : les <div>,<p> par défaut sont installés {display:block}.
text-truncate-example
<h4 class="mb-4">.text-truncate</h4>

<div class="text-truncate border border-danger">
   Bootstrap is a free and open-source front-end framework.
</div>

3- Text transform (Transformation de texte)

Bootstrap vous fournit quelques classes pour transformer (transform) un texte.
ClasseDescription
.text-lowercaseTransforme (transform) un texte en bas de casse (lowercase).
.text-uppercaseTransforme un texte en lettre majuscule (uppercase).
.text-capitalizeTous les premières caractères de chaque lettre seront en majuscule alors les autres caractères ne changeront pas.
text-transform-example
<h4 class="mb-3">Origin Text:</h4>
<p>bootSTrap teXt</p>
<hr>
<h5>.text-lowercase</h5>
<p class="text-lowercase">bootSTrap teXt</p>
<h5>.text-uppercase</h5>
<p class="text-uppercase">bootSTrap teXt</p>
<h5>.text-capitalize</h5>
<p class="text-capitalize">bootSTrap teXt</p>

4- Font weight & italic

Pour établir le poids (weight) et le style em italique (italic style) d'un texte dans CSS vous pouvez utiliser les manières ci-dessous :
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

font-style: normal;
font-style: italic;
font-style:oblique;
 
Au lieu des Css property mentionnées au-dessus, vous pouvez également utiliser les classes disponibles de Bootstrap :
  • .font-weight-bold
  • .font-weight-normal
  • .font-weight-light
  • .font-italic
font-weight-italic-example
<h4 class="mb-3">Font weight, italic</h4>

<p class="font-weight-bold">(.font-weight-bold) Bold text.</p>
<p class="font-weight-normal">(.font-weight-normal) Normal weight text.</p>
<p class="font-weight-light">(.font-weight-light) Light weight text.</p>
<p class="font-italic">(.font-italic) Italic text.</p>

5- Monospaced Font

Monospaced Font: la police que chaque caractère (character) a la même longueur horizontale. Cela ressemble à l'illustration suivante :
Utilisez Monospace Font avec CSS :

font-family: monospace;
Utilisez Monospace Font avec Bootstrap :
text-monospace-example.html
<div style="font-size:32px;">Default Font</div>
<div class="text-monospace" style="font-size:32px;">Monospace Font</div>
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.