开始
Bootstrap · The most popular HTML, CSS, and JS library in the world.
CDN链接及包含代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>单独的Popper及JS（不使用Popper可以节省空间）
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>NPM(
npm install bootstrap@5.3.8
其他下载方式
JavaScript
辅助工具
Bootstrap 和 Webpack ·引导 v5.3：简化多个文件及依赖项的复杂项目的管理
Bootstrap 和 Parcel ·引导 v5.3：快速开发
Bootstrap 和 Vite ·引导 v5.3：前端构建工具
RFS ·引导 v5.3：调整字体
使用
文件结构
文件结构（使用包管理器）
your-project/
├── scss/
│ └── custom.scss
└── node_modules/
│ └── bootstrap/
│ ├── js/
│ └── scss/
└── index.html文件结构（不使用包管理器）
your-project/
├── scss/
│ └── custom.scss
├── bootstrap/
│ ├── js/
│ └── scss/
└── index.htmlImport
@import "../node_modules/bootstrap/scss/bootstrap（/特定功能）";Index.html文件结构（在使用了编译后的css文件）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Custom Bootstrap</title>
<link href="/css/custom.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>变量名覆盖
实际上是对于Bootstrap内置的一些特定变量（有其确定的值）进行重新赋值，而不用去源代码中改变，这样确实更方便。
//eg
$body-bg : #000 //表示将body的背景色重新赋值为#000Sass Map
实际上是对一些操作进行封装...
简单的封装实例：
$theme-colors: (
"primary": $primary,
"danger": $danger
);//这是一个关于主题颜色的封装Map的合并（Merge）：map-merge函数
￥Map的删除（Remove）map-remove函数
$theme-colors: map-remove($theme-colors, "info", "light", "dark");Sass Function
官方文档的这种选择性着色是一个很好的例子，除此之外想不到什么用函数的理由。
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}//函数
.custom-element-3 {
color: shift-color($success, 40%);
background-color: shift-color($success, -60%);
}//使用对比度设置
这里在官方文档中藏了一个对比度设置
转义 SVG
使用函数转义 SVG 背景图像和字符。
使用该函数时，必须引用数据 URI。
escape-svg<>#escape-svg
加减函数
使用substract可以避免一些减零错误
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}简单的CSS全局设置选项
摘录一些看着会常用的
颜色
常用的颜色变量的关键词
正文：body
浅文本：secondary
更浅的文本：tertiary
强调：emphasis
边框：border
颜色后加-xxx可以修改对比度
颜色主题（添加到父级，这样无论全局颜色是什么都会强制显示父级包含的颜色主题）
data-bs-themeSass构建颜色主题
感觉不是很重要暂时。
