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

グリッド システムとは

グリッド システムとは、ページ レイアウトを同じ幅の列に分割し、列の数は、ページ レイアウトをモジュール化するために定義されます。 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 グリッド システムの使用方法

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

その他の情報

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

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

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

Bootstrap チュートリアル

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

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

bootstrap class

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップテンプレートを無料でダウンロードする方法次の記事：ブートストラップテンプレートを無料でダウンロードする方法

関連記事

続きを見る

• ブートストラップ コンポーネントの使用方法
• ブートストラップ入力ボックス グループとは何ですか?
• ポップアップするブートストラップ ドロップダウン メニューを実装するにはどのようなスタイルが使用されますか?
• ブートストラップの内容