Since
0.9.0
Bulma 提供所有方向的外边距(margin)m*
和内边距(padding)p*
辅助类:
-
*t
是顶端(top)
-
*r
是右侧(right)
-
*b
是底端(bottom)
-
*l
是左侧(left)
-
*x
是水平方向(包括 左侧和右侧)
-
*y
是垂直方向(包括顶端和底端)
您需要联合使用内边距/外边距和方向的前缀。例如:
- 对于
margin-top
使用 mt-*
- 对于
padding-bottom
使用 pb-*
- 对于
margin-left
和 margin-right
使用 mx-*
每次使用这些 property-direction
联合符号时需要附加 6 种值后缀之一:
后缀 |
值 |
*-0 | 0 |
*-1 | 0.25rem |
*-2 | 0.5rem |
*-3 | 0.75rem |
*-4 | 1rem |
*-5 | 1.5rem |
*-6 | 3rem |
所有间距辅助类列表
#
共有 112 种间距辅助类可供选择:
Property |
Shortcut |
Classes ↓ |
Values → |
0 |
0.25rem |
0.5rem |
0.75rem |
1rem |
1.5rem |
3rem |
auto |
margin |
m |
m-0 |
m-1 |
m-2 |
m-3 |
m-4 |
m-5 |
m-6 |
m-auto |
margin-top |
mt |
mt-0 |
mt-1 |
mt-2 |
mt-3 |
mt-4 |
mt-5 |
mt-6 |
mt-auto |
margin-right |
mr |
mr-0 |
mr-1 |
mr-2 |
mr-3 |
mr-4 |
mr-5 |
mr-6 |
mr-auto |
margin-bottom |
mb |
mb-0 |
mb-1 |
mb-2 |
mb-3 |
mb-4 |
mb-5 |
mb-6 |
mb-auto |
margin-left |
ml |
ml-0 |
ml-1 |
ml-2 |
ml-3 |
ml-4 |
ml-5 |
ml-6 |
ml-auto |
margin-left and
margin-right
|
mx |
mx-0 |
mx-1 |
mx-2 |
mx-3 |
mx-4 |
mx-5 |
mx-6 |
mx-auto |
margin-top and
margin-bottom
|
my |
my-0 |
my-1 |
my-2 |
my-3 |
my-4 |
my-5 |
my-6 |
my-auto |
padding |
p |
p-0 |
p-1 |
p-2 |
p-3 |
p-4 |
p-5 |
p-6 |
p-auto |
padding-top |
pt |
pt-0 |
pt-1 |
pt-2 |
pt-3 |
pt-4 |
pt-5 |
pt-6 |
pt-auto |
padding-right |
pr |
pr-0 |
pr-1 |
pr-2 |
pr-3 |
pr-4 |
pr-5 |
pr-6 |
pr-auto |
padding-bottom |
pb |
pb-0 |
pb-1 |
pb-2 |
pb-3 |
pb-4 |
pb-5 |
pb-6 |
pb-auto |
padding-left |
pl |
pl-0 |
pl-1 |
pl-2 |
pl-3 |
pl-4 |
pl-5 |
pl-6 |
pl-auto |
padding-left and
padding-right
|
px |
px-0 |
px-1 |
px-2 |
px-3 |
px-4 |
px-5 |
px-6 |
px-auto |
padding-top and
padding-bottom
|
py |
py-0 |
py-1 |
py-2 |
py-3 |
py-4 |
py-5 |
py-6 |
py-auto |
使用这些类,将其添加到人任何 HTML 元素后面即可:
配置
#
由于每个开发者都有自己的个人习惯,正好 Bulma 也有定制的功能,所以您可以自行定制类名简写和间距值。
例如,如果您想要:
-
margin 简写为
mg
-
padding 就没有
-
horizontal 简写为
h
-
vertical 也不要了
-
只有 3 个值:"small" 是
10px
,"medium" 是 30px
,"large" 是 60px
您可以通过定制 SCSS 变量简化 CSS 输出:
Property |
Shortcut |
Classes ↓ |
Values → |
10px |
30px |
60px |
margin |
mg |
mg-small |
mg-medium |
mg-large |
margin-top |
mgt |
mgt-small |
mgt-medium |
mgt-large |
margin-right |
mgr |
mgr-small |
mgr-medium |
mgr-large |
margin-bottom |
mgb |
mgb-small |
mgb-medium |
mgb-large |
margin-left |
mgl |
mgl-small |
mgl-medium |
mgl-large |
margin-left and
margin-right
|
mgh |
mgh-small |
mgh-medium |
mgh-large |
通过定制输出,您已经缩减间距辅助类列表从原来的 112 行到了现在 18 行。