bootstrap 不支持 text-sm-primary 等响应式主题色类，仅对 text-body、text-muted 等灰度语义类启用断点前缀；text-opacity- 是唯一正经文字透明度工具，需搭配 text- 颜色类使用；字体粗细与大小无响应式组合类，实现“小屏蓝、大屏绿”须手动编写媒体查询。
text-sm-primary 类根本不存在，别白费力气写
Bootstrap 官方不生成 text-sm-primary 这类响应式主题色类。你写上去，浏览器开发者工具里查不到对应 CSS 规则，也不会生效。原因很实在：Sass 编译时只对语义灰度类（比如 text-body、text-muted）启用断点前缀支持；text-primary 这类主题色类压根不在响应式生成列表里。
官方文档明确列出的响应式文本类只有：text-sm-body、text-md-muted、text-lg-body-secondary 等——全是基于 body/muted 这类灰度语义词的组合。想靠 class 名“拼出来”小屏蓝、大屏绿？行不通。
text-opacity-* 是唯一正经的文字透明度工具类
Bootstrap 5.3+ 只保留 opacity-0 和 opacity-100，中间值如 opacity-50 已被移除。但文字透明度另有专用车道：text-opacity- 系列。
-
text-opacity-10、text-opacity-25、text-opacity-50、text-opacity-75、text-opacity-100全都可用 - 必须搭配
text-颜色类一起用，比如text-primary text-opacity-50—— 单独写text-opacity-50没效果，颜色会被重置为默认黑色 - 它只影响文字本身，背景、图标、子元素完全不受影响，这才是你要的“文字半透”
字体大小和样式得靠 display/h-* + font-weight 组合
Bootstrap 不提供类似 text-sm-bold 这种“响应式加粗”类。字体大小和粗细是两套独立系统：
- 标题层级用
h1～h6或.h1～.h6；超大号用.display-1～.display-6 - 加粗靠
fw-bold、fw-bolder、fw-normal；斜体用fst-italic - 响应式字体大小？没有现成类。要么用 CSS 自定义媒体查询，要么借助
clamp()（如font-size: clamp(1rem, 2.5vw, 1.5rem)），Bootstrap 本身不封装这个逻辑
真要实现“小屏文字蓝、大屏文字绿”，只能手动写 media query
这是最常被低估的一步。别指望类名拼凑，老老实实写 CSS：
@media (max-width: 575.98px) {
.responsive-text {
color: #0d6efd; /* primary */
}
}
@media (min-width: 576px) {
.responsive-text {
color: #198754; /* success */
}
}
注意两点：一是 breakpoint 值必须和 Bootstrap 的 $grid-breakpoints 一致（比如 sm: 576px）；二是别忘了同时配 text-opacity-——它不响应式，得在每个 media query 里单独写。
最后提醒一句：text-opacity- 的 alpha 值是乘算关系，不是叠加。比如 text-primary text-opacity-50 实际渲染的透明度 = 主题色本身的 alpha × 0.5，这点容易被忽略。
