Bootstrap5变量配置：自定义主题色与组件样式

本文介绍Bootstrap5通过SCSS变量配置快速自定义主题的方法，适合初学者。因CDN版本难改变量，推荐安装Bootstrap SCSS源码。 准备工作：安装Bootstrap（`npm install bootstrap`），创建`scss/custom.scss`文件。 核心步骤：1. 修改主题色：导入Bootstrap的`functions`和`variables`后，自定义`$primary`等变量（如主色设为紫色`#6c5ce7`），依赖变量的组件会自动更新，还可扩展新主题色（如`$warning`）。2. 自定义组件样式：通过变量调整按钮内边距（`$btn-padding-y`）、卡片圆角（`$card-border-radius`）、导航栏背景色（`$navbar-bg`）等。 编译：用`sass`工具编译`custom.scss`到CSS，引入到HTML。 注意事项：变量需在导入后修改以覆盖默认值，保持单位一致，可借助Coolors生成协调颜色。 总结：通过变量配置，高效实现主题色和组件样式定制，快速打造个性化页面。