ブートストラップ4グリッドシステム

ブートストラップ4グリッドシステム

Bootstrapのグリッドシステムでは、ページ全体で最大12列を使用できます。

12列すべてを個別に使用したくない場合は、列をグループ化して、より幅の広い列を作成できます。

Bootstrapのグリッドシステムはレスポンシブであり、画面サイズに応じて列が再配置されます。大画面では、コンテンツが3列に編成されていると見栄えが良くなりますが、小さい画面では、コンテンツアイテムがスタックされていると見栄えが良くなります。お互いの上に。

グリッドクラス

Bootstrap4グリッドシステムには5つのクラスがあります。

• .col- （超小型デバイス-画面幅が576px未満）
• .col-sm- （小型デバイス-576px以上の画面幅）
• .col-md- （中型デバイス-画面幅が768px以上）
• .col-lg- （大型デバイス-992px以上の画面幅）
• .col-xl-（xlargeデバイス-画面幅が1200px以上）

上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。

ヒント：sm各クラスはスケールアップするため、とに同じ幅を設定する場合は md、を指定するだけで済みますsm。

グリッドシステムルール

いくつかのBootstrap4グリッドシステムルール：

• 適切な配置とパディングを行うには、行を.container（固定幅）または（全幅）内に配置する必要があります.container-fluid
• 行を使用して列の水平グループを作成します
• コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます
• のような事前定義されたクラスは.row 、.col-sm-4グリッドレイアウトをすばやく作成するために使用できます
• 列は、パディングを介してガター（列コンテンツ間のギャップ）を作成します。そのパディングは、上の負のマージンを介して最初と最後の列の行でオフセットされます.rows
• グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-sm-4
• 列の幅はパーセンテージで表されるため、常に流動的であり、親要素に対してサイズが調整されます。
• Bootstrap3とBootstrap4の最大の違いは、Bootstrap4がfloatではなくflexboxを使用するようになったことです。フレックスボックスの大きな利点の1つは、幅が指定されていないグリッド列が自動的に「同じ幅の列」（および同じ高さ）としてレイアウトされることです。例：の3つの要素.col-smは、それぞれ自動的に小さなブレークポイントから33.33％の幅になります。ヒント： Flexboxについて詳しく知りたい場合は、CSSFlexboxチュートリアルをお読みください。

ブートストラップ4グリッドの基本構造

以下は、Bootstrap4グリッドの基本構造です。

最初の例：行を作成します（<div class="row">）。.col-*-*次に、必要な数の列（適切なクラスのタグ）を追加します 。最初の星（*）は応答性（sm、md、lg、またはxl）を表し、2番目の星は数値を表します。これは、行ごとに常に合計12になる必要があります。

2番目の例：それぞれに数値を追加する代わりに、colブートストラップにレイアウトを処理させて、等しい幅の列を作成します。2つの"col"要素=各列の幅が50％です。3列=各列の幅は33.33％。4列= 25％幅など.col-sm|md|lg|xl。列をレスポンシブにするために使用することもできます。

グリッドオプション

次の表は、Bootstrap4グリッドシステムがさまざまな画面サイズでどのように機能するかをまとめたものです。

例

次の章では、さまざまなデバイスと画面幅のグリッドシステムの例を示します。

• 水平に積み上げ
• 極小レイアウト
• 小さなデバイス
• 中型デバイス
• 大型デバイス
• 特大デバイス
• その他のグリッドの例