Bootstrap定制需介入Sass构建流程：手动按需引入模块、ES模块化导入JS、重写变量与mixin，而非仅覆盖CSS；须正确配置Popper依赖、图标资源及DOM就绪时机。
别从零造轮子——Bootstrap 本身不支持“制作自己的 Bootstrap 框架”这种操作；你真正需要的，是基于 Bootstrap 源码定制一套符合团队规范、剔除冗余、集成自有组件的 私有 UI 构建产物，而非重写框架。
为什么要改源码而不是只用 CSS 变量？
仅靠 :root CSS 变量只能覆盖颜色、圆角、阴影等基础设计 token，无法删减未使用的组件（比如你永远不用 carousel 或 toast），也无法替换默认的栅格行为、表单样式逻辑或 JS 插件依赖链。真要轻量、可控、可维护，必须介入构建流程。
- Bootstrap 5+ 默认用 Sass 编译，
_variables.scss和_maps.scss控制全局配置 - 所有组件都按需引入：不 import
bootstrap.scss，而是手动 import 需要的模块（如scss/forms、scss/buttons） - JS 部分必须用 ES 模块方式导入（
import { Modal } from 'bootstrap'），避免打包整个bootstrap.bundle.js - 若保留 Bootstrap 的响应式断点但想改命名（如把
lg改成desktop），得重写$grid-breakpoints和配套的 mixin
如何安全地替换默认按钮/表单/卡片样式？
直接覆盖 CSS 类（如重写 .btn-primary）会导致 specificity 爆炸且难以调试；正确做法是在 Sass 层级做“增强式重写”：
- 在自定义
_custom-buttons.scss中，先@forward "bootstrap/scss/buttons" with (...)传入新参数，再用@use覆盖变量（如$btn-padding-y: 0.5rem） - 表单控件建议用
@use "bootstrap/scss/forms/input"单独引入，并配合$form-control-border-radius: var(--bs-border-radius-sm)绑定设计系统变量 - 卡片（
.card）若需去掉 box-shadow 并加背景渐变，不要写.card { box-shadow: none; background: linear-gradient(...) }，而应在$card-box-shadow变量中设为null，再用@extend或新 class 封装渐变逻辑 - 所有重写必须放在 Bootstrap
@use之后、@forward之前，否则变量不会生效
为什么 npm run build 后 JS 组件失效或报错 “Modal is not a constructor”？
这是最常见的构建断裂点：Bootstrap 的 JS 依赖 Popper（用于 tooltip/dropdown 定位），且默认导出是 UMD 格式。ESM 项目里若没配好 resolve 或 alias，就会找不到 popper.js 或加载错误版本。
- 确认已安装兼容版本：
npm install @popperjs/core@^2.11.8（Bootstrap 5.3 要求 Popper 2.x） - Vite 用户需在
vite.config.js中加resolve: { alias: { '@popperjs/core': '@popperjs/core/lib/index.js' } } - Webpack 用户检查
resolve.alias是否指向node_modules/@popperjs/core/lib/index.js，而非dist/下的 UMD 文件 - 调用前确保 DOM 已就绪：
document.addEventListener('DOMContentLoaded', () => { new Modal(...); })，否则querySelector找不到元素 - 若用 TypeScript，还要装
@types/bootstrap，否则new Modal(...)会报类型错误
最易被忽略的是字体图标和 SVG 图标的处理路径——Bootstrap 自带的 bootstrap-icons 是独立包，不随主框架编译；如果你删了 bootstrap-icons/font 但没替换为本地 SVG sprite，所有 都会空白。这类资源链路必须显式声明、单独构建、版本对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
