Classe d'alignement du texte à l'intérieur d'un tableau

Existe-t-il un ensemble de classes dans le cadre de Twitter's Bootstrap qui permet d'aligner le texte ?

Par exemple, j'ai quelques tableaux avec des totaux de $ que je veux aligner à droite...

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

et

<td class="align-right">$1,000,000.00</td>

Non, Bootstrap n'a pas de classe pour cela, mais ce type de classe est considéré comme une classe " utilitaire ", similaire à la classe " .pull-right " mentionnée par @anton.

Si vous regardez dans utilities.less, vous verrez très peu de classes utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu, et qu'il est recommandé de l'utiliser pour soit : a) pour le prototypage et le développement - afin que vous puissiez rapidement construire vos pages, puis supprimer les classes pull-right et pull-left en faveur de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou b) lorsque c'est clairement plus pratique qu'une solution plus sémantique.

Dans votre cas, d'après votre question, il semble que vous souhaitiez que certains textes soient alignés à droite dans votre tableau, mais pas tous. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste inventer quelques classes ici, à l'exception de la classe bootstrap par défaut, .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>

Et appliquez simplement les déclarations text-align : left ou text-align : right aux classes price-value et price-label (ou aux classes qui vous conviennent).

Le problème avec l'application de align-right en tant que classe, est que si vous voulez remanier vos tableaux, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous en sortir en ne remaniant que le contenu CSS. De plus, si vous prenez le temps d'appliquer une classe à un élément, il est préférable d'essayer d'attribuer une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour les autres programmeurs (ou pour vous trois mois plus tard).

Une façon de voir les choses est la suivante : lorsque vous posez la question "À quoi sert ce td ?", la réponse "align-right" ne vous éclairera pas.

Commentaires (4)

Je suppose que c'est parce que CSS a déjà text-align:right, AFAIK, Bootstrap n'a pas de classe spéciale pour cela.

Bootstrap dispose de "pull-right" pour faire flotter les divs, etc. vers la droite.

Bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte :

[Bootstrap 2.3 publié][1] (2013-02-07)

[1] : http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Commentaires (1)

La classe .text-align est totalement valide et plus utilisable que d'avoir un .price-label et un .price-value qui ne servent plus à rien.

Je recommande d'utiliser à 100% une classe utilitaire personnalisée appelée

.text-right {
  text-align: right;
}

J'aime faire de la magie, mais c'est à vous de voir, comme quelque chose :

span.pull-right {
  float: none;
  text-align: right;
}
Commentaires (4)