C'è un insieme di classi nel framework Bootstrap di Twitter che allinea il testo?
Per esempio, ho alcune tabelle con totali $
che voglio allineati a destra...
<th class="align-right">Total</th>
e
<td class="align-right">$1,000,000.00</td>
No, Bootstrap non ha una classe per questo, ma questo tipo di classe è considerata una classe "utilità", simile alla classe ".pull-right" che @anton ha menzionato.
Se guardate utilities.less vedrete pochissime classi di utilità in Bootstrap, la ragione è che questo tipo di classe è generalmente disapprovata, e si raccomanda di usarla per a) prototipazione e sviluppo - in modo da poter costruire rapidamente le tue pagine, quindi rimuovere le classi pull-right e pull-left in favore dell'applicazione dei float a classi più semantiche o agli elementi stessi, o b) quando è chiaramente più pratico di una soluzione più semantica.
Nel tuo caso, dalla tua domanda sembra che tu voglia avere un certo testo allineato a destra nella tua tabella, ma non tutto. Semanticamente, sarebbe meglio fare qualcosa come (sto solo andando a creare alcune classi qui, tranne la classe di default di bootstrap, .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>
E basta applicare le dichiarazioni text-align: left
o text-align: right
alle classi price-value e price-label (o qualsiasi classe funzioni per te).
Il problema con l'applicazione di align-right
come classe, è che se vuoi rifattorizzare le tue tabelle dovrai rifare il markup e gli stili. Se usi le classi semantiche potresti essere in grado di cavartela rifacendo solo il contenuto CSS. Inoltre, se state impiegando del tempo per applicare una classe ad un elemento, è una buona pratica cercare di assegnare un valore semantico a quella classe in modo che il markup sia più facile da navigare per altri programmatori (o per voi tre mesi dopo).
Un modo di pensare è questo: quando si pone la domanda "A cosa serve questo td? ", non si otterrà un chiarimento dalla risposta "align-right".
Immagino perché i CSS hanno già text-align:right
, AFAIK, Bootstrap non ha una classe speciale per questo.
Bootstrap ha "pull-right" per far fluttuare i div, ecc. a destra.
Bootstrap 2.3 è appena uscito e ha aggiunto gli stili di allineamento del testo:
Bootstrap 2.3 rilasciato (2013-02-07)
La classe .text-align
è totalmente valida e più utilizzabile che avere un .price-label
e un .price-value
che non sono più utili.
Raccomando di andare al 100% con una classe di utilità personalizzata chiamata
.text-right {
text-align: right;
}
Mi piace fare un po' di magia, ma questo dipende da voi, come qualcosa:
span.pull-right {
float: none;
text-align: right;
}