ブートストラップ グリッド クラスの数値の理解:col-md-4、col-xs-1、col-lg-2

ブートストラップ フレームワークには、応答性の高いレイアウトの作成を容易にする堅牢なグリッド システムが導入されています。このシステムには、col-* 形式のクラスが不可欠です。アスタリスクは数値を表します。これらの数値は、グリッド内の要素をどのように配置するか、またさまざまな画面サイズにどのように対応するかを決定する上で重要な役割を果たします。

数値はどのようにグリッドを配置しますか?

Col-* クラスの数値は、関連する要素が占有する利用可能な幅の部分を表します。グリッド行の合計幅は 12 列に分割され、クラス内の数値は要素がまたがる列数を示します。

たとえば、col-4 は要素が 4 列にまたがることを意味します。 、または利用可能な幅の 1/3。 Col-12 は幅全体に広がり、12 列すべてを占めます。

数値の使用方法

これらのクラスを使用するには、単にクラス内の要素にクラスを割り当てます。グリッド行。たとえば、行内に同じ幅の列を 2 つ作成するには、

Column 1
Column 2

幅が等しくない列を 3 つ作成するには、次のようにします。

Column 1
Column 2
Column 3

数字は何を表していますか?

数字自体のほかに、次のことに注意することが重要です。それらに適用されるプレフィックス。ブートストラップでは、これらの接頭辞はさまざまな画面サイズを表します:

• xs: 極小 (モバイル デバイス)
• sm: 小 (タブレット)
• md: 中 (デスクトップ) )
• lg: Large (大型デスクトップ)

複数のcol-*クラスを要素に割り当てることで、これらの各画面サイズでの動作を制御できます。たとえば、col-6col-sm-4 は、要素がモバイル画面では幅の半分、タブレットやデスクトップでは幅の 1/3 に及ぶことを意味します。

結論

Bootstrap グリッド クラスの数値とプレフィックスを理解することは、レスポンシブでアダプティブな Web レイアウトを作成するために不可欠です。 Col-* クラスを効果的に活用することで、開発者はデザインがさまざまな画面サイズにシームレスに対応し、すべてのデバイスにわたって一貫したユーザー エクスペリエンスを提供できるようになります。