Bootstrap 4 グリッドシステム(Grid system)

Bootstrapは、応答性の高いモバイルデバイスファーストのストリーミンググリッドシステムを提供します。画面またはビューポート（viewport）のサイズが大きくなると、システムは自動的に最大12列に分割されます。

必要に応じて列数を定義することもできます。

Bootstrap 4のグリッドシステムは応答性が高く、画面サイズに応じて列が自動的に再配置されます。

グリッド

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

• .col-すべてのデバイスに適用
• .col-sm-タブレット-画面の幅が576px以上
• .col-md-PC（デスクトップ）モニター-画面幅が768px以上）
• .col-lg-大型PC（デスクトップ）モニター-画面幅が992px以上）
• .col-xl-超大型PC（デスクトップ）モニター-画面の幅が1200px以上）

グリッドシステムのルール

Bootstrap4グリッドシステムのルール：

• グリッドの各行は.container（固定幅）または.container-fluid（全画面幅）クラスに配置する必要があります。これより、一部の外側と内側の余白（マージン）を自動的に設定できます。
• 行を使用して、水平方向の列グループを作成します。
• コンテンツは列に配置する必要があり、行の子ノードになることができるのは列のみです。
• .rowや.col-sm-4などの事前定義されたクラスを使用して、グリッドレイアウトをすばやく作成できます。
• 列は塗りつぶしによって、列の内容の間にギャップを作成します。このギャップは、最初の行と最後の列の間のオフセットを設定するために、.rowsクラスのネガティブマージンによって設定されます。
• グリッド列は、指定された12列にまたがって作成されます。例えば、3つの等しい列を設定するには、3つの.col-sm-4設定を使用する必要があります。
• Bootstrap3とBootstrap 4の最大の違いは、Bootstrap4がフローティングではなくフレックスボックス(flexbox)を使用するようになったことです。 Flexboxのメリットの1つは、幅が指定されていないグリッド列が、同じ幅と高さの列として自動的に設定されることです。 Flexboxについて詳しく知りたい場合は、CSSFlexboxチュートリアルを読んでください。

次の表には、Bootstrapグリッドシステムがさまざまなデバイスでどのように機能するかをまとめています。

上記の各サイズを一緒に使用でき、より柔軟なページレイアウトを作成できます。

Bootstrap 4グリッドの基本構造

次のコードは、Bootstrap4グリッドの基本構造です。

<!-- 例1：列の幅を調整とさまざまなデバイスでの表示方法 -->

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
 
<!-- 例2：Bootstrapが自動的にレイアウトを処理します -->

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

例1：()を作成します。次に、必要な列（.col-–クラスの設定）を追加します。最初のアスタリスク (*) は、応答するデバイス（sm、md、lg、またはxl）を表し、2番目のアスタリスク(*)は数字を表し、同じ行の数字の合計は12になります。

例2：各列に数値を追加する代わりに、bootstrapでレイアウトを自動的に処理し、同じ行の各列の幅を同じに調整します。2つの”col”の幅はそれぞれ50％です。 3つの”col”はそれぞれ幅の33.33％であり、4つの”col”はそれぞれ幅の25％です。同様に、 .col-sm|md|lg|xlを使用して、列の応答ルールを設定できます。

次に、例をご覧ください。

同じ幅の列を作成し、Bootstrapが自動的にレイアウトします。

実例

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

レスポンシブ対応等幅カラス

次の例では、タブレットと大画面で等幅のレスポンシブカラスを作成する方法を説明します。モバイルデバイスでは、画面幅が576px未満の場合、4つの列が互いに積み重ねられます。

実例

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

幅が等しくないレスポンシブカラス

次の例は、タブレットや大画面でさまざまな幅のレスポンシブ列を作成する方法を示しています。 モバイルデバイスでは、画面の幅が576ピクセル未満の場合、2つの列が互いに積み重ねられます。

実例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

タブレットとPC端末

次の例は、PC（デスクトップ）ディスプレイの2つのカラスの幅がそれぞれ50％を占めることを示しています。タブレット端末の場合、左側の幅は25％、右側の幅は75％です。携帯電話などの小型デバイスに積み重ねて表示されます。

実例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>Florian Studio</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>初心者チュートリアル</p>
    </div>
  </div>
</div>

タブレット、PC（デスクトップ）モニター、大型PC（デスクトップ）モニター、超大型PC（デスクトップ）モニター

タブレット、PC（デスクトップ）モニター、大型PC（デスクトップ）モニター、および超大型PC（デスクトップ）モニターでの幅の比率はそれぞれ25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%です。携帯電話などの小型デバイスに積み重ねて表示されます。

実例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Florian Studio</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>初心者チュートリアル</p>
    </div>
  </div>
</div>

オフセットの列

オフセットの列は、offset-–クラスによって設定されます。最初のアスタリスク( * )は、ディスプレイのデバイスのタイプを示すsm、md、lg、xlであり、2番目のアスタリスク( * )は1から11までの数字です。

大画面のディスプレイでオフセットを使用するには、.offset-md- *クラスを使用します。 これらのクラスは、列の左外側の余白(マージン)を*列増やします。*の範囲は1から11です。

例えば：.offset-md-4は、.col-md-4を右に4列移動します。

実例

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>