浏览器与设备

支持的浏览器

Bootstrap 支持所有主要浏览器和平台的最新、稳定版本，以及每个引擎的一些旧版本。具体政策请见 我们的.browserslistrc文件：

last 2 major versions
not dead
unreleased versions

Chrome >= 130
Edge >= 130
Firefox >= 132
iOS >= 18.0
Safari >= 18.0

not and_uc > 0
not and_qq > 0
not kaios > 0
not op_mini all

Browserslist 使用 OR（或）连接这些行，而不是 AND（和）。>= 行不会缩小 last 2 major versions。它们会添加每个基准以上的所有版本，这就是设置我们实际最低版本的方式：

基于这些引擎构建的替代浏览器（基于Chromium的浏览器，如Brave、Opera或Vivaldi，以及在iOS上使用WebKit的浏览器）未经过明确测试，但在相同引擎版本下应完全支持。

如何阅读查询列表

其中两行的作用比它们看起来的更大：

• last 2 major versions 承载我们的移动覆盖。 caniuse 将 Chrome for Android 作为一个未标记版本的单独条目跟踪，而不是为每个版本创建一个条目，因此这一行，而不是 >= 层，是负责捕获它的。
• unreleased versions 价值大约八个覆盖点，而且不花一分钱。 caniuse 给最新的 Safari 设置了空的发布日期，但该版本已经占据了 Safari 的大部分使用份额。范围查询和 last N versions 都会跳过未发布的版本，因此如果没有这一行，我们将排除使用最广的 Safari。它无法引入任何旧版本，因为未发布的版本比每个楼层都要新。

要自己测量覆盖率，请在仓库的克隆版本中运行 npx browserslist --coverage。不要从 browserslist.dev 上读取数据：该网站使用的是 caniuse-db 的旧版本，并报告了一个实际不同的数字。

为什么是这些版本？

Bootstrap 的 CSS 是基于现代平台基线编写的：light-dark() 用于 颜色模式，oklch() 和 color-mix() 用于 颜色系统，原生 CSS 嵌套，容器查询，以及 :has()。

我们的基准也必须持久。它们适用于整个 v6.x 系列，而且我们不能在小版本中提高它们，因此它们限制了未来每个 6.x 功能可能使用的内容。因此，我们为每个基准设置了 v6 已经依赖的最新功能，而不是我们能容忍的最旧版本：

light-dark() 设置了最低硬性限制：Chrome 123、Firefox 120 和 Safari 17.5。低于这个版本，我们的构建管道会将 light-dark() 降级为自定义属性的填充，而该填充会破坏 data-bs-theme 的深色模式。在任何版本中我们都不会低于这个限制。

这些目标总共覆盖了约85%的全球浏览器使用情况。

与之前的主要版本不同，Bootstrap 6 不再为低于此标准的浏览器提供回退方案、前缀或 polyfill。在不受支持的浏览器中，页面将无法正确渲染——最明显的是，依赖 light-dark() 的颜色将无法显示。

现代平台功能

下表列出了 v6 所依赖的平台功能，以及每项功能在支持底层及以下的表现。

也可以安全使用

这些布局比当前组件使用的平台更为清晰。以下所有内容在任何 6.x 版本中都不需要回退、供应商前缀或填充，所以在基于 Bootstrap 构建或对其贡献时，优先使用它们：

• 原生 CSS 嵌套，因此编译输出可以保持嵌套
• @layer，我们的图层顺序依赖于此
• :focus-visible 用于仅键盘聚焦样式
• 容器查询单位和 subgrid
• content-visibility、transition-behavior: allow-discrete 和 @starting-style，它们一起使 <details> 和 <dialog> 打开和关闭的动画效果
• 无前缀 backdrop-filter
• text-wrap: balance
• 媒体查询中的范围语法，例如 @media (width >= 1024px)

尚未提供

这些功能位于我们的底层之上，因此 v6 在没有回退方案的情况下无法使用它们。几乎在所有情况下，Firefox 都是阻碍因素，这意味着仅靠 Chrome 的支持无法告诉你我们是否可以发布某些功能。

相对颜色语法是最接近的，但略高于我们的 Chrome 下限。锚点定位是最值得等待的功能：它将允许菜单、提示、弹出框和组合框放弃它们的 Floating UI 依赖。在你确认某个功能已到位之前，请使用 npx browserslist 重新检查这些功能。

JavaScript

Bootstrap 的 JavaScript 仅以 原生 ES 模块 的形式提供。使用 <script type="module"> 加载它——经典的 <script src> 而没有 type="module" 是无法执行它的，并且没有全局的 window.bootstrap 对象。有关加载方式，请参阅 JavaScript 入门指南，其中包括捆绑依赖项的导入映射。

所有符合上述 CSS 支持标准的浏览器都完全支持 ES 模块、import/export 语法以及 Bootstrap 插件使用的 DOM API——无需也不会提供转译或填充。

移动设备

一般来说，Bootstrap 支持各大平台默认浏览器的最新版本。请注意，不支持代理浏览器（例如 Opera Mini、Opera Mobile 的 Turbo 模式、UC Browser Mini、Amazon Silk）。我们也排除了 UC Browser、QQ Browser 和 KaiOS。它们的用户总量不足 1%，包括它们只会在我们的 CSS 中添加供应商前缀：UC 和 QQ 为 -webkit-mask-*，KaiOS 为 -moz-column-gap。此外，KaiOS 还 破坏了我们的浮动标签。

与 v5 一样，请确保在你的 <head> 中包含响应式视口元标签，以便在移动设备上正确呈现：

          <meta name="viewport" content="width=device-width, initial-scale=1">