# [Bootstrap 6.0] 安装 URL: https://bs.88fc.cn/docs/6.0/getting-started/install/ 安装 使用包管理器，即可把 Bootstrap 的 源文件 引入几乎任何项目。通过包管理器安装的内容不包含文档和完整的构建脚本。你也可以 使用示例仓库中的任何演示 来快速启动 Bootstrap 项目。 npm pnpm Yarn Bun npm install bootstrap pnpm add bootstrap yarn add bootstrap bun add bootstrap 安装完成后，请参阅 npm 指南 获取完整安装说明。 使用 Bootstrap npm 起始项目！ 前往 Sass & JS 示例 模板仓库，了解如何在自己的 npm 项目中构建和自定义 Bootstrap。其中包含 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap 图标。 使用 npm 使用 import * as bootstrap from 'bootstrap' 会把 Bootstrap 的所有插件加载到 bootstrap 对象上。你也可以单独导入插件，以便自动 tree shaking： JavaScript import { Tooltip , Toast , Popover } from 'bootstrap' 也可以直接加载包顶层目录下的 /js/dist/*.js 文件来导入插件。 Bootstrap 的 package.json 在以下键中提供了一些额外元数据： sass - Bootstrap 主 Sass 源文件的路径 style - 使用默认设置（未自定义）编译的 Bootstrap 非压缩 CSS 的路径 此外，Bootstrap 在包根目录附带一个 .browserslistrc 文件，为 Browserslist 和 Autoprefixer 等工具定义浏览器目标。完整支持策略请参阅 浏览器与设备 。 使用 Yarn Yarn 2+（也称 Yarn Berry）默认不支持 node_modules 目录，因此我们的 Sass & JS 示例 需要做一些调整： Shell yarn config set nodeLinker node-modules # Use the node_modules linker touch yarn.lock # Create an empty yarn.lock file yarn install # Install the dependencies yarn start # Start the project 更多安装方式 Bootstrap 还提供由其他包管理器管理的安装方式。 RubyGems Composer NuGet gem 'bootstrap', '~> 6.0.0-alpha.1' composer require twbs/bootstrap:6.0.0-alpha.1 Install-Package bootstrap # Default Install-Package bootstrap.sass # Sass version 使用 RubyGems 建议在 Ruby 应用中使用 Bundler 安装 Bootstrap，但也可以使用 RubyGems 。更多细节请参阅 该 gem 的 README 。 Shell gem install bootstrap -v 6.0.0-alpha.1 使用 NuGet 如果你使用 .NET Framework 开发，也可以通过 NuGet 安装和管理 Bootstrap 的 CSS 或 Sass 以及 JavaScript。较新的项目应使用 libman 或其他方式，因为 NuGet 面向编译后的代码，而不是前端资源。 CDN 通过 CDN 引入 Bootstrap 的 CSS 和 JavaScript 文件。CDN（内容分发网络）是为网站提供库副本的服务。与通过包管理器安装不同，你只需在网站中链接 CDN 托管的文件。 以下是我们用于 CSS 和 JavaScript 的主要 CDN 链接： HTML < link href = "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin = "anonymous" > < script type = "module" src = "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity = "sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin = "anonymous" > 如果你更愿意单独引入 Floating UI 和 Vanilla Calendar Pro，而不是使用捆绑包，请使用 import map 解析裸模块标识符： HTML < script type = "importmap" > { "imports": { "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/dist/floating-ui.dom.esm.min.js", "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.4.0/index.mjs" } } < script type = "module" src = "https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.min.js" integrity = "sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin = "anonymous" > 文件类型 网址 CSS https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css JS 包（含 Floating UI 和 Vanilla Calendar Pro） https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js 使用 CDN 你也可以使用 CDN 获取我们的其他构建版本。 使用 CDN 链接时，请务必通过 integrity 属性校验文件与版本是否正确。这些哈希值对每个 Bootstrap 文件和版本都是唯一的，因此升级版本时也要同步更新 integrity 属性。 我们还提供了 crossorigin="anonymous" 属性，以避免 CORS 错误。 其他 CDN 我们推荐 jsDelivr ，并在自己的文档中使用它。不过在某些情况下——例如特定国家或环境——你可能需要使用 cdnjs 或 unpkg 等其他 CDN 提供商。 在这些 CDN 提供商上可以找到相同的文件，只是 URL 不同。使用 cdnjs 时，你可以通过 这个 Bootstrap 包直达链接 ，复制粘贴任意版本 Bootstrap 各 dist 文件的现成 HTML 片段。 安全警告 —— 如果某个文件的 SRI 哈希值不一致，就不应使用该 CDN 上的文件，因为这意味着文件已被他人修改。 注意应比较长度相同的哈希值，例如 sha384 与 sha384 ，否则它们不同是正常的。你可以使用 SRI Hash Generator 之类的在线工具确认给定文件的哈希值是否一致。或者，在已安装 OpenSSL 的前提下，也可以通过命令行完成同样的校验，例如： Shell openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A 下载 你也可以采用传统方式手动下载 Bootstrap。可以在编译好的 dist（分发）文件和源文件之间选择。后者需要一些额外工具才能编译并在项目中使用 Bootstrap。 类型 描述 链接 分发文件 可直接使用的已编译并压缩的 CSS 和 JavaScript 文件。不包含文档、源文件，也不包含 Floating UI 和 Vanilla Calendar Pro 等依赖。 下载 源文件 用于通过自己的资源管线编译的 Sass、JavaScript 和文档文件。需要 Sass 编译器 、 Autoprefixer ，以及 Rollup 或 Webpack 等 JavaScript 打包工具。 下载 如果你需要完整的 构建工具 ，它们随 Bootstrap 及其文档的开发一起提供，但可能不适合你自己的用途。 面向 AI 工具与大语言模型 Bootstrap 文档提供机器可读格式，我们还为 AI 编程工具提供了AI 编程助手技能。请参阅 AI ，了解我们的 llms.txt 文件和完整技能列表。 --- # [Bootstrap 6.0] AI 辅助开发 URL: https://bs.88fc.cn/docs/6.0/getting-started/ai/ Bootstrap 提供为大语言模型和 AI 驱动的编码工具构建的资源：可以输入到 LLM 的机器可读文档，以及一套逐步引导代理完成常见 Bootstrap 任务的AI 编程助手技能。 适用于大语言模型的文档 我们的文档提供机器可读格式，遵循 llms.txt 规范。 文件 描述 链接 llms.txt 每个文档页面的精心编制索引，附带链接和描述。 https://bs.88fc.cn/llms.txt llms-full.txt 将文档全文合并为单个文件，以便直接导入。 https://bs.88fc.cn/llms-full.txt 技能 将每个 Bootstrap 技能安装到你的编程助手中： 壳 npx skills add twbs/bootstrap Skills CLI 会将我们仓库中的每个 SKILL.md 复制到你的代理中。 skills.sh 会在有人运行该命令后列出该包。没有提交表单。 Bootstrap 也提供相同的内容 AI 编程助手技能 在 skills/ 我们仓库的目录。每个技能都是针对一个 Bootstrap 任务的专注逐步操作指南，从迁移项目或设置新构建到创建组件和自定义我们的色彩系统。 要在不使用 CLI 的情况下使用，只需将你的代理指向相关的 SKILL.md 文件并描述你想要做的事情。技能的 description 字段告诉代理什么时候适用，其步骤可使代理与我们的官方指南保持一致。始终将代理的更改与相应的文档进行对照审查。 技能 描述 指南 bootstrap-v4-v6-migration 将项目从 Bootstrap 4 迁移到 Bootstrap 6。在从 Bootstrap 4 升级、跨越两个主要版本，或在 v4 到 v5 以及 v5 到 v6 的步骤中更新 v4 类名、数据属性、表单和 JavaScript 时使用。 迁移 bootstrap-v5-v6-migration 将项目从 Bootstrap 5 迁移到 Bootstrap 6。适用于从 Bootstrap 5 升级、将 v5 迁移到 v6，或将 v5 的类名、组件、Sass 或 JavaScript 更新到最新版本。对于 Bootstrap 4 项目，请先使用 v4 到 v6 的迁移技能。 迁移 bootstrap-v6-install 将 Bootstrap 6 添加到项目中并设置本地开发环境。用于安装 Bootstrap、将 Bootstrap 添加到新项目或现有项目，或通过 CDN 或包管理器设置 Bootstrap 的 CSS 和 JavaScript 时使用。 安装 Bootstrap bootstrap-npm 使用仅 npm 和命令行工具（无打包器）构建一个 Bootstrap 6 入门项目。在使用 npm 设置 Bootstrap、从命令行将 Bootstrap 的 Sass 编译为 CSS 或创建基于 npm 的 Bootstrap 项目时使用。 Bootstrap 和 npm bootstrap-webpack 在使用 Webpack 的项目中包含并打包 Bootstrap 6 的 CSS 和 JavaScript。在使用 Webpack 设置 Bootstrap、为 Bootstrap 的 Sass 和 JS 配置 Webpack 加载器或创建基于 Webpack 的 Bootstrap 项目时使用。 Bootstrap 和 Webpack bootstrap-parcel 在项目中使用 Parcel 包含并捆绑 Bootstrap 6 的 CSS 和 JavaScript。在使用 Parcel 设置 Bootstrap、通过 Parcel 捆绑 Bootstrap 的 Sass 和 JS 或创建基于 Parcel 的 Bootstrap 项目时使用。 Bootstrap 和 Parcel bootstrap-vite 在使用 Vite 的项目中包含并打包 Bootstrap 6 的 CSS 和 JavaScript。在通过 Vite 设置 Bootstrap、通过 Vite 打包 Bootstrap 的 Sass 和 JS，或创建基于 Vite 的 Bootstrap 项目时使用。 Bootstrap 和 Vite bootstrap-component 构建 Bootstrap 6 组件的 CSS 和标记。在创建新组件、添加修饰符或变体类，或使用 Bootstrap 的 Sass 令牌映射和主题覆盖编写组件样式时使用。 组件 bootstrap-component-js 向 Bootstrap 6 组件添加 JavaScript 行为。在编写组件的 TypeScript 源代码时使用，扩展 BaseComponent，连接数据 API，添加事件或配置选项，或集成 Floating UI 或第三方库。 JavaScript bootstrap-color-system 在 Sass 和 CSS 中使用 Bootstrap 6 的颜色系统。用于自定义颜色、添加或覆盖主题颜色、使用颜色模式，或使用颜色刻度、语义标记和主题类。 颜色 bootstrap-utility-api 使用、扩展和自定义 Bootstrap 6 的工具 API。在添加自定义工具类、修改或移除 Bootstrap 的默认工具、启用响应式或状态变体，或精简生成的工具 CSS 时使用。 工具类 API --- # [Bootstrap 6.0] 设计思路 URL: https://bs.88fc.cn/docs/6.0/getting-started/approach/ Sass 与 CSS Bootstrap 6 带来了新的理念：结合使用 Sass 与 CSS，针对你的具体需求构建和定制项目。概括来说： Sass 用于程序化配置—— 包括函数、循环、mixin 等生成式结构。 CSS 用于视觉定制—— 使用 CSS 变量控制颜色、间距、排版等视觉属性。 之前的几个大版本把 Sass 同时用于程序化配置和视觉定制，而 CSS 变量只是额外增加了一层更复杂、也更不完整的次要机制。v6 对此做了大幅改进。 此外，我们使用 PostCSS 为 CSS 变量加上 bs- 前缀（ 前缀处理 ），并按需为 CSS 属性添加浏览器厂商前缀。 Sass Sass 用于以下用途： 导入（ @use 和 @forward ）各个可编译为 CSS 的样式表。 用 mixin 和函数管理重复的代码片段。 切换 $enable-smooth-scroll 、 $enable-reduced-motion 等全局选项。 通过 Sass map、循环等配置并生成组件变体（主题色、尺寸等）。 为颜色的每个色调和明暗批量生成 CSS 变量。 管理组件 token 列表（例如 $alert-tokens ），并将其应用到特定类。 为工具类 API 提供支持，以自定义和生成工具类。 CSS 虽然你可以用 Sass 定制 Bootstrap 的外观，但现在更推荐尽可能使用 CSS 变量，包括在使用 Sass 时。我们这样使用 CSS： 自定义单个全局 token 和组件 token，例如 --bs-border-radius 、 --bs-alert-padding-x 等。 使用 Sass 的 with (...tokens) 语法自定义 token 值，以覆盖默认值。 混合颜色，为每个色相生成浅色和深色变体。 使用 calc() 根据另一个 token 或 CSS 变量的值计算动态值。 示例 下面是我们如何结合 Sass 和 CSS 来定制 Bootstrap。Sass 帮助我们管理功能，并提供生成式 token；CSS 则让我们可以自定义单个 token 和值。在几乎所有的组件中，我们都会建立一个“token” Sass map，其中的 token 实际上就是 CSS 变量。然后使用这个 map 在组件类上生成 CSS 自定义属性。 例如，警告框组件有一个 $alert-tokens map，用于在 .alert 类上生成 CSS 自定义属性。 SCSS $alert-tokens : ( --alert-padding-x: 2 rem , --alert-border-radius: 1 rem , // … ); . alert { @ include tokens ( $alert-tokens ); // … } 在实践中，这意味着你可以使用 Sass 的模块系统，在构建时为特定组件甚至全局覆盖 CSS 变量。 SCSS @ use "../node_modules/bootstrap/scss/bootstrap" with ( // Manage global options $enable-smooth-scroll : true, // Modify global tokens $root-tokens : ( --border-radius : .25 rem , --spacer : 1.5 rem , ) , // Modify component tokens $alert-tokens : ( --alert-padding-x : calc ( var ( --spacer ) * 2 ) , --alert-border-radius : 1 rem , ) , ); 下面是一个只能用 Sass 实现的示例，用 CSS 很难达到同样效果。以下代码会从 button-variants map 中移除 text 和 subtle 变体，并覆盖 button-sizes map，使其只包含 sm 和 lg 尺寸。 SCSS @ use "../node_modules/bootstrap/scss/bootstrap" with ( // Modify button sizes to remove default `xs` size $button-sizes : ( "sm" , "lg" ) , // Remove default `text` and `subtle` button variants with `null` $button-variants : ( "text" : null, "subtle" : null, ) , ); 下面是一个只用纯 CSS 定制编译后 CSS 变量的示例。所有使用 var(--bs-border-radius) 的地方，都会被替换为 .25rem 。 CSS : root { --border-radius : .25 rem ; --spacer : 1.5 rem ; } 现代基础 Bootstrap 采用了一些重要的全局样式和设置，用于统一浏览器样式、支持响应式移动优先设计，并提供一个现代化基础。 响应式设计 响应式网页设计是指构建一个能响应其所在设备视口大小的网站。实现方式是使用范围媒体查询，根据视口大小对网站应用不同样式。 CSS @ media (width < 768 px ) { . container { max-width : 100 % ; } } Bootstrap 附带多个响应式层级（或断点），让你可以从小型移动设备到大型桌面屏幕逐层叠加样式。这为你提供了一种非常灵活且强大的方式，构建可针对任意尺寸设备优化的网站。 HTML5 文档类型 Bootstrap 要求使用 HTML5 文档类型。否则，你会看到一些怪异且不完整的样式。 HTML < html lang = "en" > … Viewport meta Bootstrap 采用 移动优先 的开发方式：先针对移动设备优化代码，再通过 CSS 媒体查询按需放大组件。为确保所有设备都能正确渲染并支持触摸缩放，请在 中添加响应式 viewport meta 标签。 HTML < html lang = "en" > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" > … < body > … 你可以在 快速开始 中看到一个实际示例。 Box-sizing 为了让 CSS 尺寸计算更直接，我们把全局 box-sizing 从 content-box 改为 border-box 。这样可以确保 padding 不影响元素的最终计算宽度。 在极少数需要覆盖它的情况下，可以使用类似下面的写法： CSS . your-selector { box-sizing : content-box ; } 在 CSS Tricks 中进一步了解盒模型与尺寸计算。 Reboot 为改善跨浏览器渲染，我们使用 Reboot 修正不同浏览器和设备之间的不一致，同时为常见 HTML 元素提供带有一定主张的重置样式。 浏览器支持 你可以在 我们的 .browserslistrc 文件 中查看支持的浏览器范围及版本。各版本下限的原因，以及这些下限为我们提供和未提供的平台特性，请参阅 浏览器与设备 。 PLAINTEXT 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 如果你通过 npm 安装 Bootstrap，也可以在本地 node_modules/bootstrap/.browserslistrc 找到这个文件。 我们使用 Autoprefixer 通过 CSS 前缀处理目标浏览器支持，它使用 Browserslist 管理浏览器版本。有关如何把这些工具集成到项目中，请查阅它们的文档。 指导原则 除了 Bootstrap 做了什么，这里还说明 为什么 这样做——我们在 Web 上构建的哲学。概括来说，指导我们思路的原则如下： 组件应当是响应式且移动优先的 组件应基于一个基础类构建，并通过修饰类扩展 组件状态应遵循统一的 z-index 层级 优先使用 HTML 和 CSS 实现，而不是 JavaScript 优先使用工具类，而不是自定义样式 避免强制严格的 HTML 结构要求（直接子元素选择器） 这些规则无法总是被严格遵循，但我们会尽可能遵守。 响应式 Bootstrap 的样式是移动优先的——我们随着视口增大而添加样式，而不是在视口缩小时覆盖样式。并非每个组件都必须完全响应式，但这种方式可以减少 CSS 覆盖。 我们使用范围媒体查询（例如 width >= 768px ）在特定断点应用样式，并一直延续到更大的断点。例如， .d-none 从 min-width: 0 一直生效到无限大；而 .md:d-none 则从中等断点开始生效。 类 除了 Reboot ，我们尽量只把类用作选择器。在可行的情况下，避免使用类型选择器和多余的父选择器，以获得更大的灵活性。 组件通常由一个基础类提供共享的属性值对。例如 .btn 、 .btn-solid 和 .theme-primary 。我们用 .btn 承载 display 、 padding 、 border-width 等所有通用样式，再用 .btn-solid.theme-primary 这样的变体和主题修饰类添加更多样式。 这降低了复杂度、精简了代码，也使系统更易扩展。 z-index 层级 Bootstrap 中使用两套 z-index 层级——组件内部元素和浮层组件。 Bootstrap 中有些组件通过重叠元素来避免双重边框，而无需修改 border 属性，例如按钮组、输入框组和分页。这些组件共用一套从 0 到 3 的标准 z-index 层级，与我们期望的用户优先级一致。 0 用于默认状态（初始状态，实际上不会设置） 1 用于 :hover ，最低，因为它表示用户意图，但几乎 任何 元素都可能被悬停。 2 用于 :active / .active ，第二高，因为它们表示状态。 3 用于 :focus ，最高，因为获得焦点的元素处于视野中并受到用户关注。 使用浮层的组件也有一套预定义的 z-index 层级，从 1000 开始。这个起始值是随意选定的，用来在我们的样式和你项目的自定义样式之间留出一点缓冲。 scss/_config.scss $zindex-levels : ( n1 : -1 , 0 : 0 , 1 : 1 , 2 : 2 , 3 : 3 , menu : 1000 , sticky : 1010 , fixed : 1020 , drawer : 1030 , dialog : 1040 , popover : 1050 , tooltip : 1060 , toast : 1070 , ); 每个浮层组件都会略微提高其 z-index ，以便遵循常见的 UI 原则，让用户聚焦或悬停的元素始终保持在视野中。例如，对话框会阻塞文档（除了对话框中的操作，你无法进行其他操作），因此我们把它放在导航栏之上。 在我们的 z-index 布局页面 中了解更多。 优先使用 HTML 和 CSS，而非 JS 只要可能，我们就优先使用 HTML 和 CSS，而不是 JavaScript——它们对所有经验水平的用户都更友好，在浏览器中也更快。这也是为什么我们的一等 JavaScript API 是 data 属性：它让你可以多写 HTML、少写 JavaScript。更多内容请参阅 JavaScript 概览 。 我们的样式建立在浏览器基础行为之上。例如，虽然你可以把 .btn 放到几乎任何元素上，但我们更推荐具有语义价值的