Bootstrap 5 グリッド

Bootstrap 5 グリッドシステム

Bootstrapのグリッドシステムはflexboxで構築されており、ページ上で最大12列を許可しています。

12列すべてを単独で使用しない場合、これらの列を組み合わせてより幅広い列を作成できます：

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

グリッドシステムは迅速に応答し、列はスクリーンサイズに応じて自動的に再配置されます。

合計が12に等しいかそれ以下であることを確認してください（12個のすべての列を使用しない場合）。

グリッドクラス

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

  • .col- (超小規模デバイス - スクリーン幅が576ピクセル未満)
  • .col-sm- (小規模デバイス - スクリーン幅が576ピクセル以上)
  • .col-md- (中規模デバイス - スクリーン幅が768ピクセル以上)
  • .col-lg- (大規模デバイス - スクリーン幅が992ピクセル以上)
  • .col-xl- (xlarge デバイス - スクリーン幅が1200px以上)
  • .col-xxl- (xxlarge デバイス - スクリーン幅が1400px以上)

これらのクラスを組み合わせることで、よりダイナミックで柔軟なレイアウトを作成できます。

ヒント：各クラスは比例で拡大されるため、以下のクラスを使用して sm および md 同じ幅を設定するには、指定する必要があります sm。

Bootstrap 5 グリッドの基本構造

以下は Bootstrap 5 グリッドの基本構造です：

<!-- 列の幅を制御し、異なるデバイス上での表示方法を制御 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- または Bootstrap が自動的にレイアウトを処理するように -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

第1の例：行を作成する（<div class="row">）。必要な数の列（適切な .col-*-* クラスのタグ）。第一の星 (*) は応答性を表し、sm、md、lg、xl、または xxl、第二の星は数字を表し、各行の合計が 12 になる必要があります。

第2つの例：各 col 数字を追加する代わりに、bootstrap がレイアウトを処理して等幅の列を作成します： "col" 要素 = 各 col は 50% の幅、3つの cols は各 col が 33.33% の幅です。4つの列 = 25% の幅など、さらに使用できます。また、以下を使用して等幅の列を作成することもできます： .col-sm|md|lg|xl|xxl 列にレスポンシブ性を付与します。

以下に基本的な Bootstrap 5 グリッドレイアウトの例をまとめました。

3等分列

以下の例では、すべてのデバイスおよびスクリーン幅で3つの等幅の列を作成する方法を示します：

例

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

自分で試してみましょう

レスポンシブ列

以下の例では、タブレットから始めて、4つの等幅の列を作成し、超大型デスクトップに拡張する方法を示します。幅が 576px 未満のスマートフォンやスクリーンでは、列が自動的に重ね合わせられます：

例

<div class="row">
  <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>
</div>

自分で試してみましょう

不等なレスポンシブ列

以下の例では、タブレットで異なる幅の列を取得し、超大型デスクトップに拡張する方法を示します：

例

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

自分で試してみましょう

ヒント：このチュートリアルの後半で、以下について学びます。 グリッドシステム の詳細な内容。