用途:在用户项目中添加并配置 Bootstrap 6,支持两种安装路径——CDN(无需构建步骤,适合静态页面、演示和原型)与包管理器 npm(用于自定义 Sass 令牌或对 JS 做 tree-shaking,需要 Node.js 和 Sass 编译器)。
主要能力:按五步工作流执行——选择安装路径、安装 Bootstrap 及依赖、引入 CSS、引入 JavaScript、验证。Bootstrap 6 有两个可选 peer 依赖:@floating-ui/dom(菜单、弹出框、工具提示的定位)与 vanilla-calendar-pro(日期选择器),不使用可省略。
使用方式:CDN 路径在 head 中引入 CSS,在 body 结束前引入 JS bundle(bundle 已含 Floating UI 与 Vanilla Calendar Pro);需从安装文档复制准确的 URL 与 SRI 哈希,不要猜测哈希,crossorigin="anonymous" 为 SRI 生效所必需。若想单独加载两个依赖以减小体积,可用 import map 配合非 bundle 的 JS。npm 路径执行 npm install bootstrap@6.0.0-alpha.1 @floating-ui/dom vanilla-calendar-pro,并安装构建工具(如 sass、autoprefixer、postcss、postcss-cli);Bootstrap 6 需要 Dart Sass 与 PostCSS/Autoprefixer,不支持 Node Sass。CSS 使用 @use 规则导入(不可用 @import),可通过 with () 语法覆盖令牌,令牌名在 Sass 中不带前缀,自行编译源码时保持无前缀。JS 为 ESM-only,可整体导入或按需导入单个插件。
验证:加载页面确认示例按钮与容器已应用样式,触发一个 JS 组件确认无控制台错误;CDN 需确认哈希与版本匹配;Sass 编译失败时检查是否使用 @use 并传入 --load-path=node_modules。
限制:Bootstrap 6 需要支持 oklch() 与 color-mix() 的浏览器。完整打包器专属配置请改用 bootstrap-npm、bootstrap-vite、bootstrap-webpack 或 bootstrap-parcel 技能。