Col-md-4、col-xs-1、col-lg-2 などのブートストラップ グリッド クラスの数値は要素の幅と応答性をどのように決定しますか?

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

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

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

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

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

数値の使用方法

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

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

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

<div class="col-2">Column 1</div>
<div class="col-6">Column 2</div>
<div class="col-4">Column 3</div>

数字は何を表しますか?

数字自体だけでなく、数字に適用される接頭辞に注意することが重要です。 Bootstrap では、これらの接頭辞はさまざまな画面サイズを表します。

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

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

結論

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

以上がCol-md-4、col-xs-1、col-lg-2 などのブートストラップ グリッド クラスの数値は要素の幅と応答性をどのように決定しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。