ブートストラップ グリッド システムとは何を意味しますか?

グリッド システムとは

グリッド システムとは、ページ レイアウトを同じ幅の列に分割し、列の数は、ページ レイアウトをモジュール化するために定義されます。 Bootstrap のグリッド システムは 1 ～ 12 列のパターンを使用し、比例計算を使用して定義した列幅を設定します。 たとえば、この行に 2 列のレイアウト モードを使用する場合、各列の幅は外側のコンテナの 50% になります。閲覧に使用するデバイスに関係なく、この行に表示されます。割合。ただし、デバイスの幅が設定した最小幅より小さい場合は、2 つの列が並んで 1 つの列になります。

Bootstrap のグリッド システム

Bootstrap でのグリッド システムの使用は非常に簡単で便利です。定義済みのクラスを div に導入するだけで済みます。

まず、ブートストラップで使用できるいくつかのグリッド クラスを見てみましょう:

1. .col-xs-* これは超小型画面クラス (

2. .col-sm-* これは、タブレット デバイスに似た、小さな画面デバイス クラス (768 ピクセル以上、992 ピクセル未満) です。

3. .col-md-* これは中型デバイス クラス (992px 以上、1200px 未満) です。

4. .col-lg-* これは大きなデバイス クラス (≥1200px) です。

Bootstrap グリッド システムの使用方法

さまざまなデバイスに対応するグリッド クラスを使用して、さまざまなデバイスに適用するレイアウト スタイルを決定できます。例:

> ; このエンコードの結果、2 つの div は PC では 2 行として表示されます (各行はグリッドの 12 列を占有します)が、モバイル ブラウザでは 1 行 2 列として表示されます (各列はグリッドの 6 列を占有します)。グリッド）。このフォームでは、グリッド システムを使用して独自のアプリケーション レイアウトを簡単にカスタマイズできます。

その他の情報

上記の使用方法に加えて、「列オフセット クラス」を使用して、独自のグリッドをすばやく配置することもできます。使用方法は

この書き方だと、このdivはPC側で3カラム右にオフセットされます。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル

列にアクセスして学習してください。

以上がブートストラップ グリッド システムとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。