Bootstrap のグリッド表記 (col-md-4、col-xs-1、col-lg-2) の数値は要素の幅と配置をどのように定義しますか?

Bootstrap のグリッド表記法を理解する:col-md-4、col-xs-1、col-lg-2

Bootstrap の新しいグリッド システムは、要素のレイアウトを制御するために、シンプルかつ効果的な表記法を採用しています。 Col--、アスタリスク (*) は数値を表します。この表記法は、要素の幅だけでなく、さまざまな画面サイズでの要素の配置も定義します。

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

グリッド クラスの数値 (col- xs-1、col-lg-2 など) は、要素がグリッド内で占める「列」の数を決定します。ブートストラップは、使用可能な領域を 12 個の等しい列に分割するため、要素がこれら 12 列のうちの 4 列にまたがるように指定します。

数値の使用方法

これらの数値を使用するには、目的の要素にグリッド クラスを追加するだけです。たとえば、中画面 (MD) で 4 列にわたる列を作成するには、col-md-4 クラスを使用します。より細かく制御するには、col-xs-1col-md-4 など、画面サイズごとに異なる数値を指定できます。これにより、要素は極小画面 (xs) では 1 列を占有し、中型画面 (md) では 4 列を占有します。 ).

数値が表すもの

グリッド クラスの数値は、相対的な要素の幅を表します利用可能なスペースに。たとえば、col-xs-1 は、要素が極小画面で使用可能な幅の 1/12 を占めることを意味します。同様に、col-lg-2 は、要素が大きな画面で利用可能な幅の 2/12 を占めることを意味します。

グリッド クラスの優先順位

グリッドに注意することが重要です。特定の画面サイズのクラスは、そのサイズだけでなく、より大きな画面サイズにも適用されます。たとえば、col-xs-6 クラスは、極小画面から大画面までのすべての画面に適用されます。ただし、より大きな画面サイズのグリッド クラスを指定すると、より小さな画面サイズのグリッド クラスがオーバーライドされます。

結論

数字の意味を理解するCol-md-4、col-xs-1、col-lg-2 クラスの は、Bootstrap で要素のレイアウトを効果的に管理するために重要です。これらのクラスを活用すると、さまざまな画面サイズにシームレスに調整できる、応答性が高く適応性のある Web デザインを作成できます。

以上がBootstrap のグリッド表記 (col-md-4、col-xs-1、col-lg-2) の数値は要素の幅と配置をどのように定義しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。