引入方式
前端项目基于jquery去构建：可以直接引入cdn库，bootstrap4.css、jquery.js、bootstrap4.js
前端项目基于react去构建：bootstrap4.css（scss,less）、react.js、react-bootstrap
前端项目基于angular去构建：bootstrap4.css（scss,less）、angular4、ngx-bootstrap
目录
容器和网格系统
字体颜色及背景颜色
边框
内边距（pading）外边距（margin）
清除浮动
display 显示
嵌入元素样式
弹性布局
浮动
图片替换文字
定位
尺寸（size）
文本
垂直对齐（Vertical alignment）
显示隐藏
表格
按钮及按钮组
列表
表单组
信息提示框
三角
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
内边距
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
1
2
3
外边距
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
mx-auto
margin:0 auto;
1
2
3
4
5
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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、嵌入元素样式
包含