Bootstrap 5 的 bg-gradient 类不响应断点，需用 @media 直接控制 background-image；自定义断点渐变类须加 !important 覆盖 Bootstrap 高权重；background-image 不支持 transition，只能通过 opacity 或 JS 切换实现动画。
bg-gradient类本身不响应断点，别指望加md:前缀
Bootstrap 5 的 bg-gradient 和 bg-gradient-primary 是纯静态工具类，没有媒体查询包裹。写 md:bg-gradient-primary 完全无效——这是 Tailwind 的语法，Bootstrap 不识别。你加了 d-md-none 或 bg-gradient-primary，只会让元素消失或全局生效，不是“渐变在中屏才启用”。
@media 写 background-image 才是唯一可靠方案
真正控制断点渐变，必须用 CSS 媒体查询直接操作 background-image。关键点不是“怎么开渐变”，而是“怎么让它只在某断点存在”：
- 基础态（小屏）先写默认背景，比如
background-color: #f8f9fa - 再用
@media (min-width: 768px)（对应 Bootstrap 的md断点）覆盖background-image - 务必用
background-image: linear-gradient(...)，不是background: linear-gradient(...)—— 后者会清掉已有background-color或图片纹理 - 方向优先写角度（如
135deg），比to right兼容性更稳；旧版 Safari 对to-r或left to right支持差
自定义带断点前缀的渐变类（适合多处复用）
如果多个组件都要在 md 断点启用相同渐变，可定义 bg-md-gradient-primary 这类类名，避免重复写媒体查询：
@include media-breakpoint-up(md) {
.bg-md-gradient-primary {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1) !important;
}
}
使用时注意顺序：<div class="bg-md-gradient-primary bg-light"> —— 自定义类在前，bg-light 在后，确保小屏回退到纯色背景。加 !important 是必要的，因为 Bootstrap 的 bg-light 等类自带高权重，不加容易被覆盖。
过渡动画不能靠 CSS transition 直接作用于 background-image
浏览器不支持对 background-image 做平滑过渡，所以“渐变出现时淡入/滑入”这类效果无法用 transition: background-image 实现。可行路径只有两个：
- 用
opacity控制整个容器显隐：给容器加opacity: 0→opacity: 1，配合transition: opacity 0.3s - 用 JS 动态切换类 +
getComputedStyle检测断点宽度，在 resize 时节流触发类增删，再靠 CSS 类内定义transition: background-color做 fallback 色块过渡 - 别试图用
background-image: linear-gradient(...)+transition: all—— 它不会动，只会突变
真正麻烦的不是写法，而是渐变方向、色标位置和文字对比度三者耦合极深：改一个参数，text-white 可能立刻不可读，得手动调、反复测，没法靠工具一键解决。
