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 links aus.
• text-center: Zentriert den Text horizontal.
• Text -right: Richtet den Text rechts aus.
• text-justify: Richtet den Text aus, um den verfügbaren Platz gleichmäßig auszufüllen.
• text-nowrap: Verhindert das Umbrechen von Text und behält eine einzelne Zeile bei.

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

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

So richten Sie den aus entsprechende Tabellendatenzelle 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 Detailliertere Steuerung:

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

Zusätzlich 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!