Gibt es eine Reihe von Klassen in Twitter's Bootstrap Framework, die Text ausrichtet?
Zum Beispiel habe ich einige Tabellen mit "$" Summen, die ich auf der rechten Seite ausgerichtet wollen...
<th class="align-right">Total</th>
und
<td class="align-right">$1,000,000.00</td>
Nein, Bootstrap hat keine Klasse dafür, aber diese Art von Klasse wird als "Utility"-Klasse angesehen, ähnlich wie die von @anton erwähnte ".pull-right"-Klasse.
Wenn Sie sich utilities.less ansehen, werden Sie nur sehr wenige Utility-Klassen in Bootstrap finden, da diese Art von Klasse im Allgemeinen verpönt ist und nur für folgende Zwecke verwendet werden sollte a) für das Prototyping und die Entwicklung - damit Sie Ihre Seiten schnell aufbauen können und dann die pull-right- und pull-left-Klassen zugunsten der Anwendung von Floats auf semantischere Klassen oder auf die Elemente selbst entfernen können, oder b) wenn es eindeutig praktischer ist als eine semantischere Lösung.
In Ihrem Fall sieht es nach Ihrer Frage so aus, als ob Sie einen bestimmten Text in Ihrer Tabelle rechts ausrichten möchten, aber nicht den gesamten Text. Semantisch wäre es besser, so etwas zu tun wie (ich werde nur ein paar Klassen hier zu machen, mit Ausnahme der Standard-Bootstrap-Klasse, .table):
<table class="table price-table">
<thead>
<th class="price-label">Total</th>
</thead>
<tbody>
<tr>
<td class="price-value">$1,000,000.00</td>
</tr>
</tbody>
</table>
Und wenden Sie einfach die Deklarationen "text-align: left" oder "text-align: right" auf die Klassen "price-value" und "price-label" an (oder welche Klassen auch immer für Sie funktionieren).
Das Problem bei der Anwendung von align-right
als Klasse ist, dass Sie, wenn Sie Ihre Tabellen überarbeiten wollen, das Markup und die Stile neu erstellen müssen. Wenn Sie semantische Klassen verwenden, können Sie sich vielleicht damit begnügen, nur den CSS-Inhalt umzugestalten. Und wenn Sie sich die Zeit nehmen, einem Element eine Klasse zuzuweisen, sollten Sie versuchen, dieser Klasse einen semantischen Wert zuzuweisen, damit das Markup für andere Programmierer (oder für Sie selbst drei Monate später) leichter zu navigieren ist.
Man kann sich das folgendermaßen vorstellen: Wenn Sie die Frage "Wofür ist dieses td?" stellen, wird Ihnen die Antwort "align-right" keine Klarheit verschaffen.
Ich vermute, weil CSS bereits text-align:right
hat, AFAIK, Bootstrap hat keine spezielle Klasse dafür.
Bootstrap hat "pull-right" für schwebende divs, etc. nach rechts.
Bootstrap 2.3 kam gerade heraus und fügte Textausrichtungsstile hinzu:
Bootstrap 2.3 veröffentlicht (2013-02-07)
Die Klasse .text-align
ist absolut gültig und brauchbarer als ein .price-label
und ein .price-value
, die keinen Nutzen mehr haben.
Ich empfehle eine 100%ige Umstellung auf eine benutzerdefinierte Utility-Klasse namens
.text-right {
text-align: right;
}
Ich mag es, ein wenig zu zaubern, aber das liegt ganz bei dir, wie etwas:
span.pull-right {
float: none;
text-align: right;
}