Wie erreicht man eine Textausrichtung in Bootstrap-Tabellen?

Textausrichtung im Bootstrap Framework

Einführung:

Tabellen sind ein häufig verwendetes Element Daten in einem strukturierten Format präsentieren. Die Ausrichtung von Text innerhalb von Tabellenzellen ist für die Lesbarkeit und die Verbesserung der Gesamtdarstellung von entscheidender Bedeutung. Dieser Leitfaden bietet Einblicke in die Verwendung des Bootstrap-Frameworks von Twitter, um eine Textausrichtung in Tabellen zu erreichen.

Bootstrap 3:

Bootstrap 3 bietet unkomplizierte Textausrichtungsklassen:

• text-left: Richtet den Text am aus left.
• text-center: Zentriert Text horizontal.
• text-right: Richtet Text rechts aus.
• text-justify: Richtet den Text so aus, dass er den verfügbaren Platz ausfüllt gleichmäßig.
• text-nowrap: Verhindert das Umbrechen von Text und behält eine einzelne Zeile bei.

Zum Beispiel, um einen Tabellenkopf für einen Gesamtwert auszurichten rechts:

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

Um die entsprechende Tabellendatenzelle an der auszurichten rechts:

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

Bootstrap 4 und Bootstrap 5:

In Bootstrap 4 und 5 wurden die Textausrichtungsklassen erweitert, was eine detailliertere Kontrolle ermöglicht:

• .text-start: Richtet den Text links aus LTR-Sprachen (von links nach rechts) und nach rechts in RTL-Sprachen (von rechts nach links).
• .text-center: Zentriert Text horizontal.
• .text-end: Richtet Text in LTR-Sprachen rechts und in RTL links aus Sprachen.

Darüber hinaus führen Bootstrap 4 und 5 responsive Textausrichtungsklassen ein, die unterschiedliche Ausrichtungen bei unterschiedlichen Ansichtsfenstergrößen ermöglichen. Um beispielsweise Text in großen und extragroßen Ansichtsfenstern rechts auszurichten:

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

Das obige ist der detaillierte Inhalt vonWie erreicht man eine Textausrichtung in Bootstrap-Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!