※※【レイアウト雛形】スペースクラス※※
マージン、パディングはすべて以下のクラスでコントロール可能です。
{property}{sides}-{size}
{property}(マージン、パディングの別)
m | p |
---|---|
マージン | パディング |
{sides}(マージン、パディングの方向)
t | b | l | r |
---|---|---|---|
上 | 下 | 左 | 右 |
{size}(マージン、パディングの大きさ)
1 | 2 | 3 | 4 | 5 |
---|---|---|---|---|
0.25rem | 0.5rem | 1rem | 1.5rem | 3rem |
使用例
上マージン0.25rem | 下マージン0.25rem | 左マージン0.25rem | 右マージン0.25rem |
---|---|---|---|
class=”mt-1″ | class=”mb-1″ | class=”ml-1″ | class=”mr-1″ |
上パディング0.25rem | 下パディング0.25rem | 左パディング0.25rem | 右パディング0.25rem |
---|---|---|---|
class=”pt-1″ | class=”pb-1″ | class=”pl-1″ | class=”pr-1″ |
ブレークポイントを追加することでレスポンシブに対応。
{property}{sides}-{breakpoint}-{size}
{breakpoint}(ウインドウサイズ)
md | lg | xl |
---|---|---|
720px以上 | 960px以上 | 1140px以上 |
使用例
上マージン3rem(スマホのみ) | 上マージン3rem(PCのみ) | 下マージン3rem(スマホのみ) | 下マージン3rem(PCのみ) |
---|---|---|---|
class=”mt-3 mt-md-0″ | class=”mt-md-3″ | class=”mb-3 mb-md-0″ | class=”mb-md-3″ |
上パディング3rem(スマホのみ) | 上パディング3rem(PCのみ) | 下パディング3rem(スマホのみ) | 下パディング3rem(PCのみ) |
---|---|---|---|
class=”pt-3 pt-md-0″ | class=”pt-md-3″ | class=”pb-3 pb-md-0″ | class=”pb-md-3″ |