text-uppercase仅改变渲染效果，不修改DOM原始值；适用于p、span等文本容器，禁用于input/textarea；真正转大写需用JavaScript的toUpperCase()。
text-uppercase 是纯 CSS 渲染，不改 DOM 原始值
直接加 class="text-uppercase" 到 p、span、div 等容器上，浏览器会用 text-transform: uppercase 渲染为大写，但 innerhtml、textcontent、表单 value 仍是原始大小写。
常见误用：
- 给
<input>加text-uppercase→ Bootstrap 官方明确不支持，该类对表单控件无效 - 提交前依赖它做数据标准化 → 后端收到的仍是小写/混合字符串，比如用户输
abc123，页面显示ABC123，但 POST 的 body 里还是abc123 - 处理含连字符或大小写敏感词（如
mcDonald、SKU-123a）→ CSS 的uppercase无逻辑判断，一律转字母部分，结果是MCDONALD、SKU-123A，可能违反业务规则
哪些元素能用 text-uppercase，哪些不能
能用的：语义文本容器，如 p、span、h1–h6、blockquote、small、mark 等。
不能用的：
-
<input>、<textarea></textarea>—— Bootstrap 文档未定义支持，实际也无样式效果 -
<button></button>内文本 —— 可能生效，但行为不稳定（取决于浏览器默认样式覆盖程度） - 自定义 Web Component 或 Shadow DOM 内部文本 —— 需确保
text-transform继承未被重置
验证方法：F12 检查元素，看 computed 样式中是否有 text-transform: uppercase 且未被 !important 覆盖。
需要真正转大写的场景，该用什么
如果目标是「提交前转大写」或「JS 中统一处理」，必须用 JavaScript：
- 表单提交前：
form.addEventListener('submit', e => { e.target.querySelector('[name="code"]').value = e.target.code.value.toUpperCase(); }); - 实时输入转换（谨慎）：
input.addEventListener('input', e => e.target.value = e.target.value.toUpperCase());—— 注意光标跳动、粘贴异常、中文兼容性问题 - API 请求前处理：
fetch('/api', { body: JSON.stringify({ code: data.code.toUpperCase() }) })
注意：String.prototype.toUpperCase() 对带 locale 的字符串（如土耳其语）可能出错，如需国际化安全，用 .toUpperCase('en-US') 显式指定。
和 text-capitalize、text-lowercase 的关键区别
三者都靠 text-transform，但行为边界清晰：
-
text-uppercase：所有英文字母强制大写，数字、符号、空格、换行符完全不动 -
text-lowercase：同理，只动字母，且不区分语言（如德语 ß 不会转成 SS） -
text-capitalize：仅每个单词首字母大写，且按空白符切分 —— 所以hello-world变成Hello-world，不是Hello-World
它们都不触发重排（reflow），只影响重绘（repaint），性能开销极小；但别指望它们替代后端校验或数据清洗逻辑。
