Comment obtenir l'alignement du texte dans les tableaux Bootstrap ?

Alignement du texte dans le framework Bootstrap

Introduction :

Les tableaux sont un élément commun utilisé pour présenter les données dans un format structuré. L'alignement du texte dans les cellules du tableau est crucial pour la lisibilité et l'amélioration de la présentation globale. Ce guide fournit des informations sur l'utilisation du framework Bootstrap de Twitter pour obtenir l'alignement du texte dans les tableaux.

Bootstrap 3 :

Bootstrap 3 propose des classes d'alignement de texte simples :

• text-left : Aligne le texte à gauche.
• text-center : Centre le texte horizontalement.
• text -right : Aligne le texte à droite.
• text-justify : Justifie le texte pour remplir uniformément l'espace disponible.
• text-nowrap : Empêche le retour à la ligne du texte, en conservant une seule ligne.

Par exemple, pour aligner un en-tête de tableau pour une valeur totale à droite :

<th><span class="align-right">Total</span></th>

Pour aligner le cellule de données du tableau correspondante à droite :

<td><span class="align-right">,000,000.00</span></td>

Bootstrap 4 et Bootstrap 5 :

Dans Bootstrap 4 et 5, les classes d'alignement de texte ont été étendues, fournissant contrôle plus granulaire :

• .text-start : aligne le texte à gauche dans les langues LTR (de gauche à droite) et à droite dans RTL (de droite à droite). left) langues.
• .text-center : Centre le texte horizontalement.
• .text-end : Aligne le texte vers la droite dans les langues LTR et à gauche dans les langages RTL.

De plus, Bootstrap 4 et 5 introduisent des classes d'alignement de texte réactives, permettant différents alignements sur différentes tailles de fenêtre. Par exemple, pour aligner le texte à droite dans les fenêtres d'affichage grandes et extra-larges :

<p class="text-lg-right text-xl-right">Right aligned text on large and extra-large viewports.</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!