Bootstrap本身不提供多语言切换功能，需用data-i18n属性+JS加载JSON字典实现文本替换，并配合localStorage持久化偏好；Dropdown需增强无障碍支持；自动检测不可靠，应以用户选择为主。
Bootstrap 本身不提供多语言切换功能，它只是 CSS 框架，负责样式和响应式布局；真正的语言切换必须靠前端逻辑（如 JavaScript）或后端渲染来实现。直接用 Bootstrap 的 dropdown 或 nav-link 做个切换按钮是可行的，但“切换语言”这个动作背后——文本替换、路由处理、持久化用户偏好——全得你手动补上。
怎么用 data-i18n 属性 + 简单 JS 实现静态页面语言切换
适合内容不频繁更新、没后端、纯 HTML 静态部署的企业官网。核心思路：把所有可翻译文本打上 data-i18n 标签，用 JS 加载对应语言的 JSON 字典，批量替换 textContent 或 innerHTML。
- 准备两个 JSON 文件，比如
locales/zh-CN.json和locales/en-US.json，结构统一：{"header_title": "企业首页", "nav_about": "关于我们"} - 在 HTML 元素上标注 key：
<h1 data-i18n="header_title"></h1>、<a data-i18n="nav_about" href="#"></a> - 切换时用
fetch()加载目标语言 JSON，遍历所有[data-i18n]元素，用 key 查字典并赋值；注意避开input的value、placeholder等需特殊处理的属性 - 别忘了存用户选择到
localStorage，页面加载时优先读取，否则每次刷新都回退到默认语言
bootstrap-dropdown 怎么绑定语言切换而不破坏无障碍访问
用 Bootstrap 的 dropdown 做语言选择器很常见，但默认写法容易让屏幕阅读器无法识别当前选中项，也缺乏键盘导航支持。
- 必须给下拉按钮加
aria-expanded，并在 JS 中同步更新：button.setAttribute('aria-expanded', 'true') - 每个语言项用
<button type="button" class="dropdown-item"></button>，不要用<a></a>，避免无意义跳转；同时加role="menuitem"和tabindex="-1" - 用
keydown监听ArrowDown/ArrowUp，手动控制焦点移动；按Enter或Space触发切换，之后把焦点移回主按钮 - 切换完成后，更新按钮文案（如从 “中文” 变成 “English”），并设置
aria-label="当前语言：英语"，方便读屏软件播报
为什么不能只靠 hreflang 或浏览器 Accept-Language 自动切语言
自动检测有明显缺陷，不能替代用户主动选择。
-
Accept-Language头不可靠：很多用户没改过系统语言，或浏览器语言 ≠ 使用语言（比如英文系统里习惯看中文内容） -
hreflang是给搜索引擎看的，告诉爬虫“这个 URL 对应哪种语言”，它不会触发浏览器自动跳转，也不影响前端运行时行为 - 如果真要做自动跳转，必须配合 JS 读取
navigator.language，再window.location.replace()到对应子路径（如/en/），但要加“手动切换入口”且允许用户覆盖，否则会激怒想临时查英文资料的中文用户 - 更稳妥的做法：首次访问时检查
navigator.language，仅用于预设下拉菜单的默认选中项，不自动跳转
最常被忽略的一点：日期、数字、货币格式这些区域设置（locale）和界面翻译是两件事。Bootstrap 不管格式化，toLocaleDateString() 或 Intl.NumberFormat 得你自己配对语言代码使用——比如切到 ja-JP，不仅要换文案，还得确保价格显示为「¥1,234」而不是「$1,234」。
