Bootstrap官方不支持text-sm-primary等响应式主题色类，也不提供响应式文本透明度类；仅text-body、text-muted等语义灰度类支持断点前缀，text-opacity-需搭配text-使用且本身不响应式，实现响应式文字颜色与透明度需手动结合媒体查询与自定义CSS。
Bootstrap 官方不支持 text-sm-primary 这类“响应式主题色类”，也**不提供响应式文本透明度类**（如 text-sm-opacity-50）。所谓“小屏文字半透、大屏不透”，不能靠组合类名一步到位，必须拆解目标：颜色切换 + 透明度控制 + 响应式触发，三者得分开处理。
text-{breakpoint}-{color} 类根本不存在于主题色体系
很多人写 text-sm-primary 是想复刻 text-sm-body 的逻辑，但这是误解。Bootstrap 只对语义灰度类（text-body、text-muted、text-body-secondary）启用断点前缀；text-primary 等主题色类在 Sass 编译时**完全不参与响应式生成**。浏览器开发者工具里查不到对应 CSS 规则，写了等于白写。
常见错误现象：text-md-success 在页面上毫无反应，检查元素样式发现该 class 根本未被解析。
- 真正可用的响应式文本类只有：
text-sm-body、text-md-muted、text-lg-body-secondary等 - 它们只控制颜色语义（body/muted），不带透明度
- 想让
text-primary在 sm 屏变色？只能手动加媒体查询或 JS 切换 class
text-opacity-* 类支持响应式，但必须搭配 text-* 使用
text-opacity-* 是 Bootstrap 5.3+ 新增的工具类（支持 10/25/50/75/100），但它**本身不响应式**——没有 text-sm-opacity-50 这种写法。它只作用于当前元素的文字透明度，且必须和 text-* 颜色类共存，否则文字会回退到默认黑色。
例如：text-primary text-opacity-50 → 蓝色文字半透；但 text-opacity-50 单独用 → 文字变黑半透，不是你想要的效果。
- 错误写法：
text-opacity-50（没配颜色类，颜色失控） - 正确写法：
text-dark text-opacity-25或text-white text-opacity-75 - 想响应式控制透明度？只能自己写媒体查询：
@media (max-width: 576px) { .my-text { --bs-text-opacity: .3; } }
实现“小屏蓝色半透、大屏绿色不透”的真实路径
这不是一个 class 能解决的问题，而是三个独立动作的组合：颜色切换 + 透明度切换 + 断点控制。官方工具类只覆盖其中一环，剩下两环得手写。
- 用
text-primary和text-success分别定义大小屏颜色 - 用
text-opacity-50和text-opacity-100控制透明度 - 用媒体查询包裹：在
max-width: 576px下同时应用text-primary text-opacity-50，其余情况用text-success text-opacity-100 - 更简洁的做法：直接用内联 style 或自定义 class，比如
class="text-responsive-blue-green"，CSS 里写完整断点规则
示例片段：
@media (max-width: 576px) {
.text-responsive-blue-green {
color: #0d6efd;
opacity: .5;
}
}
@media (min-width: 577px) {
.text-responsive-blue-green {
color: #198754;
opacity: 1;
}
}别碰 opacity-* 类来调文字透明度
opacity-50 是作用于整个元素的 CSS opacity 属性，它会让文字、图标、子容器全部变淡。如果你只想文字半透、背景和按钮保持清晰，用 opacity-* 就错了。
-
opacity-50→ 整个 div 变半透，包括里面所有内容 -
text-opacity-50→ 仅文字变半透，背景、边框、子元素不受影响 - 注意：
text-opacity-*依赖 CSS 自定义属性--bs-text-opacity，若父级设了opacity，它会被继承并叠加，导致意外过透
最易忽略的点：text-opacity-* 在深色背景上可能对比度不足，触发可访问性警告。实际项目中，建议搭配 color-contrast() 函数或手动校验 WCAG AA 标准，而不是只看视觉效果。
