后浪云Bootstrap4教程：Bootstrap4 小工具
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
边框
使用 border 类可以添加或移除边框:
实例
<
span
class
=
"
border
"
>
</
span
>
<
span
class
=
"
border border-0
"
>
</
span
>
<
span
class
=
"
border border-top-0
"
>
</
span
>
<
span
class
=
"
border border-right-0
"
>
</
span
>
<
span
class
=
"
border border-bottom-0
"
>
</
span
>
<
span
class
=
"
border border-left-0
"
>
</
span
>
尝试一下 »
边框颜色
Bootstrap4 提供了一些类来设置边框颜色:
实例
<
span
class
=
"
border border-primary
"
>
</
span
>
<
span
class
=
"
border border-secondary
"
>
</
span
>
<
span
class
=
"
border border-success
"
>
</
span
>
<
span
class
=
"
border border-danger
"
>
</
span
>
<
span
class
=
"
border border-warning
"
>
</
span
>
<
span
class
=
"
border border-info
"
>
</
span
>
<
span
class
=
"
border border-light
"
>
</
span
>
<
span
class
=
"
border border-dark
"
>
</
span
>
<
span
class
=
"
border border-white
"
>
</
span
>
尝试一下 »
边框圆角设置
使用rounded 类可以添加圆角边框:
实例
<
span
class
=
"
rounded
"
>
</
span
>
<
span
class
=
"
rounded-top
"
>
</
span
>
<
span
class
=
"
rounded-right
"
>
</
span
>
<
span
class
=
"
rounded-bottom
"
>
</
span
>
<
span
class
=
"
rounded-left
"
>
</
span
>
<
span
class
=
"
rounded-circle
"
>
</
span
>
<
span
class
=
"
rounded-0
"
>
</
span
>
尝试一下 »
浮动
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
实例
<
div
class
=
"
clearfix
"
>
<
span
class
=
"
float-left
"
>
左浮动
</
span
>
<
span
class
=
"
float-right
"
>
右浮动
</
span
>
</
div
>
尝试一下 »
响应式浮动
我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
实例
<
div
class
=
"
float-sm-right
"
>
在大于小屏幕尺寸上右浮动
</
div
>
<
br
>
<
div
class
=
"
float-md-right
"
>
在大于中等屏幕尺寸上右浮动
</
div
>
<
br
>
<
div
class
=
"
float-lg-right
"
>
在大于大屏幕尺寸上右浮动
</
div
>
<
br
>
<
div
class
=
"
float-xl-right
"
>
在大于超大屏幕尺寸上右浮动
</
div
>
<
br
>
<
div
class
=
"
float-none
"
>
没有浮动
</
div
>
尝试一下 »
居中对齐
使用 .mx-auto 类来设置居中对齐:
实例
<
div
class
=
"
mx-auto bg-warning
"
style
=
"
width:150px
"
>
居中显示
</
div
>
尝试一下 »
宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
实例
<
div
class
=
"
w-25 bg-warning
"
>
宽度 25%
</
div
>
<
div
class
=
"
w-50 bg-warning
"
>
宽度 50%
</
div
>
<
div
class
=
"
w-75 bg-warning
"
>
宽度 75%
</
div
>
<
div
class
=
"
w-100 bg-warning
"
>
宽度 100%
</
div
>
<
div
class
=
"
mw-100 bg-warning
"
>
最大宽度 100%
</
div
>
尝试一下 »
高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
实例
<
div
style
=
"
height:200px;background-color:#ddd
"
>
<
div
class
=
"
h-25 bg-warning
"
>
高度 25%
</
div
>
<
div
class
=
"
h-50 bg-warning
"
>
高度 50%
</
div
>
<
div
class
=
"
h-75 bg-warning
"
>
高度 75%
</
div
>
<
div
class
=
"
h-100 bg-warning
"
>
高度 100%
</
div
>
<
div
class
=
"
mh-100 bg-warning
"
style
=
"
height:500px
"
>
最大高度 100%
</
div
>
</
div
>
尝试一下 »
间距
间距设置语法如下:
{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- 用来设置marginp- 用来设置padding
sides 主要指方向：
t- 用来设置margin-top或padding-topb- 用来设置margin-bottom或padding-bottoml- 用来设置margin-left或padding-leftr- 用来设置margin-right或padding-rightx- 用来设置*-left和*-righty- 用来设置*-top和*-bottom- blank - 用来设置元素在四个方向的
margin或padding
size 指的是边距的大小：
0- 设置margin或padding为01- 设置margin或padding为$spacer * .252- 设置margin或padding为$spacer * .53- 设置margin或padding为$spacer4- 设置margin或padding为$spacer * 1.55- 设置margin或padding为$spacer * 3auto- 设置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;
}
实例
<
div
class
=
"
mx-auto
"
style
=
"
width: 200px;
"
>
元素设置居中
</
div
>
<
form
>
<
div
class
=
"
form-row
"
>
<
div
class
=
"
form-group
"
>
<
label
for
=
"
text
"
class
=
"
mt-2
"
>
设置 margin-top：
</
label
>
<
input
type
=
"
text
"
class
=
"
form-control
"
id
=
"
text
"
placeholder
=
"
email
"
>
<
label
for
=
"
color
"
class
=
"
mt-2
"
>
颜色：
</
label
>
<
input
type
=
"
color
"
id
=
"
color
"
class
=
"
form-control
"
style
=
"
width: 60px;padding: 4px;
"
autocomplete
=
"
off
"
value
=
"
#656565
"
>
</
div
>
</
div
>
</
form
>
尝试一下 »
更多实例
.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 | 尝试一下 |