Bootstrap のグリッド システムにおける「col-md-4」、「col-xs-1」、および「col-lg-2」は何を意味しますか?

ブートストラップのグリッド システムを理解する: "col-md-4"、"col-xs-1"、および "col-lg-2" をデコードする

Bootstrap のグリッド システムは、レイアウトを構造化するための柔軟で応答性の高いソリューションを提供します。 「col-xs」、「col-sm」、および「col-lg」の 3 つのキー クラス プレフィックスが使用され、その後に数字が続きます。これらの数値は、グリッド内で列がどのように配置されるかを定義します。

数値によるグリッドの配置方法

接頭辞に続く数字は、特定の要素が占める列の数を表します。利用可能な 12 列のうち。各行には合計 12 列があるため、「col--6」は使用可能なスペースの半分を占め、「col--12」は幅全体に広がります。

数値の使用方法

これらのクラスを使用する場合、意図する画面サイズに基づいてプレフィックスを指定する必要があります。 「xs」は非常に小さな画面 (携帯電話)、「sm」は小さな画面 (タブレット)、「md」は中程度の画面 (一部のデスクトップ)、「lg」は大きな画面 (残りのデスクトップ) に適用されます。

たとえば、行内に 2 つの等しい列を作成するには、次のようにします:

<div>
<p><strong>数値が表すもの</strong></p>
<p>クラス内の数値は特定の内容を表しますグリッド内の幅。各列は、行内の使用可能な合計スペースの一部を表します:</p>
<ul>
<li>"col-*-1": 幅の 1/12</li>
<li>"col-*-2" : 幅の 2/12</li>
<li>"col-*-3": 幅の 3/12</li>
<li>...</li>
<li>"col-*-12":幅の 12/12</li>
</ul>
<p>これらのクラスを組み合わせることで、さまざまな画面サイズや解像度に適応するカスタム レイアウトを作成できます。複数の列クラスを使用して、異なるブレークポイントで異なる動作を指定することを忘れないでください。これにより、Bootstrap の応答性が向上し、柔軟で適応性のあるレイアウトを作成できるようになります。</p>
</div>

以上がBootstrap のグリッド システムにおける「col-md-4」、「col-xs-1」、および「col-lg-2」は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。