Bootstrap 样式定制有五种方式：一、直接覆盖默认类样式；二、用内联样式或自定义 class 替代工具类；三、基于 CSS 变量动态重定义；四、使用 Sass 源码定制并重新编译；五、采用官方定制构建器生成精简版本。
一、直接覆盖默认类样式
通过在 Bootstrap 样式表之后引入自定义 CSS 文件，可对现有类（如 .btn、.card）进行属性重写。该方式无需构建流程，适合局部、快速调整。
1、在项目中新建 my-custom.css 文件。
2、在文件中编写覆盖规则，例如：.btn { border-radius: 12px !important; }。
3、确保 HTML 中 <link> 标签顺序为：先 bootstrap.css，后 my-custom.css。
二、使用内联样式或自定义 class 替代工具类
避免依赖 Bootstrap 的复合工具类（如 border-dashed border-danger），改用语义清晰、可控性强的独立 class 或内联 style，防止样式层叠冲突与覆盖失效。
1、为 div 元素添加自定义 class，例如：<div class="my-border-dashed-red"></div>。
2、在 CSS 中定义该 class：.my-border-dashed-red { border: 2px dashed #dc3545; }。
3、若仅单次使用，可直接写内联样式：<div style="border: 2px dashed #dc3545;"></div>。
三、基于 CSS 变量动态重定义（Bootstrap 5+）
Bootstrap 5 起大量采用 CSS 自定义变量控制组件外观，修改这些变量即可全局统一调整颜色、间距、圆角等，且天然支持 dark mode 扩展。
1、在 :root 或组件作用域中重设变量，例如：:root { --bs-btn-primary-bg: #4a5568; }。
2、若需适配深色模式，补充媒体查询：@media (prefers-color-scheme: dark) { :root { --bs-btn-primary-bg: #2d3748; } }。
3、避免直接修改 .btn-primary 的 background 属性，因其被 !important 和变量双重锁定，硬覆盖易失效。
四、使用 Sass 源码定制并重新编译
下载 Bootstrap 源码（Sass 版本），修改 _variables.scss 中的变量值（如 $primary、$border-radius），再通过 Sass 编译器生成精简、专属的 CSS 文件，实现深度定制。
1、从官方 GitHub 获取 bootstrap/scss/ 目录下的源文件。
2、编辑 _variables.scss，调整 $body-bg: #f8f9fa; 或 $enable-rounded: true; 等开关与值。
3、运行 sass bootstrap.scss custom-bootstrap.css 完成编译。
五、采用官方定制构建器生成精简版本
利用 Bootstrap 官方在线构建器（基于 Less），可视化调整主题变量、启用/禁用组件模块，一键下载仅含所需功能的 CSS 与 JS 包，减少冗余体积。
1、访问 Bootstrap 官网提供的构建页面，选择目标版本（如 v5.3）。
2、在变量面板中修改 @primary、@border-radius 等核心参数。
3、取消勾选未使用的组件（如 carousel、toast），点击 Download 获取定制包。
