bootstrap 原生不支持断点响应式渐变类，所有 bg-gradient-* 类全局生效；需用 @media 手动覆盖 background-image 实现“小屏纯色、中屏起渐变”，并注意兼容性、可访问性及深色模式适配。
Bootstrap 原生不支持 bg-gradient-sm 或 md:bg-gradient-primary 这类断点响应式渐变类——所有 bg-gradient-* 工具类在 Bootstrap 5.3+ 中都是全局生效的，写上去就一直存在，不会随屏幕尺寸开关。
为什么 bg-gradient-primary d-md-block 不等于“只在中屏用渐变”
它只是让元素在中屏显示、小屏隐藏，不是控制渐变本身。小屏时整个区块没了，不是渐变被关掉；而且 bg-gradient-primary 仍会尝试注入 background-image，但因为元素不可见，你根本看不到效果。真正要的是“渐变样式条件性启用”，不是“容器条件性出现”。
-
d-none d-md-block控制display，和背景逻辑无关 -
md:bg-gradient-primary是 Tailwind 写法，Bootstrap CSS 完全不识别，规则压根不会生成 - 单独用
bg-gradient-primary无效：它只是“开关”，必须搭配bg-primary等颜色类才触发渐变 - 若项目 SCSS 中设了
$enable-gradients: false，所有渐变类静默失效，控制台无提示
用 @media 手动覆盖 background-image 最可靠
这是唯一能精确控制“小屏纯色、中屏起渐变”的方式。关键不是删掉类，而是用层叠覆盖掉渐变行为。
- 先写基础态（小屏）：
background-color: #f8f9fa，确保降级可用 - 再用
@media (min-width: 768px)（严格匹配 Bootstrap 的md断点）覆盖background-image - 必须用
background-image，不是background—— 后者会清掉已有的background-color或纹理 - 方向优先写
135deg，比to right兼容性更稳，旧版 Safari 对缩写支持差 - 颜色至少两个，否则仍是纯色；移动端 Safari 更认
50% #000而非50%, #000
/* 示例：仅 md+ 启用蓝紫渐变 */<br>.hero {<br> background-color: #fff;<br>}<br>@media (min-width: 768px) {<br> .hero {<br> background-image: linear-gradient(135deg, #0d6efd, #6f42c1);<br> }<br>}
自定义带断点前缀的类（适合多处复用）
如果多个容器都要“仅 md+ 渐变”，可以定义 bg-md-gradient-primary 这类名字，避免重复写媒体查询。
- 在 SCSS 中用
@include media-breakpoint-up(md)包裹，引用$primary和$secondary变量，避免硬编码 - 必须加
!important—— Bootstrap 的bg-light等类自带!important，你的规则权重不够会失效 - 使用时注意顺序：
class="bg-md-gradient-primary bg-light"，自定义类在前，保底色类在后 - 别漏掉
background-color回退逻辑，否则小屏可能完全透明或透出底层内容
容易被忽略的兼容性和可访问性细节
渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读；子元素如 .card 默认白色背景会完全盖住容器渐变；深色模式下不重写渐变色，用户切主题后仍看到亮色渐变。
- 同步调文字色：
text-white配深渐变，text-dark配浅渐变 - 子元素背景改用
background-color: rgba(255,255,255,0.9)，留出透出空间 - 深色模式需额外加
@media (prefers-color-scheme: dark)单独适配渐变色值 - 方向值写
135deg比to bottom right更稳妥，旧版 Safari 不认缩写
