bootstrap4常⽤样式（仅供参考）1、容器和⽹格系统
容器
container 固定宽度，不同尺⼨固定了不同的宽度
container-fluid 100%宽度
栅格系统
cal-xs//<768px
cal-sm //>=768px
cal-md //>=992px
cal-lg //>=1200px
2、字体颜⾊及背景颜⾊
字体
text-muted 柔和
text-primary 重要
text-success 成功
text-info 提⽰
text-warning 警告
text-danger 危险
text-secondary 副标题
text-dark 深灰⾊⽂字
text-light 浅灰⾊
text-white ⽩⾊
背景
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
3、边框
增加边框
border //默认：1px solid #dee2e6!important border-top
border-left
border-right
border-bottom
删除边框
border-0 //去除边框或者除去某⼀边的边框
border-top-0
border-left-0
border-right-0
border-bottom-0
边框颜⾊
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
圆⾓边框
rounded //border-radius: .25rem!important; rounded-top //只有顶部的两边有圆⾓
rounded-right
rounded-bottom
rounded-left
rounded-circle 类可以设置椭圆形图⽚
rounded-0
.img-thumbnail 类⽤于设置图⽚缩略图(图⽚有边框) 4 内边距（pading）外边距（margin）
m - for classes 代表 margin
p - for classes 代表 padding
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
内边距
p-1 // padding: .25rem!important;
p-2 // padding: .5rem!important;
p-3 // padding: 1rem!important;
p-4 // padding: 1.5rem!important;
p-5 // padding: 3rem!important;
单边
pt-0
pl-0
pr-0
pb-0
px-2
py-2
pading:.5rem 0; //py-2
外边距
m-1 // margin: .25rem!important;
m-2 // margin: .5rem!important;
m-3 // margin: 1rem!important;
m-4 // margin: 1.5rem!important;
m-5 // margin: 3rem!important;
单边
mt-0
ml-0
mr-0
mb-0
单边⼤⼩
mt-1 // margin-left: ($spacer * .25) !important;
mt-2
mt-3
mt-4
mt-5
flex布局对齐方式
mx-auto
margin:0 auto;
auto
ml-auto // margin-left: auto!important;
mr-auto // margin-right: auto!important;
mt-auto // margin-top: auto!important;
mb-auto // margin-bottom: auto!important;
5、清除浮动
clearfix //清除浮动类实现⽅式如下
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: “”;
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
6、display 显⽰
.
d-{value} for all //任何尺⼨使⽤
.d-{breakpoint}-{value} for sm, md, lg, and xl.//对应尺⼨加载d-none
d-inline
d-inline-block
d-block
d-table
d-table-cell
d-table-row
d-flex
d-inline-flex
打印样式 //使⽤较少
d-print-none
d-print-inline
d-print-inline-block
d-print-block
d-print-table
d-print-table-row
d-print-table-cell
d-print-flex
d-print-inline-flex
7、嵌⼊元素样式
包含, , , and 等元素样式
embed-responsive //外部盒⼦
embed-responsive-21by9（16by9,4by3,1by1）//宽⾼⽐embed-responsive-item //添加在元素上的样式
<iframe class="embed-responsive-item" src="..."></iframe>
弹性布局
d-flex //将对象作为弹性伸缩盒显⽰
d-inline-flex //将对象作为内联块级弹性伸缩盒显⽰
d-sm-flex //对应尺⼨加载
d-sm-inline-flex
d-md-flex
d-md-inline-flex
d-lg-flex
d-lg-inline-flex
d-xl-flex
d-xl-inline-flex
⽅向 ⽔平
flex-row
flex-row-reverse //相反⽅向
垂直
flex-column
flex-column-reverse
同样的不同尺⼨适配样式
flex-row

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。