Twitter'sのBootstrapフレームワークには、テキストを整列させるクラスのセットはありますか?
例えば、$
の合計値を持つテーブルがあるのですが、これを右に揃えたいのですが...。
<th class="align-right">Total</th>
と
<td class="align-right">$1,000,000.00</td>
Bootstrapにはそのようなクラスはありませんが、この種のクラスは、@anton氏が言及した".pull-right"クラスと同様に、"utility"クラスと考えられています。
utilities.lessを見ると、Bootstrapにはユーティリティクラスがほとんどないことがわかります。その理由は、この種のクラスは一般的に嫌われていて、次のいずれかに使用することが推奨されているからです。 a) プロトタイピングと開発 - 迅速にページを構築し、プルライトとプルレフトのクラスを削除して、より意味のあるクラスや要素自体にフロートを適用することができます。 b) よりセマンティックな解決策よりも明らかに実用的な場合。
あなたのケースでは、あなたの質問によると、テーブルの中で特定のテキストを右寄せにしたいようですが、すべてではありません。意味的には、次のようにするのが良いでしょう(ここでは、デフォルトのブートストラップクラスである.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>
そして、text-align: left
またはtext-align: right
宣言をprice-valueクラスとprice-labelクラスに適用するだけです(または、あなたのために働くどんなクラスでも)。
クラスとして align-right
を適用する場合の問題点は、テーブルをリファクタリングしたい場合に、マークアップとスタイルをやり直さなければならないことです。セマンティッククラスを使用すれば、CSSの内容だけをリファクタリングすることで済ませられるかもしれません。さらに、要素にクラスを適用するために時間をかけているのであれば、そのクラスにセマンティックな値を割り当てるようにするのが、他のプログラマー(または3ヶ月後のあなた)にとってマークアップがナビゲートしやすくなるようにするためのベスト・プラクティスです。
ひとつの考え方として、「このtdは何のためにあるのか」という質問をしたときに、「align-right"」という答えからは何も見えてきません。
CSSにはすでにtext-align:right
があるので、Bootstrapには特別なクラスがないのだと思います。
Bootstrapには、divなどを右に浮かすための"pull-right"があります。
Bootstrap 2.3が出て、テキストの配置スタイルが追加されました。
Bootstrap 2.3リリース (2013-02-07)
.text-alignクラスは完全に有効であり、もはや役に立たない
.price-labelや
.price-value` を持つよりも使いやすいものです。
と呼ばれるカスタムユーティリティクラスを100%使用することをお勧めします。
.text-right {
text-align: right;
}
私は魔法をかけるのが好きですが、それはあなた次第です、何かのように。
span.pull-right {
float: none;
text-align: right;
}