Bootstrap本身不提供多语言切换功能，需结合i18n方案实现：BootstrapVue+Vue I18n适合Vue 3项目，纯Bootstrap CSS则需手动遍历data-i18n属性更新文本，并同步第三方插件及动态内容的语言。
Bootstrap 本身不提供多语言切换控制面板，它只负责 UI 样式和组件结构。所谓“用 Bootstrap 制作”，实际是用 Bootstrap 的组件（如 <b-dropdown></b-dropdown>、<button></button>、<nav></nav>）搭出界面，再靠外部 i18n 方案驱动语言切换逻辑。
用 BootstrapVue 搭语言选择器（Vue 3 + i18n@9）
这是最省力、最贴合 Bootstrap 风格的方案，所有按钮、下拉、状态反馈都自动继承 BootstrapVue 主题。
- 安装依赖：
npm install bootstrap-vue-3 vue-i18n@9 - 在
main.js中注册 i18n 实例，并传给BootstrapVue3插件的i18n选项 - 语言选择器组件里用
<b-dropdown></b-dropdown>包裹<b-dropdown-item></b-dropdown-item>，每个 item 的value设为语言码（如'zh-CN'、'en-US'） - 监听
@change，调用this.$i18n.locale = newValue即可触发全局更新 - 注意：不要直接用
this.$bvLocale.use()—— 这是旧版 BootstrapVue 2 的 API，Vue 3 下已废弃
纯 Bootstrap CSS + 手动 i18n（无框架绑定）
适合已有静态 HTML 或用原生 JS / Alpine / HTMX 的项目，完全不依赖 Vue/React。
- HTML 里用
<div class="dropdown"> + <code><button class="btn btn-sm"></button>+<div class="dropdown-menu"> 构建选择器 <li>所有待翻译文本必须带 <code>data-i18n属性，例如：<h1 data-i18n="dashboard.title">Dashboard</h1> - 切换语言时，不能只改按钮文字；要遍历
document.querySelectorAll('[data-i18n]')，逐个替换textContent和title/aria-label等属性 - 日期、数字等格式化需额外处理：比如中文用
Intl.DateTimeFormat('zh-CN')，英文用'en-US'，不能只靠字符串替换 - 别漏掉
<input placeholder>、<button aria-label></button>、<svg title></svg>这些隐藏文案 -
bootstrap-datepicker：初始化时必须显式传language: 'zh-CN'；运行时切换需先.datepicker('remove')再重建 -
bootstrap-select：支持初始化时覆盖noneSelectedText等字段，但更稳妥的做法是加载对应语言包（如defaults-zh_CN.js），再调用$.fn.selectpicker.setDefaults() -
bootstrap-multiselect：没有内置多语言机制，所有提示文本都得在includeSelectAllOption、selectAllText等配置项里硬编码传入 - 关键点：这些插件的语言设置和主 i18n 实例是两套系统，必须在语言切换后手动触发它们的重载逻辑
bootstrap-datepicker、selectpicker 等插件的语言同步
这些第三方插件不自动响应主应用语言变更，必须手动干预，否则会出现「菜单是中文、日期框还是英文」的割裂感。
最容易被忽略的是表单验证消息和异步加载内容——比如 AJAX 返回的错误提示、动态插入的 toast 提示、模态框里的富文本，这些不会被 data-i18n 扫描到，必须在业务代码里显式调用翻译函数（如 t('api.error.timeout')）。
