Bootstrap在线定制工具通过图形化界面调整Sass变量与勾选组件，生成精简CSS/JS；本地Sass编译支持深度语义化定制；Icons与Theme Builder分离视觉资产；PostCSS purgecss构建后移除未用类；CSS自定义属性实现运行时动态覆盖。
一、Bootstrap在线定制工具的基本原理
Bootstrap在线定制工具允许开发者在官方或第三方平台上，通过图形化界面勾选所需组件、调整变量（如颜色、断点、字体等），并生成精简版CSS与JS文件。该过程绕过完整源码编译，依赖预置的Sass变量系统与模块化构建逻辑，输出仅含所选功能的静态资源。
1、访问Bootstrap官方定制页面或可信第三方定制平台。
2、在“Customize”区域展开“SCSS variables”与“Components”两个主面板。
3、修改$primary、$body-bg等核心变量值，或直接输入十六进制颜色代码。
4、取消勾选无需使用的组件（例如Carousel、Toast、Offcanvas）以排除对应CSS类与JS行为。
5、点击Download按钮获取压缩包，内含定制后的bootstrap.min.css和bootstrap.min.js。
二、使用Sass本地编译实现深度定制
该方法基于原始Bootstrap源码，通过本地Sass环境导入、覆盖变量、条件引入模块，实现语义化控制与样式层完全解耦。适用于需长期维护、多主题切换或严格遵循BEM规范的项目。
1、通过npm安装Bootstrap源码：npm install bootstrap，确保node_modules/bootstrap/scss/路径存在。
2、新建自定义SCSS入口文件（如custom.scss），顶部依次导入：@import "variables"; @import "custom-variables"; @import "bootstrap/scss/bootstrap";。
3、在custom-variables.scss中仅重写需变更的变量，例如：$enable-gradients: false; $border-radius: 0.25rem;。
4、运行sass custom.scss dist/css/custom.css --no-source-map完成编译。
5、验证输出文件体积，确认未被引用的组件样式未出现在最终CSS中。
三、借助Bootstrap Icons与Theme Builder分离视觉资产
当定制需求集中于图标集、配色方案或暗色模式支持时，可剥离Bootstrap核心框架，单独集成其配套生态工具，避免对布局与交互逻辑造成侵入性修改。
1、从https://icons.getbootstrap.com/下载所需SVG图标集合，或通过CDN引入精简图标字体。
2、在HTML中添加<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">。
3、启用Bootstrap 5.3+原生暗色模式支持：在<html>标签添加data-bs-theme="dark"属性。
4、利用prefers-color-scheme媒体查询联动系统偏好，动态切换data-bs-theme值。
5、将所有颜色变量映射至CSS自定义属性，例如：:root { --bs-primary: #4a6fa5; }，供JavaScript运行时切换。
四、采用PostCSS插件进行构建后精简
该方式不干预源码结构，而是在CSS打包阶段识别并移除未使用的Bootstrap类名，适合已上线项目无法重构SCSS流程但需降低资源体积的场景。
1、安装postcss与purgecss：npm install -D postcss purgecss postcss-cli。
2、创建postcss.config.js，配置purgecss插件，指定content为所有HTML/JS/TS文件路径。
3、在purgecss选项中加入whitelistPatterns: [/^btn-/, /^bg-/, /^text-/]保留基础工具类。
4、执行npx postcss src/assets/css/bootstrap.css -o dist/css/purged.css生成净化后CSS。
5、检查生成文件中是否仍存在.carousel-control-prev等全站未调用的选择器。
五、通过CSS自定义属性动态覆盖默认样式
无需重新编译或引入额外构建步骤，仅依靠现代浏览器支持的CSS变量机制，在运行时覆盖Bootstrap默认值，适用于A/B测试、用户主题选择等轻量级定制需求。
1、在<head>中插入<style>:root { --bs-blue: #2c3e50; --bs-body-font-size: 0.875rem; }</style>。
2、确保Bootstrap CSS在该<style>块之后加载，以保证变量优先级生效。
3、在DOM中动态修改document.documentElement.style.setProperty('--bs-primary', '#e74c3c');。
4、验证.btn-primary背景色是否实时响应新值，且不影响.btn-outline-primary边框色计算逻辑。
5、对--bs-breakpoint-xs至--bs-breakpoint-xxl全部断点变量赋值，确保栅格系统响应行为同步更新。
