可从Bootstrap官网定制页勾选所需组件在线生成精简CSS，或用Sass源码按需导入模块并调整变量重新编译；前者适合无构建环境的轻量项目，后者支持深度定制如改色、删断点、禁用工具类等。
怎么从 Bootstrap 官网定制 CSS 文件
Bootstrap 官网提供的定制页面（https://getbootstrap.com/docs/5.3/customize/）不是“下载源码再编译”，而是在线生成精简版 bootstrap.min.css。它只包含你勾选的组件和工具类，不打包未选模块——这是最直接的体积削减方式。
关键点：这个页面导出的是纯 CSS，不带 JS、不带图标、不带 Sass 变量，也不支持自定义颜色或断点。它适合快速上线、对主题无特殊要求、且只用到部分组件（比如只要 Alert、Button、Grid）的项目。
- 打开官网定制页后，先取消全选（右上角「Deselect all」），再按需勾选——别信默认勾选项，
Reboot和Utilities虽基础，但Utilities里一堆响应式间距类（如ms-lg-3）很容易悄悄拉高体积 - 如果项目完全不用表单、折叠、下拉等交互组件，就别勾
Forms、Dropdowns、Accordion，它们各自贡献 2–5KB CSS - 导出的 CSS 不含
@import或外部依赖，可直接<link>引入，无需构建流程
用 Sass 源码 + @import 按需引入（推荐给有构建环境的项目）
如果你用 Webpack/Vite 等工具，且需要真正可控的定制（比如改主色、删掉所有 prefers-reduced-motion 相关规则、或只保留 col-md-6 不要 col-sm-*），必须走 Sass 方式。Bootstrap 的 scss/ 目录结构就是为这种拆分设计的。
常见错误是直接 @import "bootstrap/scss/bootstrap"——这等于全量引入，和 CDN 无异。正确做法是跳过总入口，手动组合：
立即学习“前端免费学习笔记（深入）”；
- 新建自己的
custom.scss，只@import明确需要的模块，例如：@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/grid"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/buttons";
- 删掉
bootstrap/scss/_reboot.scss？不行。Reboot是 CSS 重置核心，去掉会导致按钮、表格等样式错乱；但可以删_print.scss（除非要打印支持） - 想砍掉所有动画？删
_transitions.scss和_helpers.scss里的.fade、.show类即可，但注意Toast、Modal的 JS 行为会失效（它们依赖这些 class 控制显隐）
为什么 bootstrap-icons 和 bootstrap.js 不影响 CSS 体积
很多人混淆：以为勾掉官网定制页里的 Icons 就能减小 CSS 文件大小。其实 bootstrap-icons 是独立字体+SVG 包，它的 CSS（bootstrap-icons.css）和主框架 CSS 完全分离。同理，bootstrap.js 是纯 JS，和 CSS 体积零关系。
所以如果你只关心 CSS 体积，就专注在 bootstrap.min.css 或你编译出的 Sass 输出上。其他资源是否引入，属于 HTML 或打包配置层面的问题。
- 检查实际加载的 CSS 文件大小，用浏览器 DevTools 的 Network 面板看
bootstrap.*.css的 Transferred 值，别只看文件名 - 用
purgecss或unocss这类工具做进一步裁剪？可行，但属于运行时分析，和 Bootstrap 自身定制逻辑无关；而且容易误删动态生成的 class（比如 JS 拼的bg-${type}）
容易被忽略的体积黑洞：Utility API 和 Responsive Breakpoints
Bootstrap 的工具类（mt-3、d-flex、text-center）看着简单，但每个都按断点重复生成（sm、md、lg…）。默认 5 个断点 × 几十类工具 = 数 KB 代码。这才是按需定制中最常被低估的部分。
解决方法不是少用工具类，而是控制生成范围：
- 在 Sass 中修改
$grid-breakpoints，比如只留xs和md，删掉sm、lg、xl，能直接砍掉约 40% 工具类 CSS - 禁用某类工具：设
$enable-negative-margins: false或$enable-shadows: false，对应m-n*、shadow-*类就不会输出 - 如果项目完全不需要响应式隐藏（
d-none d-md-block），把$display-components: ()设为空 map，整块display工具类就没了
改完变量后必须重新编译 Sass，光改 JS 配置或 HTML 不起作用。这也是为什么很多人试了“删 breakpoint”却没看到体积下降——根本没触发重新生成。
