¿Existe un conjunto de clases en el marco de Twitter's Bootstrap que alinee el texto?
Por ejemplo, tengo algunas tablas con totales $
que quiero alinear a la derecha...
<th class="align-right">Total</th>
y
<td class="align-right">$1,000,000.00</td>
No, Bootstrap no tiene una clase para eso, pero este tipo de clase se considera una clase "utilitaria", similar a la clase ".pull-right" que mencionó @anton.
Si miras en utilities.less verás muy pocas clases de utilidad en Bootstrap, la razón es que este tipo de clases es generalmente mal visto, y se recomienda su uso para a) para la creación de prototipos y el desarrollo - para que puedas construir rápidamente tus páginas, y luego eliminar las clases pull-right y pull-left en favor de la aplicación de flotadores a clases más semánticas o a los propios elementos, o b) cuando es claramente más práctico que una solución más semántica.
En tu caso, por tu pregunta parece que deseas que cierto texto se alinee a la derecha en tu tabla, pero no todo. Semánticamente, sería mejor hacer algo como (voy a inventarme unas cuantas clases aquí, excepto la clase bootstrap por defecto, .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>
Y simplemente aplicar las declaraciones text-align: left
o text-align: right
a las clases price-value y price-label (o cualquier clase que te funcione).
El problema de aplicar align-right
como clase, es que si quieres refactorizar tus tablas tendrás que rehacer el marcado y los estilos. Si utilizas clases semánticas, podrías salirte con la tuya refactorizando sólo el contenido CSS. Además, si te tomas el tiempo de aplicar una clase a un elemento, es una buena práctica intentar asignar un valor semántico a esa clase para que el marcado sea más fácil de navegar para otros programadores (o para ti tres meses después).
Una forma de pensar en ello es la siguiente: cuando se plantea la pregunta "¿Para qué sirve este td?", no se obtendrá una aclaración de la respuesta "align-right".
Supongo que porque el CSS ya tiene text-align:right
, AFAIK, Bootstrap no tiene una clase especial para ello.
Bootstrap sí tiene "pull-right" para hacer flotar divs, etc. a la derecha.
Bootstrap 2.3 acaba de salir y ha añadido estilos de alineación de texto:
Bootstrap 2.3 released (2013-02-07)
La clase .text-align
es totalmente válida y más utilizable que tener un .price-label
y un .price-value
que ya no sirven para nada.
Recomiendo ir al 100% con una clase de utilidad personalizada llamada
.text-right {
text-align: right;
}
Me gusta hacer algo de magia, pero eso depende de ti, como algo:
span.pull-right {
float: none;
text-align: right;
}