Bootstrap4 小工具
Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。
边框
使用 border 类可以添加或移除边框:
实例
尝试一下 »
边框颜色
Bootstrap4 提供了一些类来设置边框颜色:
实例
尝试一下 »
边框圆角设置
使用 rounded 类可以添加圆角边框:
实例
尝试一下 »
浮动
.float-right 类用于设置元素右浮动, .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
实例
尝试一下 »
响应式浮动
我们看可以设置浮动 ( .float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
实例
尝试一下 »
居中对齐
使用 .mx-auto 类来设置居中对齐:
宽度
元素上使用 w-* 类 ( .w-25 , .w-50 , .w-75 , .w-100 , .mw-100 ) 来设置宽度:
实例
尝试一下 »
高度
元素上使用 h-* 类 ( .h-25 , .h-50 , .h-75 , .h-100 , .mh-100 ) 来设置高度:
实例
尝试一下 »
间距
间距设置语法如下:
{property}{sides}-{size} // 适用 xs(<=576px) {property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)
breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)。
property 代表属性,包含:
-
m
- 用来设置margin
-
p
- 用来设置padding
sides 主要指方向:
-
t
- 用来设置margin-top
或padding-top
-
b
- 用来设置margin-bottom
或padding-bottom
-
l
- 用来设置margin-left
或padding-left
-
r
- 用来设置margin-right
或padding-right
-
x
- 用来设置*-left
和*-right
-
y
- 用来设置*-top
和*-bottom
-
blank - 用来设置元素在四个方向的
margin
或padding
size 指的是边距的大小:
-
margin
或padding
为 -
1
- 设置margin
或padding
为$spacer * .25
-
2
- 设置margin
或padding
为$spacer * .5
-
3
- 设置margin
或padding
为$spacer
-
4
- 设置margin
或padding
为$spacer * 1.5
-
5
- 设置margin
或padding
为$spacer * 3
-
auto
- 设置margin
为 auto
外边距 margin 可以设置负数,在数字前面添加字母 "n" :
-
n1
- 设置 margin 为 -.25rem (如果 font-size 为 16px 则为 -4px ) -
n2
- 设置 margin 为 -.5rem (如果 font-size 为 16px 则为 -8px) -
n3
- 设置 margin 为 -1rem (如果 font-size 为 16px 则为 -16px) -
n4
- 设置 margin 为 -1.5rem (如果 font-size 为 16px 则为 -24px) -
n5
- 设置 margin 为 -3rem (如果 font-size 为 16px 则为 -48px)
看下部分边距的源码设置:
.mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }
实例
尝试一下 »
更多实例
.m-# / m-*-#
|
设置所有边的外边距 | 尝试一下 |
.mt-# / mt-*-#
|
margin top | 尝试一下 |
.mb-# / mb-*-#
|
margin bottom | 尝试一下 |
.ml-# / ml-*-#
|
margin left | 尝试一下 |
.mr-# / mr-*-#
|
margin right | 尝试一下 |
.mx-# / mx-*-#
|
margin left 与 right | 尝试一下 |
.my-# / my-*-#
|
margin top 与 bottom | 尝试一下 |
.p-# / p-*-#
|
使用边设置 padding | 尝试一下 |
.pt-# / pt-*-#
|
padding top | 尝试一下 |
.pb-# / pb-*-#
|
padding bottom | 尝试一下 |
.pl-# / pl-*-#
|
padding left | 尝试一下 |
.pr-# / pr-*-#
|
padding right | 尝试一下 |
.py-# / py-*-#
|
padding top 与 bottom | 尝试一下 |
.px-# / px-*-#
|
padding left 与 right | 尝试一下 |