Bootstrap グリッドの例
Bootstrap グリッドシステム内での構築に慣れるための基本的なグリッドレイアウトです。
これらの例では、.themed-grid-col クラスがカラムに追加され、テーマが適用されています。これは、Bootstrap でデフォルトで使用できるクラスではありません。
5 つのグリッド層
Bootstrap グリッドシステムには、サポートするデバイスの範囲ごとに 5 つの層があります。各層は最小ビューポートサイズから始まり、上書きされない限り、より大きなデバイスに自動的に適用されます。
3 つの均等なカラム
デスクトップから大型デスクトップまで、3 つの均等幅のカラムを取得します。モバイルデバイス、タブレット、およびそれ以下のデバイスでは、カラムは自動的に積み重ねられます。
3 つの均等なカラムの代替
.row-cols-* クラスを使用すると、均等なカラムのグリッドを簡単に作成できます。
.row-cols-md-3 の子要素である .col.row-cols-md-3 の子要素である .col.row-cols-md-3 の子要素である .col3 つの不等なカラム
デスクトップから大型デスクトップまで、さまざまな幅の 3 つのカラムを取得します。グリッドカラムは、単一の水平ブロックで合計 12 になる必要があることに注意してください。それ以上になると、ビューポートに関係なくカラムが積み重なり始めます。
2 つのカラム
デスクトップから大型デスクトップまで、2 つのカラムを取得します。
全幅、単一のカラム
全幅要素にはグリッドクラスは必要ありません。
2 つのネストされたカラムを持つ 2 つのカラム
ドキュメントに従って、ネストは簡単です。既存のカラム内にカラムの行を配置するだけです。これにより、デスクトップから大型デスクトップまで、2 つのカラムが作成され、大きいカラム内にはさらに 2 つ (等幅) のカラムが作成されます。
モバイルデバイスサイズ、タブレット、およびそれ以下のデバイスでは、これらのカラムとそのネストされたカラムは積み重ねられます。
混合: モバイルとデスクトップ
Bootstrap v5 グリッドシステムには、xs (extra small、このクラスの接尾辞は使用されません)、sm (small)、md (medium)、lg (large)、xl (x-large)、xxl (xx-large) の 6 つの層のクラスがあります。これらのクラスのほぼすべての組み合わせを使用して、より動的で柔軟なレイアウトを作成できます。
クラスの各層はスケールアップします。つまり、md、lg、xl、xxl で同じ幅を設定する予定の場合は、md のみを指定する必要があります。
混合: モバイル、タブレット、およびデスクトップ
ガター
.gx-* クラスを使用すると、水平方向のガターを調整できます。
.gx-4 ガターを持つ .col.gx-4 ガターを持つ .col.gx-4 ガターを持つ .col.gx-4 ガターを持つ .col.gx-4 ガターを持つ .col.gx-4 ガターを持つ .col垂直方向のガターを制御するには、.gy-* クラスを使用します。
.gy-4 ガターを持つ .col.gy-4 ガターを持つ .col.gy-4 ガターを持つ .col.gy-4 ガターを持つ .col.gy-4 ガターを持つ .col.gy-4 ガターを持つ .col.g-* クラスを使用すると、両方向のガターを調整できます。
.g-3 ガターを持つ .col.g-3 ガターを持つ .col.g-3 ガターを持つ .col.g-3 ガターを持つ .col.g-3 ガターを持つ .col.g-3 ガターを持つ .colコンテナ
Bootstrap v4.4 で追加された追加のクラスにより、特定のブレークポイントまで 100% の幅を持つコンテナが可能になります。v5 では、新しい xxl ブレークポイントが追加されました。