行
「行」は画面を横に分割して作るエリア。行の幅は画面横幅であり、高さは中のコンテンツに応じます。
コラム「列」
コラム「列」は、画面を縦に12分割して作るエリア。列の幅は画面幅の12分の1です。
| ブレークポイント | 内容 |
|---|---|
| Extra Small (xs) | 画面サイズが 576px未満 （スマホ）の場合に対応します。 <576px |
| Small (sm) | 画面サイズが 576px 以上（タブレット）の場合に対応します。 ≥576px |
| Medium (md) | 画面サイズが 768px 以上（ノートPC）の場合に対応します。 ≥768px |
| Large (lg) | 画面サイズが 992px 以上（デスクトップPC）の場合に対応します。 ≥992px |
| Extra Large (xl) | 画面サイズが 1200px 以上（ウルトラワイド）の場合に対応します。 ≥1200px |
| Extra Extra Large (xxl) | 画面サイズが 1400px 以上の場合に対応します。 ≥1400px |
ウィジェット配置
コンテナ内に配置いたします。配置方法、サイズに関しては ウィジェットの配置についてのご参照をお願いいたします。
基本的に コンテナ > 行 > カラム > 各ウィジェット の配置となります。
Large、Extra Large ⇒ パソコン
Medium ⇒ タブレット
Extra small ⇒ スマートフォン
例えば Extra Small 12、Large 6 に設定した場合、PC では 6/12 で半分のサイズ、スマートフォンでは 12/12 で全幅になります。
- PC（大きい画面）では、列の幅は6/12、つまり全体の半分の幅になります。
- スマートフォン（小さい画面）では、列の幅は12/12、つまり全体の全幅になります。
コメント
0件のコメント
サインインしてコメントを残してください。