ブートストラップ テーブルでテキストの配置を実現するにはどうすればよいですか?

ブートストラップ フレームワークのテキスト配置

概要:

テーブルは、次の目的で使用される一般的な要素です。データを構造化された形式で表示します。表のセル内でテキストを整列させることは、読みやすさと全体的なプレゼンテーションの向上にとって非常に重要です。このガイドでは、Twitter の Bootstrap フレームワークを利用してテーブル内でテキストの配置を実現する方法について説明します。

Bootstrap 3:

Bootstrap 3 は、簡単なテキスト配置クラスを提供します:

• text-left: テキストを左揃えにします。
• text-center: テキストを水平方向に中央揃えにします。
• text -right: テキストを右に揃えます。
• text-justify: テキストを揃えて、利用可能なスペースを均等に埋めます。
• text-nowrap: テキストが折り返されないようにし、単一行を維持します。

たとえば、合計値の表のヘッダーを右に揃えるには:

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

右側の対応するテーブル データ セル:

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

Bootstrap 4 および Bootstrap 5:

Bootstrap 4 および Bootstrap 5 では、テキスト配置クラスが拡張され、次のようになります。より詳細な制御:

• .text-start: LTR (左から右) 言語ではテキストを左に揃え、RTL (右から右) 言語ではテキストを右に揃えます。左) 言語。
• .text-center: テキストを水平方向に中央揃えにします。
• .text-end: LTR 言語でテキストを右揃えにします。

さらに、Bootstrap 4 と 5 では、レスポンシブなテキスト配置クラスが導入され、異なるビューポート サイズで異なる配置が可能になります。たとえば、大および特大ビューポートでテキストを右に揃えるには:

<p class="text-lg-right text-xl-right">Right aligned text on large and extra-large viewports.</p>

以上がブートストラップ テーブルでテキストの配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。