Bootstrap默认字体颜色为#333，但直接修改body{color}无效，因.btn、.form-control等组件显式声明color且权重更高；推荐在bootstrap.min.css之后的:root中重定义--bs-body-color变量，并额外为按钮等组件补充color:var(--bs-body-color)。
Bootstrap 默认字体颜色是 #333（深灰），但直接改 body { color: ... } 很可能无效——因为很多组件（比如 .btn、.form-control、.alert）不继承 body 的颜色，而是各自硬编码了 color 值。
为什么改了 body color 按钮文字还是黑的
Bootstrap 5+ 的多数 UI 组件在 CSS 规则里显式写了 color，例如 .btn 的规则包含 color: #fff 或 color: #212529，权重高、位置靠后，body 的设置根本覆盖不到。
- 常见现象：正文变蓝了，但按钮、下拉项、表单标签还是默认色
-
* { color: ... }不能用——会污染第三方库（如 ECharts、Quill）的文本渲染 - 真正要覆盖的组件至少包括：
.btn、.form-control、.form-select、.dropdown-item、.modal-title、.card-title
:root 中重定义 --bs-body-color 变量（推荐）
Bootstrap 5.3+ 提供了 --bs-body-color 这个 CSS 自定义变量，它是全局文本颜色的源头。但必须满足两个条件才能生效：
- 你的自定义 CSS 必须放在
bootstrap.min.css的之后（顺序错就白写） - 必须在
:root下重定义，不能只写body或html
正确写法示例：
:root {
--bs-body-color: #2c3e50;
}
这样之后，所有依赖该变量的组件（如 .alert、.list-group-item）会自动同步更新。但注意：.btn 和 .form-control 等仍需额外补一句：
.btn, .form-control, .form-select {
color: var(--bs-body-color);
}
用 text-* 工具类局部覆盖字体颜色
如果只是想改某几处文字颜色，别动全局变量——用 Bootstrap 内置的 .text-* 类更安全：
-
.text-primary、.text-success等对应主题色，值由--bs-primary-text-emphasis等变量控制 - 自定义颜色可配合 Sass：提前改
$primary-text-emphasis变量再编译，或直接加style="color: #5d8aa8" - 对表格列单独设色，用
cellStyle回调（BootstrapTable 场景）：cellStyle: function(value, row, index) { return { css: { color: value === '已入库' ? '#28a745' : '#6c757d' } }; }
最易被忽略的一点：CSS 变量修改后，务必检查 DevTools → Elements → Computed 面板里 color 的最终计算值，而不是只看 Styles 面板里的声明行——很多组件会从多个变量层层计算，中间任一环节出错都会回退到默认色。
