Finns det en uppsättning klasser i Twitter's Bootstrap-ramverk som justerar text?
Jag har t.ex. några tabeller med totaler i form av "$" som jag vill ha justerade till höger...
<th class="align-right">Total</th>
och
<td class="align-right">$1,000,000.00</td>
Nej, Bootstrap har ingen klass för detta, men den här typen av klass anses vara en "utility" klass, liknande ".pull-right" klassen som @anton nämnde.
Om du tittar på utilities.less kommer du att se mycket få utility-klasser i Bootstrap, vilket beror på att den här typen av klasser generellt sett är illa sedda och rekommenderas att användas för antingen: a) prototyper och utveckling - så att du snabbt kan bygga upp dina sidor och sedan ta bort pull-right- och pull-left-klasserna till förmån för att tillämpa floats på mer semantiska klasser eller på själva elementen, eller b) när det är klart mer praktiskt än en mer semantisk lösning.
I ditt fall ser det genom din fråga ut som om du vill att viss text ska anpassas till höger i din tabell, men inte all text. Semantiskt sett skulle det vara bättre att göra något i stil med (jag kommer bara att hitta på några klasser här, med undantag för bootstraps standardklass .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>
Och tillämpa bara deklarationerna text-align: left
eller text-align: right
på klasserna price-value och price-label (eller vilka klasser som helst som fungerar för dig).
Problemet med att tillämpa align-right
som en klass är att om du vill göra om dina tabeller måste du göra om markeringen och stilarna. Om du använder semantiska klasser kan du kanske komma undan med att bara ändra CSS-innehållet. Om du tar dig tid att tillämpa en klass på ett element är det dessutom bäst att försöka tilldela klassen ett semantiskt värde så att det blir lättare för andra programmerare (eller för dig tre månader senare) att navigera i markeringen.
Ett sätt att tänka på det är så här: när du ställer frågan "Vad är denna td till för?", kommer du inte att få något klargörande från svaret "align-right".
Jag antar att CSS redan har text-align:right
, AFAIK, Bootstrap har ingen speciell klass för det.
Bootstrap har "pull-right" för att flytta divs etc. till höger.
Bootstrap 2.3 kom just ut och lade till stilar för textjustering:
Bootstrap 2.3 släppt (2013-02-07)
Klassen .text-align
är helt giltig och mer användbar än att ha en .price-label
och .price-value
som inte längre är användbara.
Jag rekommenderar att du till 100 % använder en egen användbar klass som heter
.text-right {
text-align: right;
}
Jag gillar att göra lite magi, men det är upp till dig, som något:
span.pull-right {
float: none;
text-align: right;
}