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

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

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

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

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

グリッドクラス

ブートストラップグリッドシステムには、次の4つのクラスがあります。

• xs（電話の場合-幅768px未満の画面）
• sm（タブレットの場合-幅768px以上の画面）
• md（小型ノートパソコンの場合-幅992px以上の画面）
• lg（ラップトップおよびデスクトップの場合-幅1200px以上の画面）

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

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

グリッドシステムルール

いくつかのブートストラップグリッドシステムルール：

• 適切な配置とパディングを行うには、行を.container（固定幅）または（全幅）内に配置する必要があります.container-fluid
• 行を使用して列の水平グループを作成します
• コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます
• のような事前定義されたクラスは.row 、.col-sm-4グリッドレイアウトをすばやく作成するために使用できます
• 列は、パディングを介してガター（列の内容間のギャップ）を作成します。そのパディングは、上の負のマージンを介して最初と最後の列の行でオフセットされます.rows
• グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-sm-4
• 列の幅はパーセンテージで表されるため、常に流動的であり、親要素に対してサイズが調整されます。

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

ブートストラップグリッドの基本構造は次のとおりです。

したがって、必要なレイアウトを作成するには、コンテナ（<div class="container">）を作成します。次に、行（<div class="row">）を作成します。.col-*-*次に、必要な数の列（適切なクラスのタグ）を追加します 。の数値は、.col-*-*行ごとに常に最大12になる必要があることに注意してください。

グリッドオプション

次の表は、Bootstrapグリッドシステムが複数のデバイス間でどのように機能するかをまとめたものです。

例

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

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