用btn-group包裹en/zh按钮并设aria-pressed状态，同步更新html lang、文案及localstorage，通过data-lang-key批量替换多语言内容，语言按钮需脱离navbar-nav常驻可见。
导航栏里放语言切换按钮，用 btn-group 最稳妥
Bootstrap 默认不提供多语言切换逻辑，但 UI 层面只需一个按钮组（btn-group）包裹两个带语言标识的按钮即可。别用下拉菜单模拟切换——语义不清、可访问性差、移动端点按体验也弱。
常见错误是把 dropdown 当成“语言切换标配”，结果触发后没状态反馈、键盘无法操作、屏幕阅读器读不出当前语言。正确做法是让按钮本身显示当前语言，并用 aria-pressed 标明激活态：
- 用
btn-group包裹两个btn，分别标EN和ZH - 给当前激活语言的按钮加
aria-pressed="true"，另一个为false - 按钮文本不要写 “切换到英文”，只写语言简写（
EN/ZH），简洁且符合 WCAG - 确保两个按钮都绑定
click事件，点击后更新aria-pressed并触发实际语言切换逻辑
切换时要改 html lang 和页面文本，不能只换按钮文字
只改按钮上的 EN → ZH 是假切换。真实多语言必须同步做三件事：更新 、替换所有可翻译文案、持久化用户选择（比如存 localStorage）。
典型遗漏点：
- 忘了改
标签的lang属性，导致屏幕阅读器发音不准、搜索引擎识别错语言 - 文案替换用硬编码字符串拼接，没走 i18n 库（如
i18next或vue-i18n），后续加新语言时得全量改 JS - 没监听
storage事件，导致同域名其他 tab 语言不同步 - 切换后没重置表单控件的
dir属性（如阿拉伯语需dir="rtl"）
用 data-lang 标记文案元素，方便批量替换
不推荐在 JS 里用 querySelectorAll(".nav-link") 然后逐个 textContent = ... —— 维护成本高，容易漏。更可靠的是给所有待翻译节点打上 data-lang-key 属性，配合预定义的语言包对象做映射。
例如：
<nav class="navbar"><a href="#" class="nav-link" data-lang-key="home">Home</a> <a href="#" class="nav-link" data-lang-key="about">About</a> </nav>
切换语言时，遍历所有 [data-lang-key] 元素，查表替换内容。这样新增文案只需加属性，不用动逻辑。
-
data-lang-key值统一小写 + 连字符（如contact-us），避免大小写歧义 - 语言包用纯 JSON（非 JS 对象），方便后端动态注入或 CDN 缓存
- 对
placeholder、title、alt等属性也要做同样处理，不能只刷textContent
移动端导航折叠后，语言按钮容易被隐藏或误触
Bootstrap 的 navbar-collapse 默认把所有内容收进汉堡菜单，包括语言按钮。用户得先点开菜单才能切语言——反直觉。解决方案是把语言按钮提级到 navbar 外层，或用 ms-auto 推到折叠区右侧并保留可见。
- 不要把语言按钮塞进
navbar-nav内部，它不属于导航项 - 用
navbar-text或独立div+ms-auto放在navbar-brand同级，保证始终可见 - 在小屏下给按钮加
px-2 py-1缩小内边距，防止和汉堡图标打架 - 测试真机手势：双指缩放时按钮是否仍可点击，iOS Safari 是否因
touch-action导致延迟响应
setTimeout 就能解决。
