Bootstrapグリッドでレイアウトを計画する.
追加するローはすべてBootstrapグリッド上に配置されます。カラムが共有する12本の等幅トラックです。1/3 + 2/3のようなレイアウトでは、1つのカラムが4トラック、もう1つが8トラックを使います。合計が合う幅の計画や、小画面用の2つ目のレイアウト設定にこのページを使います。ローの追加自体はRowの追加をご覧ください。
動画では4カラムのローにタブレット用の2つ目のレイアウトを設定し、ウィンドウを狭めています。
分数がトラックになる仕組み
| 分数 | トラック数 | 典型的な用途 |
|---|---|---|
| 1/1 | 12 | 全幅1カラム |
| 1/2 | 6 | 等幅2カラム |
| 1/3 | 4 | 等幅3カラム、または2/3横のサイドバー |
| 2/3 | 8 | 1/3サイドバー横のメインコンテンツ |
| 1/4 | 3 | 等幅4カラム、または3/4横のサイドバー |
| 3/4 | 9 | 1/4サイドバー横のメインコンテンツ |
| 1/6 | 2 | 小さな6カラム(例: ロゴの並び) |
| 5/12 and 7/12 | 5 and 7 | ほぼ等幅の2カラム |
ローのトラック合計は12です。超える場合は余分なカラムが新しい行に折り返します。整数トラックになる分数を使います。2分の1、3分の1、4分の1、6分の1、12分の1です。1/5のような分数に対応するBootstrapクラスはありません。
カラム内のローはそのカラムを独自の12トラックに分割します。詳しくはネストをご覧ください。
タブレット用の別レイアウトをローに設定する
新しいローに選ぶレイアウトはMedium devices (≥ 768px)以上に適用されます。その幅未満ではカラムが積み重なります。次の手順でデスクトップでは4カラムを維持し、タブレットでは1行に2つずつ表示します。
- ローにホバーしてコントロールバーのグリッドアイコンをクリックします。レイアウトダイアログはMedium devices (≥ 768px)パネルで開きます。
- 4等分カラムのタイルを選びます。
- クリックするのはAdd screen sizeです。レイアウトのコピーを持つ2つ目のパネルが開きます。
- 新しいパネルの画面サイズ一覧でSmall devices (≥ 576px)を選びます。
- クリックするのはCustom Layoutで、
1/2 + 1/2 + 1/2 + 1/2と入力してSaveをクリックします。 - ツールバーのSaveをクリックします。
4つの2分の1で4カラムすべてを維持し、1行に2つずつ配置します。2カラムのタイルでは代わりにローが2カラムに減ります。
表示内容
広い画面ではローに4カラムが横並びで表示されます。ブラウザーウィンドウを768ピクセルより狭くすると1行2つに折り返します。576ピクセル未満ではすべてのカラムが全幅になります。
画面サイズ
レイアウトダイアログの各パネルは1つの画面サイズ用のカラムを設定します。レイアウトはより大きな画面にも適用され、独自パネルを持つ次のサイズまで有効です。
| パネル | 適用開始 |
|---|---|
| Extra small (< 576px) | 最小のスマートフォン以上 |
| Small devices (≥ 576px) | 576ピクセル |
| Medium devices (≥ 768px) | 768ピクセル。新しいローの最初のパネル |
| Large devices (≥ 992px) | 992ピクセル |
| Extra large (≥ 1200px) | 1200ピクセル |
| Extra extra large (≥ 1400px) | 1400ピクセル |
Remove screen sizeはパネルとそのレイアウトを削除します。Custom Layoutは分数の一覧なら何でも受け付けます(例: 1/4 + 1/2 + 1/4)。パネルのレイアウトがタイルのいずれでもない場合、ダイアログはCustom Layoutをマークし、その上にレイアウト名を表示します(例: Custom Layout (1/2 + 1/2 + 1/2 + 1/2))。クリックするとカスタムレイアウトボックスでそのレイアウトを編集できます。
サイト上のBootstrap
グリッドにはページ上のBootstrap 5が必要です。サイト管理者は取得元をDXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings)のBootstrap配下で選びます。Sideload Bootstrap filesはBootstrap 5(ビルダーが自ら読み込む)またはNone (theme provides Bootstrap)を提供します。
レイアウトが表示されない場合
- すべての画面サイズでカラムが積み重なります。Bootstrapが読み込まれていません。設定はNone (theme provides Bootstrap)で、テーマも読み込んでいません。選ぶのはBootstrap 5です。Sideload Bootstrap files配下の
/admin/dxpr_studio/dxpr_builder/settingsで設定します。 - デスクトップのレイアウトでカラムが減りました。別の画面サイズにカラムの少ないタイルを選んだため、ビルダーは等幅レイアウトを合わせて減らしました。取り消しとやり直しの説明どおりに変更を取り消し、カラムごとに1つの分数でCustom Layoutを使います。
- 最後のカラムが新しい行に落ちます。分数の合計が12トラックの1行分を超えています。合計が1になるようにします(例:
1/4 + 3/4)。 - カスタムカラムに明確な幅がありません。1/5のような分数にはBootstrapクラスがありません。2分の1、3分の1、4分の1、6分の1、12分の1を使います。
次のステップ
- Rowの追加：ローを追加してカラムプリセットを選ぶ。
- レスポンシブデザイン：スマートフォン、タブレット、デスクトップでの表示・非表示を切り替える。
- ネスト：カラム内にローを配置して細かいレイアウトを作る。