项目中的 Bootstrap 文件全部是 Bootstrap 5.3.8。它们并不是不同版本，而是同一版本针对不同场景生成的发行文件。

目前页面普遍使用的是：

<link rel="stylesheet" href="https://flashdragons.github.io/css/bootstrap.min.css">
<script src="https://flashdragons.github.io/js/bootstrap.bundle.min.js"></script>

这是最常见、也最适合当前项目的组合：完整压缩 CSS + 包含 Popper 的完整压缩 JS。

CSS 文件区别

文件	包含内容	适用场景
bootstrap.css	Bootstrap 全部样式	开发、调试、阅读源码
bootstrap.min.css	与上面功能相同，但已压缩	正式网站，当前项目正在使用
bootstrap-grid.css	只包含布局系统和部分布局工具	只想使用 Bootstrap 栅格布局
bootstrap-reboot.css	只包含浏览器默认样式重置	统一不同浏览器的基础显示
bootstrap-utilities.css	只包含工具类	只想使用间距、颜色、显示等快捷类
*.rtl.css	对应文件的从右向左版本	阿拉伯语、希伯来语等 RTL 页面
*.min.css	对应文件的压缩版本	正式部署，加载体积更小

bootstrap.css / bootstrap.min.css 有哪些样式

这是完整版本，大致包括：

• 基础样式

  字体、标题、段落、链接、图片、表格、代码块、引用等。

• 布局系统

  container、row、col-*、响应式断点、gutters。

• 表单

  form-control、form-select、checkbox、radio、input group、浮动标签和表单验证。

• 常用组件

  btn、card、navbar、nav、breadcrumb、pagination、badge、alert、list-group、accordion 等。

• JavaScript 组件所需外观

  Modal、Dropdown、Collapse、Carousel、Tooltip、Popover、Toast、Offcanvas 等组件的视觉样式和动画。

• 工具类

  • 间距：m-*、p-*、mx-auto
  • 布局：d-flex、d-none、position-*
  • Flex：justify-content-*、align-items-*
  • 尺寸：w-*、h-*
  • 文字：text-center、fw-bold、text-primary
  • 背景：bg-primary、bg-dark
  • 边框：border、rounded
  • 阴影：shadow
  • 可见性、透明度、溢出、响应式显示等

完整 CSS 已经包含 Reboot、Grid、Utilities 和组件样式，因此不要再同时加载另外三个子集，否则只是重复。

bootstrap-grid.css

主要提供：

<div class="container">
  <div class="row">
    <div class="col-md-6">左边</div>
    <div class="col-md-6">右边</div>
  </div>
</div>

包含：

• container、container-fluid
• row
• col、col-1 到 col-12
• col-sm-*、col-md-*、col-lg-* 等响应式列
• offset-*
• g-*、gx-*、gy-* 间距
• 部分 Flex 和显示工具类

它没有按钮、表单、导航栏、卡片等完整组件样式。

bootstrap-reboot.css

它主要处理浏览器默认样式差异，例如：

• 使用统一的 box-sizing
• 设置基础字体、行高和背景色
• 规范标题、段落和列表边距
• 统一表单控件字体
• 改善图片、表格和链接的默认显示

它基本不提供 .btn、.row 这类可以直接套用的组件类。

bootstrap-utilities.css

主要是原子化工具类，例如：

<div class="d-flex justify-content-center mt-3 p-2 bg-dark text-white">

它包含间距、颜色、Flex、Grid Display、定位、尺寸、边框、阴影、文字对齐等工具，但没有完整的 .card、.navbar、.modal 组件样式。

RTL 文件

例如：

• bootstrap.rtl.css
• bootstrap-grid.rtl.css
• bootstrap-utilities.rtl.css

RTL 是 Right-to-Left，从右向左排版版本，会转换左右相关规则，例如：

• 左边距和右边距
• 浮动方向
• 文本方向
• Dropdown 对齐
• 表单和导航布局

项目目前有简体中文、繁体中文和英文页面，这些语言都使用从左向右排版，所以应继续使用普通文件，不需要 RTL 文件。

JavaScript 文件区别

文件	模块格式	是否包含 Popper	用途
bootstrap.js	普通浏览器脚本/UMD	否	开发调试
bootstrap.min.js	普通浏览器脚本/UMD	否	正式环境，但要单独提供 Popper
bootstrap.bundle.js	普通浏览器脚本/UMD	是	开发调试，最省事
bootstrap.bundle.min.js	普通浏览器脚本/UMD	是	正式环境，当前项目使用
bootstrap.esm.js	ES Module	否	使用 Vite、Webpack 或 <script type="module">
bootstrap.esm.min.js	压缩 ES Module	否	模块化正式环境

Bootstrap JS 提供的功能

这些文件包含相同的 Bootstrap 交互组件：

• Alert：关闭提示框
• Button：按钮状态
• Carousel：轮播图
• Collapse：折叠和展开
• Dropdown：下拉菜单
• Modal：模态对话框
• Offcanvas：侧边抽屉
• Popover：弹出提示框
• ScrollSpy：根据滚动位置更新导航
• Tab：标签页切换
• Toast：轻量通知
• Tooltip：悬浮提示

例如：

<button
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal">
  打开窗口
</button>

这里：

• btn btn-primary 的外观来自 CSS。
• data-bs-toggle="modal" 的点击和弹窗行为来自 JS。

Bundle 与非 Bundle 的关键差异

Dropdown、Tooltip 和 Popover 需要 Popper 计算弹出位置。

使用：

<script src="js/bootstrap.bundle.min.js"></script>

不需要另外加载 Popper，因为 Bundle 已包含它。

使用：

<script src="js/bootstrap.min.js"></script>

则需要先单独引入 @popperjs/core，否则 Dropdown、Tooltip、Popover 可能不能正确定位。

ESM 文件

bootstrap.esm.js 适合模块化项目：

<script type="module">
  import { Modal } from "./js/bootstrap.esm.js";

  const modal = new Modal(document.querySelector("#exampleModal"));
  modal.show();
</script>

不过这个 ESM 文件仍会导入 @popperjs/core。直接放在普通静态页面中时，浏览器通常无法解析这个包名，需要 import map、打包工具或修改依赖路径。因此当前项目没有必要改用它。

.min 与非 .min

两者功能完全相同。

• 非压缩文件：变量名、缩进、注释完整，方便阅读和调试。
• .min 文件：删除空格并压缩代码，体积更小，适合线上页面。

例如当前文件大小：

• bootstrap.css：约 280 KB
• bootstrap.min.css：约 232 KB
• bootstrap.bundle.js：约 208 KB
• bootstrap.bundle.min.js：约 80 KB

对当前项目的建议

继续统一使用：

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.bundle.min.js"></script>

对应文件：

• bootstrap.min.css
• bootstrap.bundle.min.js

只有在特定情况下才换用其他文件：

• 需要阅读或调试 Bootstrap 源码：改用非 .min 文件。
• 页面只需要栅格：使用 bootstrap-grid.min.css。
• 页面只需要工具类：使用 bootstrap-utilities.min.css。
• 制作阿拉伯语等从右向左页面：使用 RTL 版本。
• 使用现代模块打包系统：考虑 ESM 版本。

另外，项目里的 test/ai/cloud_music_box.html 等文件包含 Bootstrap 5.3.0 的 CDN 地址，但这些似乎是展示在页面里的代码文本；项目实际静态资源是 5.3.8。为了避免兼容性差异，实际运行页面最好始终统一到 5.3.8。