スペーシングヘルパー
1つまたは複数のビューポート幅に対してテキストのサイズと色を変更します
Bulmaはすべての方向にマージン m* と パディング p* ヘルパーを提供します
*t*r*b*l*x*yマージン/パディングのプレフィックスと方向のサフィックスを組み合わせる必要があります。例えば
margin-topの場合は、mt-*を使用padding-bottomの場合は、pb-*を使用margin-leftとmargin-rightの両方の場合は、mx-*を使用これらのproperty-directionの組み合わせのそれぞれに、6つの値のサフィックスの1つを付加する必要があります
| サフィックス | 値 |
|---|---|
*-0 |
0 |
*-1 |
0.25rem |
*-2 |
0.5rem |
*-3 |
0.75rem |
*-4 |
1rem |
*-5 |
1.5rem |
*-6 |
3rem |
選択できる112個のスペーシングヘルパーがあります
| プロパティ | ショートカット | クラス↓ | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 値→ | 0 |
0.25rem |
0.5rem |
0.75rem |
1rem |
1.5rem |
3rem |
auto |
|
マージン |
m |
m-0 |
m-1 |
m-2 |
m-3 |
m-4 |
m-5 |
m-6 |
m-auto |
マージントップ |
mt |
mt-0 |
mt-1 |
mt-2 |
mt-3 |
mt-4 |
mt-5 |
mt-6 |
mt-auto |
マージンライト |
mr |
mr-0 |
mr-1 |
mr-2 |
mr-3 |
mr-4 |
mr-5 |
mr-6 |
mr-auto |
マージンボトム |
mb |
mb-0 |
mb-1 |
mb-2 |
mb-3 |
mb-4 |
mb-5 |
mb-6 |
mb-auto |
マージンレフト |
ml |
ml-0 |
ml-1 |
ml-2 |
ml-3 |
ml-4 |
ml-5 |
ml-6 |
ml-auto |
margin-left とマージンライト
|
mx |
mx-0 |
mx-1 |
mx-2 |
mx-3 |
mx-4 |
mx-5 |
mx-6 |
mx-auto |
margin-top とマージンボトム
|
my |
my-0 |
my-1 |
my-2 |
my-3 |
my-4 |
my-5 |
my-6 |
my-auto |
パディング |
p |
p-0 |
p-1 |
p-2 |
p-3 |
p-4 |
p-5 |
p-6 |
p-auto |
パディングトップ |
pt |
pt-0 |
pt-1 |
pt-2 |
pt-3 |
pt-4 |
pt-5 |
pt-6 |
pt-auto |
パディングライト |
pr |
pr-0 |
pr-1 |
pr-2 |
pr-3 |
pr-4 |
pr-5 |
pr-6 |
pr-auto |
パディングボトム |
pb |
pb-0 |
pb-1 |
pb-2 |
pb-3 |
pb-4 |
pb-5 |
pb-6 |
pb-auto |
パディングレフト |
pl |
pl-0 |
pl-1 |
pl-2 |
pl-3 |
pl-4 |
pl-5 |
pl-6 |
pl-auto |
padding-left とパディングライト
|
px |
px-0 |
px-1 |
px-2 |
px-3 |
px-4 |
px-5 |
px-6 |
px-auto |
padding-top とパディングボトム
|
py |
py-0 |
py-1 |
py-2 |
py-3 |
py-4 |
py-5 |
py-6 |
py-auto |
これらのクラスを使用するには、任意のHTML要素に単純に追加します
<!-- Adds 1rem of margin at the bottom -->
<p class="mb-4">Margin bottom</p>
<!-- Adds 0.25rem of padding on the left and the right -->
<p class="px-1">Horizontal padding</p>
<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class="mr-0 pt-3">Both</p>すべての開発者には独自の好みがあり、Bulmaのカスタマイズ機能を満足させるために、独自のクラス名のショートカットとスペーシングの値を指定できます。
たとえば、次のようにしたい場合
mgに省略hに省略10pxの"small"、30pxの"medium"、および60pxの"large"の3つの値のみを持つ場合これらのSCSS変数をカスタマイズすることで、CSS出力を簡略化できます
$spacing-shortcuts: ("margin": "mg"); $spacing-horizontal:
"h"; $spacing-vertical: null; $spacing-values: ("small": 10px, "medium": 30px,
"large": 60px); | プロパティ | ショートカット | クラス↓ | |||||||
|---|---|---|---|---|---|---|---|---|---|
| 値→ | 10px |
30px |
60px |
||||||
マージン |
mg |
mg-small |
mg-medium |
mg-large |
|||||
マージントップ |
mgt |
mgt-small |
mgt-medium |
mgt-large |
|||||
マージンライト |
mgr |
mgr-small |
mgr-medium |
mgr-large |
|||||
マージンボトム |
mgb |
mgb-small |
mgb-medium |
mgb-large |
|||||
マージンレフト |
mgl |
mgl-small |
mgl-medium |
mgl-large |
|||||
margin-left とマージンライト
|
mgh |
mgh-small |
mgh-medium |
mgh-large |
|||||
出力をカスタマイズすることで、スペーシングヘルパーのリストを112個からわずか18個に絞り込みました。