内边距(pading)外边距(margin)
m - for classes 代表 margin
p - for classes 代表 padding
t - for classes that set margin-top or padding-top 设置margin-top或padding-top
b - for classes that set margin-bottom or padding-bottom 设置margin-bottom或padding-bottom
l - for classes that set margin-left or padding-left 设置margin-left或padding-left
r - for classes that set margin-right or padding-right 设置margin-right或padding-right
x - for classes that set both -left and -right 设置padding-left和padding-right或margin-left和margin-right
y - for classes that set both -top and -bottom 设置padding-top和padding-bottom或margin-top和margin-bottom
空白 – 在元素的所有4个边上设置边距或填充
0 – 将边距或填充设置为0
1 – 将边距或填充设置为.25rem(如果font-size为16px则为4px)
2 – 将边距或填充设置为.5rem(如果字体大小为16px则为8px)
3 – 将边距或填充设置为1rem(如果字体大小为16px,则为16px)
4 – 将边距或填充设置为1.5rem(如果字体大小为16px,则为24px)
5 – 将边距或填充设置为3rem(如果font-size为16px则为48px)
mt-3 设置上边距3rem
boostrap各种设备大小,以及不同设备的隐藏和显示
一:屏幕尺寸的区别
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
一个栅格代表1,总共十二个。以上四个类分别表示当屏幕的宽度为多少时,触发相应的类
二:不同尺寸的显示和隐藏
Class | 设备 |
---|---|
.visible-xs | 额外的小设备(小于 768px)可见 |
.visible-sm | 小型设备(768 px 起)可见 |
.visible-md | 中型设备(768 px 到 991 px)可见 |
.visible-lg | 大型设备(992 px 及以上)可见 |
.hidden-xs | 额外的小设备(小于 768px)隐藏 |
.hidden-sm | 小型设备(768 px 起)隐藏 |
.hidden-md | 中型设备(768 px 到 991 px)隐藏 |
.hidden-lg | 大型设备(992 px 及以上)隐藏 |
网友评论