bootstrap 5背景渐变色需组合使用，如bg-gradient-primary，单独bg-gradient无效；共12种内置主题色，不支持自定义颜色名或方向类，须手动写css实现水平/对角渐变。
背景渐变色类名到底怎么写
Bootstrap 5 的背景渐变色不是靠 bg-gradient 单独生效的，必须和具体颜色类组合使用，比如 bg-gradient-primary。单独加 bg-gradient 没效果，因为它是纯 CSS 变量控制的修饰类，不带颜色定义。
-
bg-gradient是基础开关，但没它，颜色类不会触发渐变 - 必须配对用：
bg-gradient-primary、bg-gradient-success、bg-gradient-dark等，共 12 种内置主题色可选 - 不支持自定义颜色名（如
bg-gradient-purple），除非你手动扩展 SCSS 变量 - 渐变方向默认是 top → bottom，没法通过类名切换（比如没有
bg-gradient-horizontal）
为什么加了类却没看到渐变
常见原因是元素没有足够高度或背景被覆盖。Bootstrap 的渐变是用 background-image: linear-gradient(...) 实现的，如果元素本身没内容、没设置 height 或 min-height，或者父容器有 background-color 且层级更高，就会看不见。
- 检查是否设置了
height或min-height，空<div> 默认高度为 0 <li>确认没在同个元素上同时写 <code>bg-primary和bg-gradient-primary——后者会覆盖前者，但前者会“吃掉”渐变的底层色逻辑 - 避免和
bg-opacity混用，透明度会影响渐变视觉表现，有时让过渡显得断层 - 如果用了
!important覆盖样式，可能干掉了 Bootstrap 的background-image - 最简方案：在元素上加内联样式
style="background-image: linear-gradient(90deg, #0d6efd, #6f42c1);" - 若需复用，建议新建 SCSS 类，比如
.bg-gradient-horiz-primary，并在编译时注入变量 - 注意：直接修改
$theme-colors并重编译，才能让bg-gradient-xxx支持新颜色；仅加 CSS 不会新增类名 - 用
background-size或background-position微调渐变起始点时，要确保没被 Bootstrap 的background-image声明覆盖（它的优先级比多数自定义规则高） - v4 中
bg-gradient-light渐变极淡，v5 已删除，避免误导 - v5 的渐变起点色 = 主题色的
color-contrast（比如primary对应#fff），终点色 = 主题色本身，所以bg-gradient-dark是从浅灰到深灰，不是黑→黑 - 不再兼容 IE，所以放心用
linear-gradient，不用 fallback - 如果你项目还在用 v4 的自定义渐变类，升级到 v5 后需要手动迁移，没有自动映射
想换方向或自定义颜色怎么办
Bootstrap 5 不提供现成的水平/对角线渐变类，也不支持直接写 bg-gradient-to-r 这种 Tailwind 风格语法。所有渐变方向和颜色都得自己写 CSS 或改源码。
和旧版 Bootstrap 4 的主要差异
Bootstrap 5 彻底移除了 bg-gradient-white 和 bg-gradient-transparent 这类“伪渐变”类——它们在 v4 里只是加了个无意义的 background-image，实际看不出变化。v5 只保留真正有视觉差的组合。
渐变类本质是快捷方式，不是万能背景方案。真要精细控制，绕不开手写 background-image；而依赖类名时，务必记住它和颜色类是强绑定关系，拆开就失效。
