ブートストラップの 12 グリッド システムとは何ですか?

ブートストラップでは、12 グリッド システムとは、ページ レイアウトを同じ幅の 1 ～ 12 列に分割し、比率計算によって列幅を定義し、列数によってモジュール型ページ レイアウト方法を定義することを指します。は、応答性の高いモバイルファーストのグリッド システムです。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

12 グリッドとはブートストラップのシステム

ブートストラップは、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割される、応答性の高いモバイルファーストの流体グリッド システムを提供します。

グリッドとは何ですか?

グラフィック デザインにおいて、グリッドとは、コンテンツを整理するために使用される一連の交差する直線 (垂直、水平) で構成される構造 (通常は 2 次元) です。印刷デザインにおけるデザインレイアウトやコンテンツ構造に広く使用されています。 Web デザインにおいて、一貫したレイアウトを迅速に作成し、HTML と CSS を効果的に使用するための方法です。

簡単に言うと、Web デザインにおけるグリッドは、コンテンツを整理し、Web サイトをナビゲートしやすくし、ユーザー側の負荷を軽減するために使用されます。

ブートストラップ グリッド システムとは何ですか?

Bootstrap には、デバイスまたはビューポートのサイズが増加するにつれて、12 列に適切にスケールする、応答性の高いモバイルファーストの流動的なグリッド システムが含まれています。これには、単純なレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。

グリッド システムとは、ページ レイアウトを同じ幅の列に分割し、列数を定義してページ レイアウトをモジュール化することを指します。 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) です。

関連する推奨事項: ブートストラップ チュートリアル

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