bootstrap使用 npm 下载：
cnpm i bootstrap@4基础模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 101</title>
<link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://www.52dixiaowo.com/tools/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello，Bootstrap4！</h1>
</body>
</html>新增间距：(spacing)
系统提供了一组缩写CSS，并赋予 margin 或 padding 值，包括对单个属性、所有 属性以及垂直、水平等属性的支持，距离单位是在采用 0.25rem 到 3rem，Class来源于Sass map定义。
Spacing 通用样式适用于所有屏幕尺寸，从 xs 到 xl各种规格尺寸。因为这些类是从min-width: 0及以上开始引用的，所以不受媒体查询的约束，然而，其余的屏幕断点（设备解析）包含屏幕尺寸缩写。
对于xs屏幕，使用固定格式{property}{sides}-{size} 命名CSS方法，对于r sm、 md、lg、 xl使用 {property}{sides}-{breakpoint}-{size}格式命名CSS方法。
如果 属性 是下列之一：
m– 这个Class属性会设定margin值p– 这个Class属性会设定padding值
边缘 设定：
t– 这个Class属性会设定margin-top或padding-topb– 这个Class属性会设定margin-bottom或padding-bottoml– 这个Class属性会设定margin-left或padding-leftr– 这个Class属性会设定margin-right或padding-rightx– 这个Class属性会设定*-left和*-right两个值。y– 这个Class属性会设定*-top和*-bottom两个值- 空白 – 这个Class属性会设定
margin或padding元素的四个边。
尺寸规格定义：
0– 这个Class属性会设定margin或padding的样式值为01– (默认时)这个Class属性会设定margin或padding以$spacer * .25规格呈现2– (默认时) 这个Class属性会设定margin或padding以$spacer * .5规格呈现3– (默认时)这个Class属性会设定margin或padding以$spacer规格呈现4– (默认时) 这个Class属性会设定margin或padding以$spacer * 1.5规格呈现5– (默认时)这个Class属性会设定margin或padding以$spacer * 3规格呈现auto– 这个Class属性会设定margin值 auto（按浏览器默认值自由展现）。
(你也可以对$spacers的 Sass map 调整，包括添加条目来增加更多尺寸。)
以下是这些Class样式的代表性的示例：
.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;
}本篇完，还有疑问？留下评论吧