bootstrap怎么修改默认字体大小和颜色-Bootstrap教程-PHP中文网

最有效的方法是直接修改 body 的 font-size 和 color，因为 bootstrap 的排版类均基于 body 的根级样式计算；但需注意 rfs 响应式逻辑、组件颜色独立性及 sass 变量加载顺序。

bootstrap 的字体大小和颜色不是靠一堆 class 堆出来的，而是由 body 元素的根级 css 属性决定的。所有排版类（.h1、.lead、p）都基于它做相对计算。所以别去一个个覆盖 h1 或 .text-muted —— 先动 body 才是源头。

font-size 默认值因版本而异：Bootstrap 4 是 16px（即 1rem），Bootstrap 5 也是 1rem，但如果你项目里用了自定义 $font-size-base 又没重编译 SCSS，那实际加载的 CSS 仍按 16px 算
color 默认为 #212529（Bootstrap 5）或 #333（旧版），它影响所有未显式设色的文本，包括 p、small、label
必须把自定义样式表放在 Bootstrap CSS 之后，否则会被覆盖；用 !important 是临时补丁，不是解法

单纯设 body { font-size: 18px; } 能生效，但会破坏 Bootstrap 4/5 内置的 RFS（Responsive Font Sizes）逻辑——比如 .display-4 在小屏下该缩放，结果却卡在固定值上。

Bootstrap 5 默认启用 RFS，标题类已含 calc(1.5rem + 0.8vw) 这类表达式；你改了 body 的 font-size，RFS 的基线就变了，但系数不变，小屏字可能意外偏大
如果用 CDN 版本（没走 Sass 编译），$enable-responsive-font-sizes: true 根本不生效，此时手动加媒体查询更可靠：
```
body { font-size: 18px; }<br>@media (max-width: 768px) { body { font-size: 16px; } }
```
旧安卓 WebView（4.4–6.0）对 calc() 支持不稳定，建议降级写法：font-size: 1.5rem; font-size: calc(1.5rem + 0.8vw);

想全局换色？别只改 body color 就完事。Bootstrap 里很多组件（如 .btn、.alert、.form-control）的颜色是独立声明的，不继承 body。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.text-primary 这类工具类颜色来自 $theme-colors 变量，只改 CSS 无效；若用 Sass 编译，得在 @import 前重定义 $primary 和 $theme-colors
.form-label、.input-group-text 默认色是硬编码的 #212529，需单独覆盖：.form-label { color: #495057; }
深色模式下，color 可能被 @media (prefers-color-scheme: dark) 覆盖，检查是否漏了暗色适配

如果你用 Webpack/Vite 引入 Bootstrap 源码，改变量不是写个 $font-size-base: 18px 就完事——顺序错了，变量根本进不了编译流程。

必须严格按顺序：$font-size-base: 18px; → @import "bootstrap/scss/functions"; → @import "bootstrap/scss/variables"; → 其余模块
直接改 node_modules/bootstrap/scss/_variables.scss？升级一更新就全丢，别碰
检查最终生成的 CSS 里有没有你设的值：搜 font-size: 18px，没有就说明 Sass 没读到你的变量文件

改字体大小和颜色看着简单，真正卡住人的永远是「哪一层在起作用」——是 HTML 元素默认样式？Bootstrap reboot？还是某个组件的内联规则？动手前先用浏览器开发者工具点开 computed 样式，看 font-size 和 color 最终从哪来，比猜快十倍。