Bootstrap5：看这一篇就够了

在日新月异的前端世界中，Bootstrap 始终像一位默默陪伴的老友，为无数开发者简化了从构思到实现的路径。自 2011 年诞生以来，它用直观的栅格系统和丰富的组件库，让响应式设计不再是少数人的专长。如今 Bootstrap 5 的发布，既是框架的自我革新，也为我们打开了一扇重新认识现代 Web 开发的大门。由于前端技术的高速发展， Bootstrap 5并不算是非常好的选择，但是，它的轻量、易用、兼容等特点，对我来说，确实是个合适的选择。

一、环境搭建

1、编辑器选择

（1）cursor是个不错的选择，AI加持，学习起来更容易（收费）。

cursor：看这一篇就够了_cursor pycharm-CSDN博客

（2）类似cursor，有免费的替代，也是AI加持，如trae，国产也很强。

Trae - AI 原生 IDE

2、AI辅助学习

（1）腾讯元宝是个不错的选择，使用满血Deepseek，学习起来爽歪歪。

（2）还有其他AI模型可以选择，如豆包、智谱清言等。

3、前端环境

（1）创建空文件夹

（2）通过cursor选择该空文件夹

（3）通过cursor搭建bootstrap环境

（4）运行环境

如下所示，经过cursor的引导，很快就创建了环境。

4、npm run dev

前端服务配置

{  "name": "bootstrap5-project",  "version": "1.0.0",  "description": "Bootstrap 5 project",  "type": "module",  "main": "index.js",  "scripts": {    "dev": "vite",    "build": "vite build",    "preview": "vite preview"  },  "dependencies": {    "bootstrap": "^5.3.2",    "@popperjs/core": "^2.11.8",    "jquery": "^3.7.1"  },  "devDependencies": {    "vite": "^5.0.12"  }}

从配置中看，前端服务器使用了vite来构建。 - 当运行 `npm run dev` 时，实际上执行的是 `vite` 命令（根据 package.json 中的配置） - Vite 会启动一个开发服务器，默认端口通常是 3000 或 5173 - Bootstrap 5.3.2（UI 框架） - Popper.js 2.11.8（Bootstrap 的依赖，用于弹出组件） - jQuery 3.7.1 - Vite 5.0.12（开发服务器和构建工具） - Vite 会监听项目文件的变化 - 当修改 HTML、CSS 或 JavaScript 文件时，浏览器会自动刷新或热更新 - 比如修改 index.html 中的内容，变化会立即反映在浏览器中 - Vite 会自动处理项目中的静态资源 - Bootstrap CSS 和 JS 文件会被正确地引入和处理 - 当前项目中的 Bootstrap 资源引用：

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

- 在开发模式下，Vite 会自动处理这些 node_modules 中的资源引用 - Vite 提供了非常快速的冷启动速度 - 支持模块热替换（HMR） - 提供友好的错误提示和调试信息 - 在 index.html 中添加的调试代码也会实时生效：

  ```javascript  document.getElementById('testButton').addEventListener('click', () => {    const debugOutput = document.getElementById('debugOutput');    debugOutput.innerHTML = `<div >Button clicked at ${new Date().toLocaleTimeString()}</div>`;    console.log('Button clicked!');  });  ```

因此，前端开发流程可以这么看：（1）运行 `npm run dev` 启动开发服务器（2）在浏览器中打开提供的本地开发 URL（通常是 http://localhost:3000）（3）编辑项目文件，变更会自动反映在浏览器中（4）可以使用浏览器开发工具查看控制台输出和调试信息

那么，问题来了，vite是什么？我必须使用viete么？比如，为什么django的模板引擎没看到使用vite？答案显而易见，vite并不是必须的，其他构建工具同样可以。我们把重点放到bootstrap5上面，不用去想vite的事情，因为bootstrap5不依赖vite，甚至配置文件中jQuery工具都可以不用，我们就用原生JS。

二、初识bootstrap5

1、一段bootstrap5代码

<!-- 典型响应式布局示例 --><div >  <div >    <div >      <div >        <img src="..." >        <div >          <h5 >响应式卡片</h5>        </div>      </div>    </div>  </div></div>

这么看的话，很难看得懂这些代码的意思，能起到什么作用，但可以配合官方文档使用：

开始使用 Bootstrap · Bootstrap v5.3 (sbox.cn)

如何简单记一下这些代码呢？其实用多了才行，还得不断去查阅文档。不只是bootstrap需要这么做，VUE这些框架也是类似的。那么，我们可以通过以下策略去整体学习一下bootstrap5.

（1）分类记忆

1. 布局系统   - 容器: `.container` `.container-fluid`   - 网格: `.row` > `.col-*` `.col-sm-*`   - 间距: `g-*` `gy-*` `gx-*`    - 对齐: `align-items-*` `justify-content-*`2. 通用组件   - 导航: `.nav` `.navbar` `.dropdown`   - 卡片: `.card` `.card-body` `.card-img-top`   - 表单: `.form-control` `.form-select` `.form-check`3. 实用工具类   - 边距: `m-*` `mt-*` `mb-*`   - 颜色: `text-primary` `bg-danger`   - 显示: `d-none` `d-md-block`

（2）专注学习高频组件

<!-- Top 5高频组件模板 --><!-- 导航栏 --><nav >  <div >    <a  href="#">Logo</a>    <button  data-bs-toggle="collapse" data-bs-target="#navMenu">      <span ></span>    </button>    <div  id="navMenu">      <ul >        <li ><a  href="#">Home</a></li>      </ul>    </div>  </div></nav><!-- 卡片组件 --><div  >  <img src="..." >  <div >    <h5 >Card Title</h5>    <p >Some quick example text.</p>    <a href="#" >Go somewhere</a>  </div></div><!-- 表单验证 --><div >  <label >Email address</label>  <input type="email" >  <div >Invalid email format</div></div>

（3）记忆口诀

/* 边距工具速记 */m = margin      // 例如: m-3p = padding     // 例如: pt-2t = top         // 例如: mt-4b = bottom      // 例如: pb-3s = start(left) // 例如: ms-autoe = end(right)  // 例如: me-2x = 水平轴      // 例如: px-5y = 垂直轴      // 例如: my-0/* 响应式断点 */sm ≥576px       // 例如: col-sm-6md ≥768px       // 例如: d-md-nonelg ≥992px       // 例如: text-lg-startxl ≥1200px      // 例如: shadow-xlxxl ≥1400px     // 例如: w-xxl-50

（4）系统学习

（5）辅助记忆

特别是使用ai编辑器，学起来挺轻松的。

（6）刻意练习

如有时间就看看文档，甚至有计划去看一些组件，最好还是不断编程，熟能生巧。

（7）长期记忆

看源码。。。

2、官方文档

（1）速查表

Cheatsheet · Bootstrap v5.3 (getbootstrap.com)

（2）官方地址

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

（3）中文地址

开始使用 Bootstrap · Bootstrap v5.3 (sbox.cn)

（4）图标

Bootstrap Icons · Official open source SVG icon library for Bootstrap (getbootstrap.com)

（5）示例代码

Examples · Bootstrap v5.3 (getbootstrap.com)

3、知识点汇总

（1）布局系统

类名	作用	代码示例
`.container`	响应式固定容器	`<div >`
`.container-fluid`	全屏流动容器	`<div >`
`.row`	行容器	`<div >`
`.col-{breakpoint}-*`	列定义（*为1-12）	`<div >`
`.g-{n}`	列间距（n=0-5）	`<div >`

（2）响应式断点

断点前缀	屏幕宽度	典型用法
-	<576px	手机竖屏
`sm`	≥576px	手机横屏/小平板
`md`	≥768px	平板
`lg`	≥992px	小桌面
`xl`	≥1200px	大桌面
`xxl`	≥1400px	超大屏幕（Bootstrap 5新增）

（3）常用组件

按钮、导航栏、卡片

（4）实用类工具

类别	示例类名	作用
边距	`mt-3`,`mb-lg-4`	外距调整（0-5）
内边距	`px-2`,`py-sm-3`	内距调整
文本	`text-center`,`fs-4`	对齐/字体大小
背景色	`bg-dark`,`bg-gradient`	背景颜色/渐变
显示	`d-none`,`d-md-block`	响应式显示控制
弹性盒子	`d-flex`,`justify-content-between`	弹性布局控制

（5）表单控件

<div >  <label >邮箱地址</label>  <input type="email"  placeholder="name@example.com"></div><div >  <input  type="checkbox">  <label >同意协议</label></div><!-- 浮动标签 --><div >  <input type="email"  id="floatingInput" placeholder="name@example.com">  <label for="floatingInput">邮箱地址</label></div>

（6）交互组件

模态框、下拉菜单

三、简单入门

1、引入bootstrap5

（1）本地安装后引入（生产环境一般用这个）

cursor生成：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Bootstrap 5 Test</title>    <!-- Bootstrap CSS -->    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"></head><body>    <div >        <h1 >Bootstrap 5 Test</h1>        <button  id="testButton">Test Button</button>        <div id="debugOutput" ></div>    </div>    <!-- Bootstrap Bundle with Popper -->    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>    <script>        // 添加调试代码        document.getElementById('testButton').addEventListener('click', () => {            const debugOutput = document.getElementById('debugOutput');            debugOutput.innerHTML = `<div >Button clicked at ${new Date().toLocaleTimeString()}</div>`;            console.log('Button clicked!');        });    </script></body></html>

（2）引用链接（一般用于学习bootstrap5）

官方示例：

<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap demo</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">  </head>  <body>    <h1>Hello, world!</h1>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>  </body></html>

2、布局

2.1 断点

断点 · Bootstrap v5.3

断点是响应式设计的构建基块。使用断点来控制何时可以在特定视口或设备大小上调整布局。

什么意思？也就是说，当页面变化到一定尺寸时，就会触发断点。比如，带文字的控件，在页面缩小到某个尺寸时，控件就变成了一个图标。

再比如容器，默认情况下，小于某尺寸就会以父容器全尺寸展示。

尺寸可查询官网，默认断点为Extra small，对应尺寸可重写：

如下是一种使用方式，当界面尺寸小于sm时，按钮文字就会消失：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Bootstrap 5 Test</title>    <!-- Bootstrap CSS -->    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">    <style>        @media (max-width: 575.98px) {            #testButton span {                display: none;            }        }    </style></head><body>    <div >        <h1 >Bootstrap 5 Test</h1>        <button  id="testButton"><span>Test Button</span></button>        <div id="debugOutput" ></div>    </div>        <!-- Bootstrap Bundle with Popper -->    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>    <script>        // 添加调试代码        document.getElementById('testButton').addEventListener('click', () => {            const debugOutput = document.getElementById('debugOutput');            debugOutput.innerHTML = `<div >Button clicked at ${new Date().toLocaleTimeString()}</div>`;            console.log('Button clicked!');        });    </script></body></html>

也可以使用混合宏SaaS（Syntactically Awesome Style Sheets 是一种 CSS 预处理器，Bootstrap 使用其实现模块化和可配置性），格式如：

@include media-breakpoint-down(md) { ... }

相对的，传统写法 @media (max-width: 767.98px) 是 CSS 的媒体查询（Media Query），用于根据设备的视口（viewport）宽度应用特定样式。

2.2 容器

容器 · Bootstrap v5.3 (sbox.cn)

当我们了解断点的概念后，再去理解容器就简单多了，直接上表：

我们看到容器带了断点，会根据断点自动调整容器的大小，如container-md表示屏幕小于md尺寸时占满100%宽，大于或等于md时，大小等于父容器，特别的container-fluid在任何时候都是100%宽，即占满视野。

还可以通过Sass mixin（Sass 关键字，用于定义可复用的样式模块）自定义容器，详见文档，这里简单解读一下：

@mixin make-container($padding-x: $container-padding-x)

@mixin：Sass 关键字，用于定义可复用的样式模块。 make-container：混合宏名称，类似函数名。 $padding-x: $container-padding-x：参数列表，$padding-x是参数名，$container-padding-x是默认值（通常来自全局变量），这样可以允许通过$padding-x动态调整内边距，实现样式的灵活复用。

2.3网格系统

网格系统 · Bootstrap v5.3 (sbox.cn)

直接上表：

这么看这个表是不是有点熟悉了，也有很多断点。这个表格意思是每行最多能分成12列，列的类是col ，示例如下：

<div >  <div >左栏（小屏占6列，中屏占4列）</div>  <div >右栏（小屏占6列，中屏占8列）</div></div>

注意类后面带的数字，表示在xs时，左栏分6列，右栏分6列；在md时，左栏分4列，右栏分8列；加起来，都是12列。更多示例见官方文档，很有趣。

2.4 列

列（Columns） · Bootstrap v5.3 (sbox.cn)

列就是col,也就是网格系统的元素。我们现在来总结一下它的对齐方式：

以下是 Bootstrap 5 中关于「列」的核心知识点汇总表格：

知识点	说明	核心类	代码示例
工作原理	基于 Flexbox 的 12 列网格系统，通过`.container > .row > .col`层级构建	`.container`,`.row`,`.col`	`<div ><div ><div >内容</div></div>`
垂直对齐	行内所有列的垂直对齐方式	`.align-items-start/center/end`（行级） `.align-self-*`（列级）	`<div >`
水平对齐	控制列在行内的水平分布	`.justify-content-start/center/end/around/between/evenly`	`<div >`
列换行	当一行总列宽超过 12 时自动换行	无需特殊类，自动行为	`<div >+ <div >（自动换行）`
分栏符	强制在指定位置换行	`.w-100`（通用） `.d-none.d-{breakpoint}-block`（响应式）	`<div ></div>`（强制换行）
排序类	控制列的顺序（DOM 顺序不变，视觉顺序变化）	`.order-{1-5}` `.order-{breakpoint}-*` `.order-first/last`	`<div >`（中屏第二顺位）
偏移类	通过网格类向右移动列	`.offset-{breakpoint}-{1-11}`	`<div >`（居中布局）
边距工具	使用间距工具实现灵活偏移	`.ms-auto`（左外边距自动） `.me-auto`（右外边距自动）	`<div >`（右对齐）
独立列类	在非`.row`容器中使用列类	`.col-*`（需手动处理间距）	`<div >独立列</div>`

2.5 槽

槽（Gutters） · Bootstrap v5.3 (sbox.cn)

分类	类名/方法	功能描述	注意事项/示例
工作原理	-	槽是列之间的间隙，通过水平`padding`创建，并用负`margin`对齐内容。默认宽度为`1.5rem`(即`24px`)。	所有列的左右`padding`形成间隙，行首尾用负`margin`抵消。支持响应式调整。
水平 Gutters	`.gx-*`	控制水平槽宽度（如`.gx-3`）。	大槽宽可能导致溢出，需在父级容器添加`.px-*`调整或使用`.overflow-hidden`包裹`.row`。
垂直 Gutters	`.gy-*`	控制垂直槽宽度（如`.gy-5`）。	垂直槽可能导致行下方溢出，需用`.overflow-hidden`包裹`.row`。
水平和垂直 Gutters	`.g-*`	同时控制水平和垂直槽宽度（如`.g-2`）。	小槽宽通常无需额外溢出处理（如`.g-2`）。
行列槽	`.row-cols-*`+ 槽类	响应式行列和槽结合，如`.row-cols-lg-5`+`.g-lg-3`。	示例：`<div >`。
无槽	`.g-0`	移除所有槽（删除负`margin`和列的`padding`）。	边缘到边缘设计需移除父级`.container`，并在`.row`添加`.mx-0`。示例：`<div >`。
更换槽	Sass变量	通过修改`$gutters`和`$spacers`的Sass映射自定义槽宽。	默认基于`$grid-gutter-width: 1.5rem`，可调整如`$gutters: (3: $spacer, ...)`。

2.6 实用工具

用于布局的实用程序 · Bootstrap v5.3 (sbox.cn)

知识点	核心类/用法	作用	示例	注意事项
改变 display	`.d-{value}` `.d-{breakpoint}-{value}`	响应式控制元素的显示方式	`.d-none`（隐藏元素） `.d-md-block`（在 md 断点以上显示为块元素）	支持`inline`、`block`、`flex`、`grid`等值；与响应式断点结合使用
弹性框选项	`.d-flex` `.d-{breakpoint}-flex`	将元素设为 Flex 容器，启用 Flex 布局	`.d-flex.justify-content-between`（弹性容器+两端对齐）	需先启用 Flex 容器才能使用其他 Flex 工具类（如对齐、间距）
边距和填充	`{property}{sides}-{size}` `{property}{sides}-{breakpoint}-{size}`	控制元素的外边距（margin）或内边距（padding）	`.mt-3`（上边距 1rem） `.px-md-4`（在 md 断点以上左右内边距 1.5rem）	- 支持`m`（margin）/`p`（padding） - 方向：`t`/`b`/`s`/`e`/`x`/`y` - 大小：0-5（0=0，5=3rem）
切换 visibility	`.visible` `.invisible`	控制元素可见性（保留布局空间）	`.invisible`（元素不可见但占据布局）	与`display: none`不同，`visibility: hidden`不会破坏布局

2.7 z-index

Z-index · Bootstrap v5.3 (sbox.cn)

z-index用于定义页面顶层显示组件的优先级，谁的数值大，就显示在最前面。

变量名 (SCSS)	组件/用途	z-index值	说明
`$zindex-dropdown`	下拉菜单	1000	基础下拉组件层级
`$zindex-sticky`	粘性定位元素	1020	固定定位但需要滚动控制的元素
`$zindex-fixed`	固定定位元素	1030	如固定在顶部/底部的导航栏
`$zindex-offcanvas-backdrop`	Offcanvas背景层	1040	侧边栏弹出时的遮罩层
`$zindex-offcanvas`	Offcanvas侧边栏	1045	侧边栏内容显示层级
`$zindex-modal-backdrop`	模态框背景层	1050	模态对话框的遮罩
`$zindex-modal`	模态框	1055	模态对话框内容层级
`$zindex-popover`	弹出框	1070	信息提示框（层级高于模态框）
`$zindex-tooltip`	工具提示	1080	文字提示信息
`$zindex-toast`	Toast通知	1090	即时消息通知（最高层级）
-	组件边框重叠处理	1/2/3	用于输入组等元素的默认(1)、悬停(2)

（1）层级设计从1000开始递增，确保常用组件按优先级层叠

（2）较高值组件（如Toast）会覆盖较低值组件（如模态框）

（3）特殊低位值(1-3)用于处理表单控件等元素的交互状态叠加

（4）官方建议不要单独修改单个值，调整时需考虑整体层级关系

（5）通过Sass变量集中管理，便于主题定制时统一调整

2.8 CSS网格(被禁用的秘术)

CSS 网格 · Bootstrap v5.3 (sbox.cn)

新技术，被禁用的秘术，实验阶段，可暂不学习或使用。

知识点	描述	关键特性/示例
工作原理	启用CSS Grid替代默认网格系统	- 设置`$enable-grid-classes: false`和`$enable-cssgrid: true` - 使用`.grid`代替`.row`，`.g-col-`代替`.col-` - 通过CSS变量（如`--bs-columns`）定义列和间隙
主要区别	与默认Flexbox网格的差异	- 间隙（`gap`）替代gutter，影响水平和垂直间距 - Flex工具对CSS Grid列无效 - 内联样式优先于修饰类（如）
示例	基础布局示例	包含三列、响应式、自动换行等场景
三列	等宽三列布局	使用`.g-col-4`类（总列数为12时，每列占4份）
响应式	响应式断点调整列宽	如`.g-col-6 .g-col-md-4`（移动端占6列，中屏及以上占4列）
包装	自动换行至下一行	使用`.g-col-6`生成两列，超出父容器宽度时自动换行
开始	控制列的起始位置	使用`.g-start-*`类（如`.g-start-2`从第2列开始）
自动列	未指定列类时自动均分宽度	直接子元素自动成为等宽列（默认1列）
嵌套	嵌套网格继承父级列数，需手动重置	嵌套时需重置`--bs-columns`（如）
自定义	通过CSS变量动态调整布局	-`--bs-columns`: 列数 -`--bs-gap`: 间隙大小 -`--bs-rows`: 行数
无网格类	直接子元素自动适应为网格项	无需显式添加`.g-col-*`类，自动填充可用空间
列和间隙	自定义列数和间隙大小	如结合`.g-col-6`和`.g-col-4`
添加行	显式定义行数和行内位置	设置`--bs-rows:3`并配合`grid-row`属性定位
间隙	单独控制垂直/水平间隙	使用`row-gap`或`column-gap`（如定义垂直和水平间隙）
Sass	通过Sass变量预生成类，但灵活性受限	修改`$grid-columns`和`$grid-gutter-width`后需重新编译，或使用内联样式扩展布局

3、内容

3.1 Reboot

重新启动（Reboot） · Bootstrap v5.3 (sbox.cn)

Reboot是单个文件中特定于元素的CSS更改的集合，启动Bootstrap以提供一个优雅，一致和简单的基线来构建。

知识点	要点
方法	• 通过元素选择器覆盖默认样式，其他样式通过类（如`.table`）实现 • 使用`rem`替代`em`定义间距 • 避免`margin-top`，防止边距折叠 • 优先使用继承和 CSS 变量
CSS 变量	• 从 v5.2.0 开始引入，映射 Sass 变量到 CSS 变量 • 允许实时自定义（如） • 所有 CSS 包包含`:root`变量定义
页面默认值	• 全局`box-sizing: border-box` •`<body>`默认`font-size: 1rem` •`<body>`设置背景色为`#fff`，字体继承系统字体堆栈
原生字体堆栈	• 使用跨平台系统字体（如`system-ui`,`Segoe UI`,`Roboto`） • 包含表情符号字体（如`Apple Color Emoji`） • 提升渲染性能和可访问性
标题	• 移除`margin-top`，设置`margin-bottom: 0.5rem` • 行高更紧凑 • 支持通过`--bs-heading-color`变量覆盖颜色
段落	• 移除`margin-top`，设置`margin-bottom: 1rem`
链接	• 默认下划线，`:hover`颜色变化 • 使用`rgba()`和`-rgb`变量控制透明度（如`--bs-link-opacity`） • 占位符链接（无`href`）重置为默认样式
水平线	• 通过`border-top`定义样式 • 继承父级颜色 • 支持实用类（如`.border-danger.opacity-50`）
列表	• 移除上下边距，嵌套列表无`margin-bottom` •`<ul>/<ol>`左内边距重置 •`<dt>`加粗，`<dd>`左外边距为`0`
内联代码	• 使用`<code>`标签，需转义 HTML（如`<section>`）
代码块	• 使用`<pre>`包裹多行代码 • 移除`margin-top`，`margin-bottom`使用`rem`单位
变量	• 使用`<var>`表示变量（如数学公式中的变量）
用户输入	• 使用`<kbd>`表示键盘输入（如`<kbd>Ctrl</kbd> + <kbd>C</kbd>`）
示例输出	• 使用`<samp>`表示程序输出
表格	• 默认样式简化 • 边框对齐优化 • 复杂样式需通过`.table`类实现
表单	•`<fieldset>`无边框/边距 •`<label>`设为`inline-block` •`<textarea>`仅允许垂直调整大小 • 按钮默认`cursor: pointer`
按钮上的指针	•`role="button"`元素自动应用`cursor: pointer`
地址	•`<address>`的`font-style`重置为`normal` • 添加`margin-bottom: 1rem`
块引用	• 移除默认`margin`（改为`0 0 1rem`） • 与其他元素间距一致
内联元素	•`<abbr>`显示为下划线虚线，提升可读性
总结	•`<summary>`默认`cursor: pointer`（如折叠内容）
HTML5 [hidden] 属性	• 强制`display: none !important` • 与 jQuery`.hide()`/`.show()`不兼容

3.2 排版

字体排版 · Bootstrap v5.3 (sbox.cn)

以下是对Bootstrap v5.3字体排版知识点的总结表格：

知识点	作用描述	使用方式/示例	相关类/Sass变量
全局设置	定义基础排版样式，包括字体、字号、行高、链接颜色和背景色	通过`<body>`设置全局样式	`$font-family-base`,`$font-size-base`,`$link-color`,`$body-bg`
标题	提供HTML标题`<h1>`到`<h6>`的标准样式	`<h1>标题</h1>`	`.h1`-`.h6`类（用于非标题元素）
自定义标题	在标题旁添加小号副标题	`<h3>主标题 <small >副标题</small></h3>`	`text-body-secondary`类
禁用标题（Display headings）	更大的强调标题样式	`<h1 >超大标题</h1>`	`.display-1`-`.display-6`类，Sass变量：`$display-font-sizes`,`$display-font-weight`
突出（Lead）	突出段落文本的强调样式	`<p >突出段落</p>`	`.lead`类，Sass变量：`$lead-font-size`,`$lead-font-weight`
内联文本元素	为内联标签（如`<mark>`、`<del>`）提供语义化样式	`<mark>高亮</mark>`,`<del>删除线</del>`	对应标签或`.mark`,`.small`,`.text-decoration-underline`等类
文本实用程序	通过工具类快速调整文本对齐、颜色、粗细等属性	`<p >居中加粗</p>`	`text-`,`fw-`,`text-decoration-*`等类
缩写	为`<abbr>`标签提供悬停提示和样式	`<abbr title="World Wide Web" >WWW</abbr>`	`.initialism`类，Sass变量：`$initialism-font-size`
块引用	引用内容的块级样式	`<blockquote >引用内容</blockquote>`	`.blockquote`类
命名源	在块引用中添加来源说明	`<figure><blockquote>...</blockquote><figcaption >来源</figcaption>`	`.blockquote-footer`类
对准	控制块引用内容的对齐方式	`<figure >...</figure>`	`text-center`,`text-end`类
列表（无样式）	移除列表默认样式（仅直系子元素）	`<ul >...</ul>`	`.list-unstyled`类
列表（内嵌）	将列表项水平排列	`<ul ><li >项1</li>...</ul>`	`.list-inline`,`.list-inline-item`类
说明列表对齐方式	使用网格系统对齐说明列表的术语和描述	`<dl ><dt >术语</dt><dd >描述</dd></dl>`	`.row`,`.col-*`网格类
响应式字体大小	自动根据设备调整字体大小（默认启用）	自动生效，无需额外代码	RFS（Responsive Font System）机制
Sass变量	控制排版样式的全局变量	自定义变量如`$headings-font-weight: 700;`	`$headings-`,`$display-`,`$lead-`,`$blockquote-`等系列变量
Sass混合	无专用排版混合，但使用RFS实现响应式字体	通过`@include font-size()`混合使用	`@mixin font-size()`（RFS内置）

（1）响应式字体：通过RFS自动缩放字号，适配不同屏幕。

（2）语义化样式：使用HTML5标签（如<mark>、<blockquote>）配合工具类。

（3）灵活定制：通过Sass变量全局控制排版参数（字号、行高、颜色等）。

（4）布局整合：列表与网格系统（如说明列表对齐）深度结合。

3.3图像

图像 · Bootstrap v5.3 (sbox.cn)

分类	类名/变量	作用	示例代码	注意事项	Sass 变量
响应式图像	`.img-fluid`	让图像随父容器宽度自动缩放	`<img src="..." alt="...">`	需要父容器有宽度约束，`max-width: 100%`和`height: auto`	无
图像缩略图	`.img-thumbnail`	添加圆角边框和缩略图样式	`<img src="..." alt="...">`	默认尺寸 200x200，包含`border-radius`和 1px 边框	`$thumbnail-padding` `$thumbnail-bg` `$thumbnail-border-width` `$thumbnail-border-color` `$thumbnail-border-radius` `$thumbnail-box-shadow`
对齐图像	`.float-start`/`.float-end`	左对齐/右对齐图像	`<img ...>`	需要配合`.clearfix`清除浮动	无
	`.mx-auto.d-block`	水平居中图像	`<img ...>`	需同时使用`.d-block`和`.mx-auto`	无
	父容器使用`.text-center`	通过文本对齐方式居中图像	`<div ><img ...></div>`	依赖父容器的文本对齐属性	无
图片元素	类加在`<img>`而非`<picture>`	为响应式图片指定多个`<source>`时保持样式兼容性	`<picture><source ...><img ...></picture>`	所有样式类必须直接应用于`<img>`标签	无
CSS/Sass	变量前缀`$thumbnail-*`	自定义缩略图样式（内边距、背景、边框等）

（1）响应式图像：核心是限制图像最大宽度为父容器宽度，避免溢出

（2）缩略图样式：通过 6 个 Sass 变量完全控制外观，支持主题定制

（3）对齐系统：浮动对齐：传统布局方式，需注意清除浮动Flex/Grid 对齐：更推荐使用 Bootstrap 的 Flex 工具类

（4）图片元素：强调语义化 HTML5 规范，保持与框架样式兼容

（5）主题定制：通过覆盖 Sass 变量快速修改全局缩略图样式，保持设计一致性

3.4表格

表格 · Bootstrap v5.3 (sbox.cn)

分类	核心要点	相关类/属性	特点
概述	表格需手动添加基类`.table`，样式不继承嵌套表格	`<table >`	选择加入机制，避免与第三方组件冲突
变体	通过上下文类改变表格/行/单元格颜色	`.table-primary.table-secondary`等 `tr/td`直接应用类	颜色模式自适应暂不支持，需确保内容可访问性
Accented 表格	通过条纹和悬停增强视觉效果
- 条带行	隔行变色效果	`.table-striped`	作用于`<tbody>`，可与其他变体组合
- 条纹列	隔列变色效果	`.table-striped-columns`	列级视觉分隔
- 可悬停行	鼠标悬停高亮行	`.table-hover`	增强交互反馈
- 活动表格	主动高亮特定行/单元格	`.table-active`	通过明暗对比突出显示
实现原理	使用 CSS 变量和盒阴影叠加技术	`--bs-table-bg` `box-shadow: inset`	半透明颜色叠加，自动计算对比度
边框控制
- 带边框	全边框表格	`.table-bordered` `.border-primary`等	支持自定义边框颜色
- 无边框	去除默认边框	`.table-borderless`	简洁视觉风格
紧凑表格	减少单元格内边距	`.table-sm`	内边距减半，适合数据密集型展示
表组分隔	增强组间分隔线	`.table-group-divider`(加在`<tbody>`)	通过`border-top`实现，需自定义颜色时直接修改 CSS
垂直对齐	控制单元格内容对齐	`.align-middle` `.align-bottom` `.align-top`	默认继承表格对齐方式，可逐级覆盖
嵌套表格	嵌套表格独立样式	父表格不传递样式	使用`:not(caption) > *`选择器隔离样式
解剖结构
- 表头控制	定制表头背景色	`<thead >` `.table-dark`	与表格主色分离控制
- 表尾	与表头样式分离	`<tfoot>`	独立控制样式
字幕	表格标题辅助功能	`<caption>` `.caption-top`	支持顶部/底部定位，增强可访问性
响应式表格	水平滚动解决方案
- 始终响应	全断点响应	`.table-responsive`包裹	强制横向溢出滚动
- 断点响应	指定生效的断点	`.table-responsive{-sm/md/lg/xl/xxl}`	达到断点后恢复默认显示
CSS/Sass
- 变量	控制内边距/颜色/对比度等	`$table-cell-padding-y` `$table-striped-bg-factor` `$table-bg-scale`等	通过调整因子变量控制叠加透明度
- 循环机制	自动生成变体样式	`@each $state, $background in $table-variants`	动态生成 8 种颜色变体的 CSS 变量
定制	通过覆盖 Sass 变量实现主题化	修改`$table-striped-bg-factor` 调整`$table-bg-scale`	可创建高对比度或半透明效果

（1）模块化控制：通过组合类实现样式叠加（如.table-dark.table-striped.table-hover）

（2）可访问性优先：强调颜色需配合文本语义，推荐使用.visually-hidden辅助说明

（3）CSS 变量驱动：使用自定义属性实现动态主题切换能力

（4）响应式分层：通过包裹容器实现滚动控制，保持核心表格结构简洁

3.5 数字

数字（Figures） · Bootstrap v5.3 (sbox.cn)

数字是在Bootstrap中使用图形组件显示相关图像和文本的文档和示例。

类名/变量	应用元素	说明	注意事项/额外信息
`.figure`	`<figure>`	作为图形组件的容器，提供基线样式（如边距、文本对齐）。	必须包裹图片和标题，确保整体布局一致性。
`.figure-img`	`<img>`	定义图形内的图片样式（如间距、响应式支持）。	需要额外添加`.img-fluid`使图片自适应容器宽度，否则图片可能溢出。
`.figure-caption`	`<figcaption>`	定义图形标题的样式（如字体大小、颜色）。	可通过文本工具类（如`.text-end`）调整标题对齐方式。
`$figure-caption-font-size`	Sass变量	控制标题字体大小，默认值为`$small-font-size`（Bootstrap定义的小号字体）。	修改此变量可自定义标题字号，需在引入Bootstrap前覆盖。
`$figure-caption-color`	Sass变量	控制标题颜色，默认值为`var(--#{$prefix}secondary-color)`（次级文本颜色）。	可通过CSS变量或直接修改此Sass变量调整标题颜色，适应主题色。

（1）响应式图片：必须为图片添加.img-fluid类，否则图片可能无法自适应宽度。

（2）标题对齐：使用Bootstrap的文本工具类（如.text-start,.text-center,.text-end）调整标题位置。

（3）样式自定义：通过覆盖Sass变量或直接修改CSS变量，可快速调整标题的字体大小和颜色。

4、表单

表单 · Bootstrap v5.3 (sbox.cn)

用于创建各种窗体的窗体控件样式、布局选项和自定义组件的示例和使用指南。

知识点	描述	关键点
概述	Bootstrap 表单控件通过扩展样式类实现一致的表单呈现和交互。	- 使用`type`属性（如`email`,`number`）启用浏览器原生验证功能。 - 核心类：`form-control`,`form-label`,`form-text`。
禁用表单	通过`disabled`属性或`<fieldset>`禁用表单控件的交互和样式。	- 单个控件：添加`disabled`属性。 - 禁用整组控件：用`<fieldset disabled>`包裹，但需注意自定义控件（如`<a>`按钮）需手动设置`tabindex="-1"`和`aria-disabled`。
可访问性	确保表单控件对辅助技术友好，提供清晰的辅助名称。	- 优先使用可见`<label>`。 - 替代方案：隐藏标签（`.visually-hidden`）、`aria-labelledby`、`title`、`aria-label`。 - 避免依赖`placeholder`作为唯一标签。
CSS	通过共享 CSS 变量统一表单和按钮样式。	- 变量以`$input-btn-`和`$input-`开头，控制内边距、字体、边框等。 - 例如：`$input-btn-padding-y`,`$input-btn-font-size`。
Sass 变量	全局变量用于按钮和表单组件之间的样式复用和扩展。	- 尺寸变量：如`$input-btn-padding-y-sm`（小尺寸）和`$input-btn-font-size-lg`（大尺寸）。 - 焦点样式：`$input-btn-focus-width`（焦点环宽度），`$input-btn-focus-color`（焦点颜色）。

4.1表单控件

表单控件 · Bootstrap v5.3 (sbox.cn)

分类	说明	核心类/属性	示例代码片段
示例	基础表单控件结构	`.form-control`,`.form-label`	`<input type="email" >`
尺寸大小	控制输入框高度	`.form-control-lg`,`.form-control-sm`	`<input >`
表单文本	辅助说明文本，需与控件关联	`.form-text`+`aria-labelledby`/`aria-describedby`	`<div id="helpText">...</div>`
禁用	禁用交互和聚焦	`disabled`布尔属性	`<input disabled>`
只读	禁止修改但允许聚焦	`readonly`布尔属性	`<input readonly>`
只读纯文本	无边框的只读样式	`.form-control-plaintext`	`<input readonly>`
文件输入	文件上传控件	`type="file"`,`.form-control-sm`/`.form-control-lg`	`<input type="file" >`
Color	颜色选择器	`type="color"`+`.form-control-color`	`<input type="color" >`
数据列表	预定义输入选项	`<datalist>`+`list`属性	`<input list="datalistOptions"><datalist id="datalistOptions">...</datalist>`
CSS	全局表单样式	自动应用的基础样式	无需手动添加类
Sass 变量	深度定制表单样式	`$input-bg`,`$input-border-color`,`$form-label-margin-bottom`等	`$input-bg: var(--#{$prefix}body-bg);`

4.2下拉选项

下拉选项（Select） · Bootstrap v5.3 (sbox.cn)

以下是对 Bootstrap 下拉选项（Select）知识点的总结表格：

知识点	说明	相关类/属性/变量	注意事项
默认值	使用自定义类初始化`<select>`样式	`.form-select`	无法修改`<option>`样式（受浏览器限制）
调整尺寸	通过类名设置大号或小号选择框	`.form-select-lg`（大号） `.form-select-sm`（小号） `multiple`和`size`属性	支持`multiple`（多选）和`size`（显示行数）属性
禁用状态	禁用选择框并显示灰色外观	`disabled`属性	移除指针事件，禁止交互
CSS	通过自定义 CSS 样式覆盖默认行为	自定义样式类	仅影响初始外观，无法修改浏览器原生选项样式
Sass 变量	通过变量控制边距、背景、边框等样式	如： `$form-select-padding-x`（水平内边距） `$form-select-bg`（背景色） `$form-select-border-radius`（边框圆角）	修改变量需重新编译 Sass，支持主题定制（如颜色模式适配）

4.3 复选框和单选框

复选框和单选按钮 · Bootstrap v5.3 (sbox.cn)

知识点	类名/属性/方法	用途/特点	结构特点	注意事项
方法	`.form-check`	替换浏览器默认复选框/单选按钮样式，提供跨浏览器一致性	`<input>`和`<label>`为同级元素，需指定`id`和`for`属性关联	使用同级选择器（`~`）控制状态样式
复选框	`.form-check-input`（type="checkbox"）	选择多个选项	包裹在`.form-check`容器中	自定义图标显示选中/未选状态
未选(Indeterminate)	`:indeterminate`伪类	表示不确定状态	需通过JavaScript手动设置	无对应HTML属性
禁用(Disabled)	`disabled`属性	禁用输入控件，标签颜色变浅	添加在`<input>`元素上	自动同步标签样式
单选按钮(Radios)	`.form-check-input`（type="radio"）	单选一组选项	同复选框结构，需相同`name`属性分组	同一组单选按钮共享`name`属性
开关(Switches)	`.form-switch`	切换开关控件，语义化为`role="switch"`	包裹在`.form-check.form-switch`容器中	旧版辅助技术会降级为复选框
默认值（堆叠）	默认布局	垂直排列多个复选框/单选按钮	多个`.form-check`元素自然堆叠	自动添加间距（`$form-check-margin-bottom`）
内嵌(Inline)	`.form-check-inline`	水平排列控件	添加至`.form-check`容器	多个内嵌控件需分别添加此类
反向(Reverse)	`.form-check-reverse`	交换标签和输入框位置	添加至`.form-check`容器	可与其他修饰类（如`.form-switch`）组合使用
无标签	省略`.form-check`容器	隐藏标签文本但保持可访问性	仅保留`<input>`元素	需用`aria-label`提供可访问名称
切换按钮	`.btn-check`+`.btn`样式	创建类似按钮的复选框/单选按钮	`<input>`隐藏，`<label>`作为按钮显示	屏幕阅读器会按原生类型（checkbox/radio）宣布
复选框切换按钮	`.btn-check`（type="checkbox"）	按钮式多选控件	支持`checked`和`disabled`状态	视觉与按钮插件切换相同，但语义不同
单选按钮切换按钮	`.btn-check`（type="radio"）	按钮式单选控件	需相同`name`属性分组	支持轮廓样式（`.btn-outline-*`）
分级显示样式	`.btn-outline-*`	创建轮廓风格的切换按钮	如`.btn-outline-primary`	支持多种颜色变体（primary/secondary/success/danger等）
CSS/Sass变量	`$form-check-`和`$form-switch-`	控制尺寸（`$form-check-input-width`）、颜色（`$form-check-input-bg`）等

4.4 范围（滑动条）

范围（Range） · Bootstrap v5.3 (sbox.cn)

知识点	描述	相关属性/变量	示例/默认值
概述	使用`.form-range`自定义`<input type="range">`，轨道和拇指样式统一。仅 Firefox 支持轨迹填充效果。	`type="range"`,	`<input type="range" id="customRange1">`
禁用状态	添加`disabled`属性使输入灰显，阻止交互和聚焦。	`disabled`（布尔属性）	`<input type="range" disabled>`
最小和最大值	默认`min=0`,`max=100`，可自定义范围。	`min`,`max`	`<input type="range" min="0" max="5">`
步数	默认步长为整数值（`step=1`），可设置小数步长。	`step`	`<input type="range" step="0.5">`
CSS	通过 Sass 变量自定义轨道和拇指的样式。	见下方 Sass 变量列	—
Sass 变量
- 轨道样式	轨道宽度、高度、背景色、边框圆角等。	`$form-range-track-width`,`$form-range-track-height`,`$form-range-track-bg`	默认值：`100%`,`0.5rem`,`var(--#{$prefix}tertiary-bg)`
- 拇指样式	拇指尺寸、背景色、边框、阴影等。	`$form-range-thumb-width`,`$form-range-thumb-bg`,`$form-range-thumb-box-shadow`	默认值：`1rem`,`$component-active-bg`,`0 0.1rem 0.25rem rgba($black, 0.1)`
- 交互状态	焦点状态阴影、禁用状态背景色等。	`$form-range-thumb-focus-box-shadow`,`$form-range-thumb-disabled-bg`	默认值：`0 0 0 1px $body-bg`,`var(--#{$prefix}secondary-color)`
- 过渡效果	拇指颜色和阴影的过渡动画。	`$form-range-thumb-transition`	默认值：`background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out`

4.5 输入组

输入组 · Bootstrap v5.3 (sbox.cn)

知识点	要点	说明
基本示例	- 附加组件可放在输入框两侧 - 使用`.input-group`容器包裹 - 标签需放在输入组外部	通过`<span >`添加前缀/后缀，输入框用`<input>`或`<textarea>`
包装（Wrapping）	默认启用`flex-wrap: wrap` 用`.flex-nowrap`禁用换行	控制输入组内元素的换行行为，适用于自定义验证场景
调整尺寸（Sizing）	通过`.input-group-sm`/`.input-group-lg`调整整体大小无需单独设置子元素尺寸	小尺寸用`input-group-sm`，大尺寸用`input-group-lg`
复选框和单选按钮	将复选框/单选框放在`.input-group-text`中添加`.mt-0`消除垂直间距	使用`<div >`包裹`<input type="checkbox/radio">`
多个输入框	支持多个`<input>`并列验证样式仅适用于单个输入的输入组	示例中展示两个输入框并列，但需注意验证限制
多个插件（Multiple addons）	未提供示例，但可通过组合前缀/后缀实现	在输入框两侧添加多个附加组件（如`$`和`.00`）
按钮插件（Button addons）	未直接提供示例，但可通过`<button>`替代`.input-group-text`实现	将按钮作为输入组的前缀或后缀
自定义选择框	未提供示例	使用`.form-select`自定义下拉选择样式
Sass 变量	未提供具体变量，但可通过覆盖 Bootstrap 变量（如`$input-group-addon-bg`）自定义样式	用于调整输入组背景色、边框等样式

4.6 浮动标签

浮动标签 · Bootstrap v5.3 (sbox.cn)

知识点	关键点
示例	- 使用`.form-floating`包裹`<input>`和`<label>`，`<input>`必须在前 -`placeholder`必填，`<label>`通过`for`绑定`id` - 表单验证通过`.is-invalid`类实现
Textareas	- 默认高度与`<input>`相同 - 自定义高度需用（禁用`rows`属性） - 示例：`<textarea >`
选择（Selects）	- 使用`.form-select`类 - 不支持`size`和`multiple`属性 - 标签始终处于浮动状态（与输入框不同）
禁用（Disabled）	- 添加`disabled`属性使输入框灰显，阻止交互 - 适用于`<input>`、`<textarea>`、`<select>`
只读明文	- 使用`.form-control-plaintext`和`readonly`属性 - 显示为纯文本且不影响布局 - 空输入时标签仍浮动，有值时显示为明文
输入组	- 在`.input-group`内使用`.form-floating` - 验证反馈需放在`.form-floating`外、`.input-group`内（需JavaScript控制显示）
布局	- 结合网格系统（如`row g-2`和`col-md`）实现响应式布局 - 每个表单元素单独放在列中
CSS	- 依赖`.form-floating`、`.form-control`、`.form-select`等类 - 验证样式通过`.is-invalid`、`.invalid-feedback`实现
Sass变量	- 控制浮动标签的样式参数： - 高度：`$form-floating-height` - 标签动画：`$form-floating-label-transform` - 禁用颜色：`$form-floating-label-disabled-color`

Saas变量补充说明：

知识点	关键点
示例	- 使用`.form-floating`包裹`<input>`和`<label>`，`<input>`必须在前 -`placeholder`必填，`<label>`通过`for`绑定`id` - 表单验证通过`.is-invalid`类实现
Textareas	- 默认高度与`<input>`相同 - 自定义高度需用（禁用`rows`属性） - 示例：`<textarea >`
选择（Selects）	- 使用`.form-select`类 - 不支持`size`和`multiple`属性 - 标签始终处于浮动状态（与输入框不同）
禁用（Disabled）	- 添加`disabled`属性使输入框灰显，阻止交互 - 适用于`<input>`、`<textarea>`、`<select>`
只读明文	- 使用`.form-control-plaintext`和`readonly`属性 - 显示为纯文本且不影响布局 - 空输入时标签仍浮动，有值时显示为明文
输入组	- 在`.input-group`内使用`.form-floating` - 验证反馈需放在`.form-floating`外、`.input-group`内（需JavaScript控制显示）
布局	- 结合网格系统（如`row g-2`和`col-md`）实现响应式布局 - 每个表单元素单独放在列中
CSS	- 依赖`.form-floating`、`.form-control`、`.form-select`等类 - 验证样式通过`.is-invalid`、`.invalid-feedback`实现
Sass变量	- 控制浮动标签的样式参数： - 高度：`$form-floating-height` - 标签动画：`$form-floating-label-transform` - 禁用颜色：`$form-floating-label-disabled-color`

4.7布局

布局 · Bootstrap v5.3 (sbox.cn)

知识点	描述	关键类	示例代码片段
表单（Forms）	默认垂直堆叠布局，使用`<form>`包裹控件	`.form-control`,`.form-label`	`<input type="text" >`
实用工具（Utilities）	用间距工具控制表单元素分组	`.mb-3`（下边距）等 margin 类	`<div >...</div>`
表单网格（Form grid）	用网格系统创建多列布局	`.row`,`.col`	`<div ><div >...</div></div>`
槽（Gutters）	控制网格列间距	`.g-*`（如`g-3`）	`<div >...</div>`
横向表单（Horizontal）	标签和控件水平排列	`.row`,`.col-form-label`,`.col-sm-*`	`<div ><label >...</div>`
水平标签大小调整	标签与输入框大小匹配	`.col-form-label-sm/lg`,`.form-control-sm/lg`	`<label >`,`<input >`
列大小调整	自定义列宽，非均匀分配	`.col-sm-7`（指定宽度）	`<div ><input...></div>`
自适应大小（Auto-sizing）	列宽根据内容自动调整	`.col-auto`,`.gy-`,`.gx-`,`.align-items-center`	`<div ><input...></div>`
内联表单（Inline forms）	响应式水平排列，移动端堆叠	`.row-cols-lg-auto`

4.8 验证器

验证器（Validation） · Bootstrap v5.3 (sbox.cn)

验证表达数据。

主题	核心描述
工作原理	- 使用CSS伪类`:invalid`和`:valid` - 父容器`.was-validated`控制激活时机 - 提交后需移除类名重置样式 - 服务端用`.is-invalid`/`.is-valid`代替伪类
自定义样式	-`<form>`添加`novalidate`禁用浏览器提示 - 结合JavaScript拦截提交事件并添加反馈 - 输入组需`.has-validation`修复边框问题
浏览器默认值	- 依赖原生浏览器验证样式 - 无法通过CSS修改样式，但支持JavaScript修改提示文本 - 不同浏览器样式差异明显
服务端验证	- 直接使用`.is-invalid`/`.is-valid`类 - 需通过`aria-describedby`关联错误信息 - 输入组需`.has-validation`类
支持的元素	- 支持控件：`.form-control`（输入框/文本域）、`.form-select`（下拉框）、`.form-check`（复选框/单选框）
工具提示	- 使用`.valid-tooltip`/`.invalid-tooltip`替代反馈框 - 父元素需`position: relative`定位工具提示
CSS变量	- v5.3新增：`--form-valid-color`、`--form-invalid-border-color`等 - 自动适配深色模式
Sass变量	- 定义边距、字体、颜色（如`$form-feedback-valid-color: $success`） - 含SVG图标数据变量
Sass混合	-`form-validation-state-selector()`：生成状态选择器逻辑 -`form-validation-state()`：生成完整验证样式（边框、图标、聚焦阴影）
Sass映射	-`$form-validation-states`定义`valid`/`invalid`状态配置（颜色、图标、工具提示背景等）
Sass循环	- 遍历`$form-validation-states`映射生成所有验证状态的CSS样式 - 修改映射可扩展自定义状态
自定义	- 通过覆盖Sass映射添加新状态（如警告状态） - 调整颜色、图标、工具提示参数，即使浏览器不支持其他状态也可通过CSS实现视觉反馈

5、组件

5.1 手风琴（可折叠控件）

手风琴 · Bootstrap v5.3 (sbox.cn)

可以长这样：

知识点	说明
工作原理	使用Collapse插件实现折叠效果，`.open`类控制初始展开项，动画受`prefers-reduced-motion`媒体查询影响
示例结构	由外层`.accordion`包裹多个`.accordion-item`，每个项包含按钮（触发折叠）和折叠内容区域
Flush样式	添加`.accordion-flush`类移除边框和圆角，使手风琴与父容器边缘对齐
始终打开模式	移除`data-bs-parent`属性，允许多个折叠项同时保持展开状态
可访问性	需遵循Collapse组件的ARIA规范，包含`aria-expanded`和`aria-controls`属性，支持键盘导航
CSS变量	v5.2+支持通过`:root`变量定制颜色、背景、过渡动画等（如`--bs-accordion-bg`定义背景色）
Sass变量	通过Sass变量深度定制样式，如`$accordion-border-width`调整边框、`$accordion-icon-transform`控制图标旋转角度

5.2 警报

警报（Alerts） · Bootstrap v5.3 (sbox.cn)

类别	子项	核心知识点
示例	现场示例	使用 JavaScript 动态生成警报，内置关闭按钮和淡出动画效果
	链接颜色(Link color)	使用`.alert-link`类为警报内的链接提供匹配的上下文颜色
	其他内容	支持添加标题、段落、分隔线（`<hr>`）和多段落内容，需配合间距工具类使用
	Icons	使用 Flexbox 工具和 Bootstrap 图标创建带图标的警报，建议使用 SVG 精灵优化重复图标
	消除警报（Dismissing）	添加`.alert-dismissible`类 + 带`data-bs-dismiss="alert"`的关闭按钮，关闭后元素从 DOM 删除。需注意键盘用户的焦点管理
CSS	变量	使用 CSS 变量实时自定义警报样式（v5.2.0 新增），例如：`--bs-alert-bg`、`--bs-alert-padding-x`
	Sass 变量	定义警报的基础样式，如`$alert-padding-y`（内边距）、`$alert-margin-bottom`（下边距）
	Sass mixin	v5.3.0 已弃用，原用`alert-variant()`生成上下文修饰类
	Sass 循环	使用`@each`循环遍历主题色生成修饰类（如`.alert-primary`），覆盖 CSS 变量实现颜色定制
JavaScript 行为	初始化	通过`new bootstrap.Alert(element)`手动初始化，或通过`data-bs-dismiss="alert"`自动初始化
	触发器（Triggers）	在关闭按钮上添加`data-bs-dismiss="alert"`，支持内部按钮或外部按钮（需额外`data-bs-target`）
	方法	-`close()`：关闭并删除元素 -`dispose()`：销毁实例 -`getInstance()`/`getOrCreateInstance()`：获取或创建实例
	事件	-`close.bs.alert`：关闭时立即触发 -`closed.bs.alert`：关闭动画完成后触发，需在此事件中处理焦点重置

5.3徽章（标记）

徽章(Badges) · Bootstrap v5.3 (sbox.cn)

可以长这样：

知识点	用途	关键类/变量	注意事项
标题	在标题中显示徽章标签	`.badge`、`.bg-secondary`	徽章通过`em`单位自动缩放，与父元素字体大小匹配
按钮	在按钮内显示计数器或状态	`.badge`、`.text-bg-secondary`	需确保辅助技术用户能理解上下文，可用`.visually-hidden`补充隐藏文本
定位	将徽章定位在按钮/元素的角落	`.position-relative`、`.position-absolute`、`.translate-middle`、`.top-0`	结合绝对定位工具类实现精确位置，可用`.rounded-circle`或`.rounded-pill`修改形状
背景颜色	快速设置背景色和对比前景色（v5.2.0+）	`.text-bg-{color}`（如`.text-bg-primary`）	颜色仅提供视觉提示，需确保内容本身含义明确
药片式徽章	创建圆角更大的胶囊形状徽章	`.rounded-pill`	需与颜色类组合使用（如`.text-bg-danger.rounded-pill`）
CSS 变量	实时自定义徽章样式（v5.2.0+）	`--badge-padding-x`、`--badge-font-size`、`--badge-border-radius`等	变量基于 Sass 设置，支持动态覆盖
Sass 变量	通过 Sass 自定义徽章基础样式	`$badge-font-size: .75em`、`$badge-padding-y: .25em`、`$badge-color: $white`

5.4面包屑（导航位置）

面包屑 · Bootstrap v5.3 (sbox.cn)

长这样：

知识点	关键内容
示例	- 使用`<nav>`包裹有序列表`<ol >`，每项为`<li >`。 - 最后一项添加`active`类和`aria-current="page"`表示当前页。 - 非最后一项用`<a>`标签包裹链接。
分隔符	- 默认分隔符：`/`，通过CSS伪元素`::before`和`--bs-breadcrumb-divider`变量实现。 - 自定义方法： - CSS：或SVG图标（需转义）。 - Sass：`$breadcrumb-divider: quote(">")`或`$breadcrumb-divider: none`（移除分隔符）。 - 支持RTL反向分隔符`$breadcrumb-divider-flipped`。
可访问性	- 需为`<nav>`添加`aria-label="breadcrumb"`。 - 当前页项添加`aria-current="page"`。 - 确保分隔符对屏幕阅读器隐藏（通过CSS伪元素实现）。
CSS变量	- 核心变量： `--bs-breadcrumb-divider`（分隔符）、 `--bs-breadcrumb-item-padding-x`（项间距）、 `--bs-breadcrumb-active-color`（当前页颜色）。 - 覆盖方法：在父元素或内联样式中直接赋值。
Sass变量	- 核心变量： `$breadcrumb-divider`（分隔符）、 `$breadcrumb-divider-color`（分隔符颜色）、 `$breadcrumb-font-size`（字体大小）。 - 修改需重新编译Sass，且支持动态RTL适配（`$breadcrumb-divider-flipped`）。

5.5按钮

按钮 · Bootstrap v5.3 (sbox.cn)

知识点	说明	示例/类名/方法
基类	基础类`.btn`设置基本样式，需与其他变体类结合使用	`<button >按钮</button>`
按钮变体	提供多种语义化颜色变体（共9种）	`btn-primary`,`btn-secondary`,`btn-success`...
禁用文本环绕	防止按钮文本换行	`.text-nowrap`或通过Sass变量`$btn-white-space: nowrap`
按钮标签	可用于`<button>`、`<a>`、`<input>`元素	`<a role="button">链接按钮</a>`
Outline buttons	无背景色的边框按钮	`btn-outline-primary`,`btn-outline-secondary`...
尺寸大小	预定义大小：大（`.btn-lg`）、小（`.btn-sm`），支持CSS变量自定义	`<button >大按钮</button>`
禁用状态	通过`disabled`属性或`.disabled`类禁用按钮	`<button disabled>禁用按钮</button>` `<a aria-disabled>`
链接功能注意事项	禁用链接需添加`tabindex="-1"`和`aria-disabled="true"`	`<a tabindex="-1" aria-disabled>禁用链接</a>`
块按钮	使用栅格系统创建全宽响应式按钮	`<div >` `<button >块按钮</button></div>`
按钮插件	通过JavaScript实现交互功能（如切换状态）	`data-bs-toggle="button"`
切换状态	按钮的激活状态（active）	`<button data-bs-toggle="button">切换按钮</button>`
方法	JavaScript控制按钮的方法	`toggle()`,`dispose()`,`getInstance()`
CSS变量	动态自定义按钮样式（如内边距、颜色等）	`--bs-btn-padding-y`,`--bs-btn-bg`
Sass变量	通过Sass配置按钮参数（如字体、边框、阴影等）	`$btn-padding-y`,`$btn-border-radius`,`$btn-transition`
Sass混合	快速生成按钮变体的混合函数	`@include button-variant()`,`@include button-outline-variant()`
Sass循环	自动生成所有主题色对应的按钮类	遍历`$theme-colors`生成`btn-`和`btn-outline-`类

5.6按钮组

按钮组 · Bootstrap v5.3 (sbox.cn)

知识点	结构/类	关键特性	注意事项	示例代码简写
基本示例	`<div >`+`.btn`	按钮水平排列，需添加`role="group"`和`aria-label`	必须为辅助技术提供明确的组标签	`<div role="group" aria-label="...">`+ 多个`.btn`
混合样式	不同按钮类混合使用（如`.btn-danger`,`.btn-warning`）	允许不同颜色/样式的按钮组合	确保视觉一致性	`<button >`,`<button >`
分级显示样式	使用 Outline 样式（`.btn-outline-*`）	按钮边框样式，背景透明	适用于需要轻量级设计的场景	`<button >`
复选框/单选组	`<input type="checkbox/radio">`+`<label>`配合`.btn-check`和`.btn`	将表单控件伪装成按钮组	`input`需隐藏，`label`绑定`for`属性，关闭自动补全	`<input type="checkbox" >`+`<label for="...">`
按钮工具栏	`<div >`包含多个`.btn-group`	组合多个按钮组，支持间距工具类（如`.me-2`）	需为工具栏和每个子组添加`role`和`aria-label`	`<div role="toolbar">`+ 多个嵌套`.btn-group`
调整尺寸	在父容器添加`.btn-group-lg`/`.btn-group-sm`	统一调整组内所有按钮大小	无需单独为每个按钮设置尺寸类	`<div >`
嵌套	在`.btn-group`中嵌套另一个`.btn-group`（如下拉菜单）	实现复杂交互（如按钮与下拉菜单混合）	下拉菜单需要配合`dropdown-toggle`和`dropdown-menu`	`<div >`+ 嵌套`<div >`+ 下拉菜单代码
垂直变化	使用`.btn-group-vertical`	按钮垂直堆叠	不支持水平方向的下拉菜单分割	`<div >`+ 多个垂直排列的`.btn`

5.7卡片

卡片 · Bootstrap v5.3 (sbox.cn)

学习链接	知识点总结
示例	展示基础卡片结构，包含图片、标题、文本和按钮的混合内容
内容类型
- 主体（Body）	使用`.card-body`类定义卡片内容区域
- 标题/文本/链接	使用`.card-title`、`.card-text`、`.card-link`类设置标题、文本和链接样式
- 图片（Images）	`.card-img-top`/`.card-img-bottom`在卡片顶部/底部添加图片
- 列表组	将`.list-group`与`.list-group-flush`结合使用创建无边框列表
- Kitchen sink	综合示例，包含图像、文本、列表组和链接的复杂卡片结构
- 页眉和页脚	使用`.card-header`和`.card-footer`类添加头部/底部区域
调整尺寸
- 使用网格标记	通过网格系统（如`.row`和`.col`）控制卡片布局
- 使用实用程序	应用`.w-75`、`.w-50`等宽度工具类调整卡片尺寸
- 自定义CSS	通过行内样式或自定义CSS设置固定宽度（如）
文本对齐方式	使用`.text-start`、`.text-center`、`.text-end`类控制内容对齐
导航	在页眉中集成导航组件（如`.nav-tabs`/`.nav-pills`），需配合`.card-header-tabs`类
图片处理
- 图像上限	图片作为独立元素置于卡片顶部/底部
- 图像叠加	使用`.card-img-overlay`在图片上方叠加文本内容
- 水平布局	通过网格实现横向排列（`.row`+图片列与内容列）
卡片样式
- 背景和颜色	使用`.text-bg-{color}`类组合设置背景色与文本对比色
- 边框	使用`.border-{color}`类自定义边框颜色
- Mixins utilities	通过`.bg-transparent`等工具类混合使用透明背景/边框样式
卡片布局
- 卡片组	使用`.card-group`创建等宽等高的卡片组
- 网格卡片	结合网格系统（`.row-cols-*`）创建响应式卡片布局
- 砌体布局	需使用Masonry插件实现瀑布流布局（非Bootstrap内置功能）
CSS相关
- 变量	通过CSS变量自定义间距、边框、颜色等属性（如`--bs-card-spacer-y`）
- Sass变量	使用Sass变量（如`$card-border-radius`）深度定制卡片样式

5.8轮播

轮播（Carousel） · Bootstrap v5.3 (sbox.cn)

知识点	说明	示例/关键点
工作原理	基于CSS 3D转换和JS构建，需手动初始化（构造函数或`data-bs-ride`属性）	同时使用`data-bs-ride`和构造函数初始化会冲突
基本示例	包含轮播容器、轮播项、控制按钮的完整结构	`<div >`+`carousel-inner`+`carousel-item active`
指示器	通过按钮标记添加幻灯片跳转点	`<div >`+`data-bs-slide-to`索引值
字幕	在轮播项中添加带响应式隐藏的说明文字	`<div >`
交叉淡入淡出	使用淡入淡出过渡效果替代滑动效果	添加`carousel-fade`类，可能需要`bg-body`背景色
自动播放轮播	通过`data-bs-ride`属性控制自动播放	`data-bs-ride="carousel"`（立即启动） /`data-bs-ride="true"`（首次交互后启动）
单个项目间隔	为特定幻灯片定义独立切换间隔	在`.carousel-item`上使用`data-bs-interval="毫秒值"`（会覆盖全局设置）
无控件自动播放	省略控制按钮的极简轮播	仅保留`carousel-inner`结构，仍需`data-bs-ride`属性
禁用触摸滑动	禁用移动端滑动交互	添加`data-bs-touch="false"`属性
深色变体	已弃用，改用颜色模式	使用`data-bs-theme="dark"`替代`carousel-dark`类（v5.3.0+）
自定义过渡	通过Sass变量修改动画时间	`$carousel-transition-duration: .6s;`（需先定义transform过渡）
CSS	关键样式类定义轮播布局	`.carousel-inner`（容器）、`.carousel-item`（项）、`.active`（激活状态）
Sass变量	定制化设计参数	控制颜色(`$carousel-control-color`)、指示器尺寸(`$carousel-indicator-width`)等
数据属性用法	通过HTML属性控制行为	`data-bs-target`（目标ID）、`data-bs-slide`（prev/next）、`data-bs-interval`（间隔）
JavaScript初始化	编程式控制轮播实例	`const carousel = new bootstrap.Carousel(element, { interval: 5000 })`
选项	配置轮播行为参数	interval（间隔）、keyboard（键盘控制）、pause（悬停暂停）、wrap（循环模式）、touch（触摸控制）等
方法	控制轮播操作	cycle()（开始循环）、pause()（暂停）、to(index)（跳转）、dispose()（销毁实例）等
事件	监听轮播状态变化	slide.bs.carousel（切换前触发）、slid.bs.carousel（切换后触发），含direction/from/to等事件参数

5.9 关闭按钮

关闭按钮 · Bootstrap v5.3 (sbox.cn)

知识点	说明	属性/变量	注意事项
禁用状态	禁用时降低透明度，禁用交互事件	`disabled`属性 `opacity`、`pointer-events: none`、`user-select: none`	需配合`aria-label`确保可访问性
深色变体	通过主题切换关闭按钮颜色（默认白色）	`data-bs-theme="dark"`（父元素或自身） `filter`属性	v5.3.0弃用`.btn-close-white`类，改用主题切换
CSS变量	本地CSS变量实现动态样式控制（v5.3.0新增）	`--bs-btn-close-color` `--bs-btn-close-bg` `--bs-btn-close-opacity`等	变量值继承自Sass设置，支持实时自定义
Sass变量	通过Sass变量定制关闭按钮基础样式	`$btn-close-width`（尺寸） `$btn-close-color`（颜色） `$btn-close-bg`（背景图）	需在编译前修改，如`$btn-close-bg`使用SVG数据URI

5.10 折叠

折叠（Collapse） · Bootstrap v5.3 (sbox.cn)

手风琴就是基于折叠做的。

分类	关键点
工作原理	通过切换类改变元素高度（默认）或宽度（水平）。动画依赖`prefers-reduced-motion`。不可在折叠元素上使用`padding`，需用独立包装元素。
示例	使用`<button>`或`<a>`标签，需`data-bs-toggle="collapse"`+`data-bs-target`（按钮）或`href`（链接）指向目标元素的 ID。
水平折叠	添加`.collapse-horizontal`类，子元素设置固定宽度（如`width: 300px;`）。需容器设置`min-height`避免布局问题。
多个切换和目标	单个按钮/链接可控制多个元素（通过 CSS 选择器），多个按钮可控制同一元素。使用`.multi-collapse`类实现多元素同时切换。
可访问性	必须为触发器添加`aria-expanded`表示状态，非按钮元素需加`role="button"`。目标元素需通过`aria-controls`关联 ID。
CSS	`.collapse`隐藏内容；`.collapse.show`显示内容；`.collapsing`处理过渡动画。
Sass 变量	`$transition-collapse: height .35s ease;` `$transition-collapse-width: width .35s ease;`
类	`.collapse`（隐藏）、`.collapse.show`（显示）、`.collapsing`（动画中）、`.collapse-horizontal`（水平模式）。
用法（数据属性）	通过`data-bs-toggle="collapse"`+`data-bs-target="#id"`或`href="#id"`触发。父级控制用`data-bs-parent="#selector"`（手风琴效果）。
用法（JavaScript）	初始化：`new bootstrap.Collapse(element, options)`。可配置选项如`parent`（父级选择器）和`toggle`（初始状态）。
选项	`parent: null`（父级元素，用于关闭同级折叠） `toggle: true`（是否切换状态）。
方法	`show()`/`hide()`显示/隐藏元素 `toggle()`切换状态 `dispose()`销毁实例 `getInstance()`/`getOrCreateInstance()`获取或创建实例。
事件	`show.bs.collapse`（显示前） `shown.bs.collapse`（显示后） `hide.bs.collapse`（隐藏前） `hidden.bs.collapse`（隐藏后）。

5.11 下拉菜单

下拉菜单 · Bootstrap v5.3 (sbox.cn)

分类	知识点	描述/关键点
概述	基础特性	基于 Popper 的动态定位，点击触发（非悬停），需包含 Popper JS 文件
可访问性	ARIA 标准	推荐使用`role="menu"`，支持键盘导航（方向键、Esc 键）
示例	单个按钮	使用`.dropdown-toggle`和`.dropdown-menu`结构
	拆分按钮	添加`.dropdown-toggle-split`类调整间距
	调整尺寸	使用`.btn-lg`、`.btn-sm`类控制按钮大小
	深色下拉菜单（已弃用）	使用`.dropdown-menu-dark`（v5.3 后建议改用`data-bs-theme="dark"`）
方向	居中	`.dropdown-center`类使菜单居中
	下拉方向	`.dropup`（向上）、`.dropend`（右）、`.dropstart`（左）类控制方向
	下拉居中	`.dropup-center`向上居中显示菜单
菜单项	Active 状态	`.active`类 +`aria-current="true/page"`
	禁用状态	`.disabled`类禁用交互
菜单对齐	响应式对齐	`data-bs-display="static"`+`.dropdown-menu-{breakpoint}-{start/end}`类
	右对齐	`.dropdown-menu-end`类（RTL 模式下镜像）
菜单内容	标题	使用`<h6 >`
	分隔符	`<hr >`
	文本段落	直接在`.dropdown-menu`中添加文本和间距工具类
	表单	在菜单中嵌入表单控件，使用`.px-4.py-3`等内边距调整
下拉选项	自动关闭行为	`data-bs-auto-close="true/inside/outside/false"`控制点击区域关闭行为
CSS	变量	使用`--bs-dropdown-*`自定义颜色、间距、阴影等样式
	Sass 变量	修改`$dropdown-*`变量定制主题（如`$dropdown-min-width`）
	Sass 混合	使用`@mixin caret-*`生成不同方向的下拉箭头
用法	数据属性	`data-bs-toggle="dropdown"`触发菜单
	JavaScript 初始化	`new bootstrap.Dropdown(element, options)`
	Popper 配置	通过函数自定义`popperConfig`，合并默认配置
方法	显示/隐藏/切换	`.show()`、`.hide()`、`.toggle()`方法控制菜单状态
	更新位置	`.update()`动态调整菜单位置
事件	交互事件	`show.bs.dropdown`（开始显示）、`shown.bs.dropdown`（显示完成）等生命周期事件

5.12 列表组

列表组 · Bootstrap v5.3 (sbox.cn)

知识点	说明	示例代码/类名
基本示例	使用无序列表和`.list-group`基础结构	`<ul ><li >`
活动项	通过`.active`类高亮当前选项	`<li aria-current="true">`
禁用项	用`.disabled`类显示禁用状态	`<li aria-disabled="true">`
链接和按钮	使用`<a>/<button>`+`.list-group-item-action`实现交互	`<a >`
冲洗（Flush）	移除边框和圆角	`<ul >`
编号	使用`.list-group-numbered`+`<ol>`生成序号	`<ol >`
水平排列	响应式水平布局	`.list-group-horizontal{-sm\|md\|lg\|xl\|xxl}`
变体	颜色上下文类	`.list-group-item-primary.list-group-item-success`等
带徽章	结合flex布局和徽章组件	`<span >14</span>`
自定义内容	自由组合排版元素	使用`d-flex`+`justify-content-between`等工具类
复选框/单选	内嵌表单控件	`<input >`+`<label>`
CSS变量	自定义样式属性	`--bs-list-group-bg--bs-list-group-active-color`等
Sass变量	主题定制参数	`$list-group-bg: var(--bs-body-bg);`
Sass混合	生成变体类（v5.3弃用）	`@mixin list-group-item-variant()`
Sass循环	自动生成颜色变体	`@each $state in map-keys($theme-colors)`
JavaScript行为	实现选项卡功能	`data-bs-toggle="list"`
淡入效果	添加过渡动画	`<div >`
方法	控制选项卡的API	`show()dispose()getInstance()`
事件	选项卡切换触发事件	`shown.bs.tabhidden.bs.tab`

5.13 模态

模态（Modal） · Bootstrap v5.3 (sbox.cn)

知识点	说明
工作原理	基于 HTML/CSS/JS，使用`position: fixed`，不支持嵌套，移动端需注意渲染，禁用页面滚动，需自定义焦点逻辑。
示例	静态模态结构包含`modal-header`、`modal-body`（必须带 padding）、`modal-footer`（可选）。
模态组件	基础结构：`<div >`包含`modal-dialog`和`modal-content`，标题建议用`<h1>`。
现场演示	通过按钮的`data-bs-toggle="modal"`和`data-bs-target`触发动态模态。
静态背景	添加`data-bs-backdrop="static"`防止点击外部关闭，需手动关闭按钮。
滚动长内容	自动视口滚动，或添加`modal-dialog-scrollable`类实现模态内部滚动。
垂直居中	向`modal-dialog`添加`modal-dialog-centered`类实现垂直居中。
工具提示和弹出框	模态内可放置 Tooltip/Popover，关闭模态时自动关闭其内部提示组件。
使用网格	在`modal-body`内使用`container-fluid`和网格系统类（如`row`、`col-*`）。
不同的模态内容	通过`event.relatedTarget`和`data-bs-*`属性动态修改模态内容（如不同触发按钮显示不同信息）。
在模态之间切换	通过`data-bs-target`指向不同模态 ID 实现切换（同一时间仅一个模态可见）。
Change animation	修改 CSS 变量`$modal-fade-transform`和`$modal-show-transform`自定义动画效果（如缩放）。
删除动画	移除模态容器的`.fade`类禁用淡入动画。
动态高度	模态高度变化时调用`myModal.handleUpdate()`重新计算位置。
可及性	必须添加`aria-labelledby`关联标题，JS 自动添加`role="dialog"`，支持`prefers-reduced-motion`。
嵌入优酷视频	需额外 JS 控制视频播放（非 Bootstrap 内置功能）。
可选尺寸	通过类修饰符设置模态宽度：`modal-sm`（300px）、默认（500px）、`modal-lg`（800px）、`modal-xl`（1140px）。
全屏模态	添加类如`modal-fullscreen-sm-down`实现断点响应式全屏覆盖。
CSS 变量	支持动态自定义模态样式（如`--bs-modal-width`、`--bs-modal-bg`）。
Sass 变量	通过 Sass 变量（如`$modal-md`、`$modal-backdrop-opacity`）深度定制样式。
Sass loop	使用循环生成响应式全屏模态类（如不同断点下的`modal-fullscreen-*-down`）。
用法	通过数据属性或 JavaScript 控制模态行为。
通过数据属性切换	按钮设置`data-bs-toggle="modal"`和`data-bs-target="#id"`触发模态。
解除（Dismiss）	添加`data-bs-dismiss="modal"`到关闭按钮（内部或外部需配合`data-bs-target`）。
通过 JavaScript	使用`new bootstrap.Modal(element, options)`创建实例，支持链式操作。
选项	支持`backdrop`（true/static）、`focus`（自动聚焦）、`keyboard`（ESC 关闭）等选项。
方法	`show()`/`hide()`/`toggle()`控制显示，`handleUpdate()`调整动态高度，`dispose()`销毁实例。
传递选项	可通过数据属性（`data-bs-*`）或构造函数传递选项（如`{keyboard: false}`）。
事件	生命周期事件：`show.bs.modal`（开始显示）、`shown.bs.modal`（显示完成）、`hidePrevented.bs.modal`等。

5.14 导航栏

导航栏 · Bootstrap v5.3 (sbox.cn)

知识点	核心内容
工作原理	- 需要`.navbar`+ `.navbar-expand{-sm
支持的内容	`.navbar-brand`（品牌）、`.navbar-nav`（导航）、`.navbar-toggler`（折叠按钮）、`.navbar-text`（文本）、`.navbar-collapse`（折叠内容）
品牌	- 文本品牌直接使用`.navbar-brand`类 - 图像品牌用`<img>`标签替换文本 - 图像+文本需搭配`.d-inline-block`对齐
导航	- 基于`.nav`构建，需`.nav-link`修饰 - 支持下拉菜单（需嵌套结构） - 可脱离列表结构使用`<div>`实现导航
表单	- 使用`.d-flex`布局表单控件 - 支持输入框、按钮组 - 可结合`.input-group`实现复杂表单布局
文本	- 用`.navbar-text`包裹文本 - 自动垂直居中，支持与导航项混合排版
配色方案	- v5.3弃用`.navbar-dark`改用`data-bs-theme="dark"` - 通过`.bg-*`工具类设置背景色 - 深色模式需覆盖CSS变量
容器	- 外层可用`.container`或`.container-fluid` - 响应式容器类（如`.container-md`）控制内容宽度
放置	- 定位类：`fixed-top`、`fixed-bottom`、`sticky-top` - 固定定位需添加body padding避免内容遮挡
滚动	- 添加`.navbar-nav-scroll`启用折叠内容滚动 - 通过`--bs-scroll-height`自定义滚动区域高度
响应式行为	- `.navbar-expand{-sm
切换	- 切换器位置自动右对齐（跟随`.navbar-brand`） - 可通过HTML顺序调整左右位置
外部内容	- 用`data-bs-target`控制外部容器折叠 - 需JavaScript辅助焦点管理 - 需添加`aria-controls`属性
画布外	- 结合Offcanvas组件实现侧边抽屉导航 - 深色主题需`.text-bg-dark`+`.dropdown-menu-dark`适配样式
CSS变量	控制内边距（`--bs-navbar-padding-x/y`）、颜色（`--bs-navbar-color`）、切换器图标（`--bs-navbar-toggler-icon-bg`）等
Sass变量	定义导航栏基础样式：`$navbar-padding-y`、`$navbar-brand-font-size`、`$navbar-light-color`等
Sass loop	通过循环生成`.navbar-expand-*`响应式类，自动应用`flex`布局和媒体查询断点

5.15 导航和选项卡

导航和选项卡 · Bootstrap v5.3 (sbox.cn)

类别	描述
基本导航	使用`.nav`类构建Flexbox布局，支持活动状态（`.active`）和禁用状态（`.disabled`）。通过`aria-current="page"`增强辅助技术识别。支持`<ul>`、`<ol>`或`<nav>`容器。
可用样式	通过修饰符类切换样式：`.nav-tabs`（选项卡）、`.nav-pills`（药片式）、`.nav-underline`（下划线）。
水平对齐	使用Flexbox工具类：`.justify-content-center`（居中）、`.justify-content-end`（右对齐）。默认左对齐。
垂直	添加`.flex-column`类实现垂直堆叠，支持响应式（如`.flex-sm-column`）。
选项卡	使用`.nav-tabs`类，结合JavaScript实现动态内容切换。活动选项卡需添加`.active`类，禁用项用`.disabled`。
药片式（Pills）	使用`.nav-pills`类，样式为圆角按钮。活动状态高亮显示，禁用项同理。
下划线	使用`.nav-underline`类，底部边框高亮当前选项卡。v5.3新增。
填充和调整	- 填充（Fill）：`.nav-fill`按比例分配空间，宽度不等。 - 等宽调整（Justify）：`.nav-justified`等宽分配。
使用Flex实用程序	结合响应式Flex类实现布局，如`.flex-sm-row`（水平排列）和`.flex-sm-fill`（填充宽度）。例如：`nav nav-pills flex-column flex-sm-row`。
关于可访问性	- 使用`<nav>`或`role="navigation"`。 - 动态选项卡需正确使用`role="tablist"`、`role="tab"`和`role="tabpanel"`。 - 禁用选项卡需`aria-disabled="true"`。
使用下拉列表	在导航项内嵌套`.dropdown-menu`，通过`.dropdown-toggle`触发。
带下拉的选项卡	选项卡中嵌入下拉菜单，结构为：`.nav-tabs`+`.dropdown`，需添加`data-bs-toggle="dropdown"`。
药片式下拉菜单	类似选项卡下拉，但使用`.nav-pills`样式。
CSS变量	v5.2+ 支持自定义变量，如`--bs-nav-link-padding-x`（水平内边距）、`--bs-nav-tabs-border-color`（选项卡边框颜色）等。
Sass变量	通过Sass变量定制样式，如`$nav-link-padding-y`（垂直内边距）、`$nav-pills-link-active-bg`（药片式活动背景色）等。
JavaScript行为	通过`data-bs-toggle="tab"`或`data-bs-toggle="pill"`激活动态内容。需配合`.tab-content`和`.tab-pane`。
使用数据属性	直接在HTML中通过`data-bs-target="#id"`指定关联的内容面板。
通过JavaScript	手动初始化：`new bootstrap.Tab(element)`，调用`show()`方法切换选项卡。
淡入淡出效果	为`.tab-pane`添加`.fade`类，初始活动面板需同时有`.show`类（如`.fade.show.active`）。
方法	-`show()`：激活选项卡。 -`dispose()`：销毁实例。 -`getInstance()`/`getOrCreateInstance()`：获取或创建实例。
事件	-`show.bs.tab`/`shown.bs.tab`：切换前/后触发。 -`hide.bs.tab`/`hidden.bs.tab`：隐藏前/后触发。通过`event.relatedTarget`和`event.target`访问新旧选项卡。

5.16 画布

画布外（Offcanvas） · Bootstrap v5.3 (sbox.cn)

Offcanvas 是一个侧边栏组件，可以通过 JavaScript 切换，使其从视口的左、右、上或下边缘显示。

分类	知识点	描述/特性	相关类/属性/方法
工作原理	基本机制	侧边栏组件，通过JS触发显示/隐藏，共享模态框代码逻辑，动画支持减少运动设置	`.offcanvas`,`data-bs-toggle="offcanvas"`,`prefers-reduced-motion`
示例	Offcanvas 组件	包含标题、关闭按钮和内容区的默认结构	`.offcanvas-start.show`,`.offcanvas-header`,`.offcanvas-body`
	现场演示	通过按钮/链接触发显示，支持动态交互内容	`data-bs-target`,`href`, 嵌套下拉菜单
	正文滚动	允许背景页面滚动	`data-bs-scroll="true"`,`data-bs-backdrop="false"`
	正文滚动+背景	同时启用背景和滚动	`data-bs-scroll="true"`（默认背景）
	静态背景	点击外部不关闭	`data-bs-backdrop="static"`
	深色 offcanvas	v5.3弃用，改用颜色模式	`.text-bg-dark`,`btn-close-white`,`data-bs-theme="dark"`
响应式	响应断点	根据视口尺寸自动隐藏/显示	`.offcanvas-{sm/md/lg/xl/xxl}`
放置位置	定位方向	支持四个显示方向	`.offcanvas-{start/end/top/bottom}`
可访问性	ARIA 规范	必须包含标题关联，自动添加 dialog 角色	`aria-labelledby="id"`, 自动添加`role="dialog"`
CSS	变量	控制尺寸/颜色/动画等样式	`--bs-offcanvas-width`,`--bs-offcanvas-bg`,`--bs-offcanvas-transition`
	Sass 变量	定义组件默认样式参数	`$offcanvas-horizontal-width`,`$offcanvas-bg-color`,`$offcanvas-box-shadow`
用法	数据属性-切换	通过属性触发显示	`data-bs-toggle="offcanvas"`,`data-bs-target`/`href`
	数据属性-关闭	通过按钮关闭	`data-bs-dismiss="offcanvas"`
	JavaScript 初始化	手动创建实例	`new bootstrap.Offcanvas(element)`
选项	backdrop	背景控制（true/static）	默认 true，static 时点击外部不关闭
	keyboard	Esc 键关闭	默认 true
	scroll	允许背景滚动	默认 false
方法	show()	显示组件	返回 Promise，触发 shown 事件前返回
	hide()	隐藏组件	返回 Promise，触发 hidden 事件前返回
	toggle()	切换显示状态	根据当前状态自动切换
事件	show.bs.offcanvas	显示开始时触发	可用于预加载内容
	shown.bs.offcanvas	显示动画完成时触发	可用于交互初始化
	hide.bs.offcanvas	隐藏开始时触发	可用于保存状态
	hidden.bs.offcanvas	隐藏动画完成时触发	可用于清理资源

5.17 分页

分页（Pagination） · Bootstrap v5.3 (sbox.cn)

知识点	要点	注意事项
概述	- 使用`<nav>`包裹无序列表`<ul >`	- 必须添加`aria-label`描述导航用途（如`aria-label="Search results pages"`）
	- 通过`<li >`和`<a >`构建分页链接	- 确保屏幕阅读器兼容性
使用图标	- 用`<span aria-hidden="true">`隐藏图标符号（如`«`）	- 必须为图标添加`aria-label`（如`aria-label="Previous"`）
禁用和活动状态	-`.disabled`禁用不可点击项，`.active`高亮当前页	- 禁用项需加`tabindex="-1"`并移除`href`或改用`<span>`标签
	- 活动项建议添加`aria-current="page"`	- 禁用状态需配合JavaScript彻底禁用交互
尺寸大小	- 添加`.pagination-lg`或`.pagination-sm`控制分页大小	- 影响内边距、字体大小和边框圆角
对齐	- 使用Flex工具类：`.justify-content-center`居中，`.justify-content-end`右对齐	- 直接应用在`<ul >`上
CSS变量	- v5.2+支持，如`--bs-pagination-color`、`--bs-pagination-bg`等	- 通过覆盖变量实时自定义颜色、背景、边框等样式
Sass变量	- 定义基础样式：`$pagination-padding-x`、`$pagination-font-size`等	- 修改后需重新编译Bootstrap
Sass mixins	-`@include pagination-size()`调整分页尺寸（内边距、字体大小、圆角）	- 用于自定义分页大小变体

5.18 占位符

占位符 · Bootstrap v5.3 (sbox.cn)

使用组件或页面的加载占位符来指示某些内容可能仍在加载，比如文字先不显示文字，先模糊显示。

分类	说明
示例	通过占位符替换卡片组件中的文本，使用`.placeholder`和网格类（如`.col-6`），并添加`aria-hidden="true"`隐藏屏幕阅读器。示例包含加载动画和禁用按钮的占位符。
工作原理	- 使用`.placeholder`类与网格列类（如`.col-6`）定义占位符宽度。 - 通过`::before`伪元素处理按钮高度，可添加` `占位空格保持高度。 - 需JavaScript切换可见性，并用`aria-hidden`控制辅助技术访问。
宽度	支持三种方式调整宽度： 1. 网格类（如`.col-6`） 2. 实用类（如`.w-75`） 3. 内联样式（如）。
颜色	- 默认使用`currentColor`，可通过背景实用类覆盖： `.bg-primary`,`.bg-secondary`,`.bg-success`,`.bg-danger`,`.bg-warning`,`.bg-info`,`.bg-light`,`.bg-dark`。
尺寸大小	基于父元素排版，支持修饰符类： -`.placeholder-lg`（大） -`.placeholder-sm`（小） -`.placeholder-xs`（极小）。
动画	-`.placeholder-glow`：渐变发光效果。 -`.placeholder-wave`：波浪形动画。将动画类添加到父元素（如`<p>`），子占位符自动继承。
CSS	通过伪元素（如`::before`）处理占位符样式，例如按钮高度。占位符高度和颜色依赖父元素或自定义类。
Sass变量	文档未明确列出，但通常包含以下变量： -`$placeholder-color`（颜色） -`$placeholder-bg`（背景色） -`$placeholder-opacity`（透明度） -`$placeholder-height`（基础高度） -`$placeholder-animation-duration`（动画时长）。

5.19 弹窗

弹出框 · Bootstrap v5.3 (sbox.cn)

知识点	描述
概述	依赖 Popper 库进行定位，需在 Bootstrap 前引入；需手动初始化；标题和内容不能为空；建议设置`container: 'body'`避免渲染问题；禁用元素需通过包装元素触发。
示例	通过`data-bs-title`和`data-bs-content`设置标题和内容；使用按钮触发弹出框。
启用弹出框	通过 JavaScript 初始化： `document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el))`。
四个方向	使用`data-bs-placement`设置方向：`top`（默认）、`right`、`bottom`、`left`（RTL 布局下方向反转）。
自定义 container	通过`container`选项指定父容器（如`body`或`.modal-body`），解决样式冲突或模态框中的焦点问题。
自定义弹出框	通过 CSS 变量覆盖样式： `--bs-popover-max-width`、`--bs-popover-header-bg`等，配合`data-bs-custom-class`应用自定义类。
下次单击时关闭	使用`data-bs-trigger="focus"`，需用`<a>`标签并设置`tabindex="0"`。
禁用元素	通过包装元素（如`<span>`）触发禁用按钮的弹出框，设置`data-bs-trigger="hover focus"`和`tabindex="0"`。
CSS 变量	支持通过变量自定义样式，如`--bs-popover-border-color`（边框颜色）、`--bs-popover-body-padding-x`（内边距）等。
Sass 变量	提供 Sass 变量控制样式，如`$popover-max-width`（最大宽度）、`$popover-header-bg`（标题背景色）等。
用法	通过`new bootstrap.Popover(element, options)`初始化；优先用于交互式元素（如按钮、链接）。
选项	关键选项： -`placement`：定位方向 -`trigger`：触发方式（`click`/`hover`/`focus`/`manual`） -`html`：允许 HTML 内容 -`delay`：显示/隐藏延迟。
将函数与 popperConfig	通过函数自定义 Popper 配置： `popperConfig(defaultConfig) { return newConfig }`。
方法	常用方法： -`show()`/`hide()`：显示/隐藏 -`toggle()`：切换状态 -`dispose()`：销毁实例 -`setContent()`：动态更新内容。
事件	关键事件： -`show.bs.popover`：显示前触发 -`shown.bs.popover`：显示完成 -`hide.bs.popover`：隐藏前触发 -`hidden.bs.popover`：隐藏完成。

5.20 进度条

进度条(Progress) · Bootstrap v5.3 (sbox.cn)

知识点	实现方式	关键类/属性	注意事项
工作原理	由外层`.progress`容器和内层`.progress-bar`元素构成	`.progress`作为包装器，`.progress-bar`作为视觉条	必须添加`role="progressbar"`和`aria`属性确保可访问性；旧结构已弃用需迁移
进度条尺寸
- 宽度	通过工具类或内联样式设置`.progress-bar`的宽度	`w-{数值}`工具类（如`w-75`）或	宽度值需与`aria-valuenow`属性同步
- 高度	在`.progress`容器上设置`height`属性	（直接定义外层容器高度）	内层`.progress-bar`自动适应容器高度
标签	在`.progress-bar`内添加文本	直接在元素内写入文本（如`<div >25%</div>`）	使用`.overflow-visible`和`.text-dark`解决溢出问题；需保证颜色对比度
背景	使用背景工具类修改颜色	`.bg-{color}`（如`.bg-success`）或`.text-bg-{color}`（组合类）	深色背景需搭配浅色文字（默认白色），浅色背景需手动添加`.text-dark`
多个进度条	使用`.progress-stacked`包裹多个`.progress`容器	外层`<div >`，每个子项为独立`.progress`容器	宽度需设置在`.progress`容器上（而非`.progress-bar`）
条纹	添加条纹效果	`.progress-bar-striped`类	需搭配背景颜色类使用（如`.bg-success.progress-bar-striped`）
动画条纹	为条纹添加动画	`.progress-bar-animated`类	必须同时使用`.progress-bar-striped`；动画速度由`$progress-bar-animation-timing`Sass变量控制
CSS变量	通过 CSS 变量实时自定义样式（v5.2.0+）	`--bs-progress-height`,`--bs-progress-bg`等	变量定义在`.progress`容器上，覆盖时需注意层级
Sass变量	通过 Sass 定制进度条样式	`$progress-height`,`$progress-bg`,`$progress-bar-bg`等	修改后需重新编译 Bootstrap
Keyframes	定义条纹动画效果（`@keyframes progress-bar-stripes`）	包含在`scss/_progress-bar.scss`中	仅在使用`.progress-bar-animated`时生效；依赖`$enable-transitions`配置

5.21 滚动

滚动（Scrollspy） · Bootstrap v5.3 (sbox.cn)

分类	关键点
工作原理	- 当锚点对应的元素滚动到视图中时，在关联的导航元素上切换`.active`类 - 需要两个元素：导航组件（含锚点）和可滚动容器（需设置`data-bs-spy`和`data-bs-target`） - 不可见的目标元素会被忽略
示例
- 导航栏	使用`<nav>`和`<div data-bs-spy>`结构，支持下拉菜单高亮
- 嵌套导航	嵌套的`.nav`激活时，父级也会激活`.active`类
- 列表组	结合`.list-group`组件，滚动时高亮对应列表项
- 简单锚点	不限于导航组件，任何`<a>`元素均可使用
- 不可见元素	初始化后不可见的目标元素需调用`refresh()`方法更新
用法
- 通过数据属性	在可滚动容器添加`data-bs-spy="scroll"`和`data-bs-target="#navId"`
- 通过 JavaScript	创建实例：`new bootstrap.ScrollSpy(element, { target: '#navId' })`
选项
-`rootMargin`	string \|`0px 0px -25%`
-`smoothScroll`	boolean \|`false`
-`target`	string/Element \|`null`
-`threshold`	array \|`[0.1, 0.5, 1]`
方法
-`refresh()`	更新 Scrollspy 实例以检测新元素
-`dispose()`	销毁实例
事件
`activate.bs.scrollspy`	当新锚点被激活时触发

5.22 旋转（转圈圈）

微调器（Spinners） · Bootstrap v5.3 (sbox.cn)

知识点	描述	示例/关键点
边框微调器	通过旋转边框实现加载动画的组件	`<div role="status">...</div>`
颜色	使用文本颜色类（如`text-primary`）自定义颜色，依赖`currentColor`	避免使用`border-color`（部分边框为透明）
增长微调器	通过缩放效果实现加载动画的组件	`<div role="status">...</div>`
对齐	使用Flex、浮动或文本对齐工具控制微调器的位置
- 边距	使用边距工具类（如`m-5`）调整间距	`<div >...</div>`
- 放置	通过Flex布局、浮动或文本对齐实现精准定位
- Flex	使用Flex工具居中或对齐微调器	`<div >...</div>`
- 浮动	使用浮动工具（如`float-end`）定位	`<div >...</div>`
- 文本对齐	通过文本对齐工具（如`text-center`）居中	`<div >...</div>`
大小	使用`.spinner-border-sm`或自定义CSS调整尺寸	`<div >...</div>`
按钮	在按钮内集成微调器，需禁用按钮并添加辅助文本	`<button disabled><span >...</button>`
CSS变量	通过CSS变量动态控制微调器样式（如宽度、动画速度）	`--spinner-width: 3rem;`（覆盖默认值）
Sass变量	通过Sass变量全局修改微调器参数（如尺寸、边框宽度）	`$spinner-width: 2rem;`（需重新编译）
Keyframes	定义动画关键帧（`spinner-border`旋转，`spinner-grow`缩放）	`@keyframes spinner-border { to { transform: rotate(360deg); } }`

5.23 通知

Toasts · Bootstrap v5.3 (sbox.cn)

知识点	关键描述
概述	Toast是轻量级通知，需手动初始化（性能优化）。默认自动隐藏（`autohide: true`），动画支持`prefers-reduced-motion`媒体查询。
基本示例	必须包含关闭按钮（`data-bs-dismiss="toast"`），建议使用`toast-header`和`toast-body`结构。默认位置需通过CSS或工具类调整（如`position-fixed`）。
现场示例	使用JavaScript触发显示：`bootstrap.Toast.getOrCreateInstance(element).show()`，通过按钮点击事件绑定。
半透明	通过默认的CSS背景透明度实现（`background-color: rgba(var(--body-bg-rgb), .85)`），与下层内容融合。
堆叠	将多个Toast包裹在`toast-container`中，容器会自动添加垂直间距。使用`position-static`保持容器在文档流中。
自定义内容	可删除`toast-header`，使用Flex工具类（如`align-items-center`）调整布局，或添加额外按钮/控件（需处理交互冲突）。
配色方案	使用`text-bg-{color}`类修改背景色，`btn-close-white`适配深色背景。移除边框用`border-0`。
放置	通过工具类定位（如`top-0 end-0`右上角），或用Flex居中（`d-flex justify-content-center align-items-center`）。
可访问性	必须包含`role="alert"`或`role="status"`、`aria-live`区域（`assertive`/`polite`）、`aria-atomic="true"`。非自动隐藏时需关闭按钮。
CSS变量	新增v5.2.0，支持动态样式（如`--bs-toast-zindex`、`--bs-toast-max-width`）。覆盖默认值需通过行内样式或自定义CSS。
Sass变量	通过Sass修改默认值，如`$toast-max-width: 350px`、`$toast-background-color`控制半透明背景。
用法	初始化方式：`new bootstrap.Toast(element, options)`或批量初始化`querySelectorAll`。
触发器	关闭按钮需设置`data-bs-dismiss="toast"`，外部按钮需额外指定`data-bs-target="#toast-id"`。
选项	`animation`（动画开关）、`autohide`（自动隐藏）、`delay`（隐藏延迟，默认5000ms）。可通过`data-bs-*`属性或JSON配置。
方法	`show()`显示、`hide()`隐藏、`dispose()`销毁实例、`isShown()`检查状态。使用静态方法`getInstance()`获取实例。
事件	生命周期事件：`show.bs.toast`（显示前）、`shown.bs.toast`（显示后）、`hide.bs.toast`（隐藏前）、`hidden.bs.toast`（隐藏后）。

5.24 工具提示

工具提示 · Bootstrap v5.3 (sbox.cn)

将鼠标悬停在链接上以查看工具提示。

知识点	说明
概述	- 依赖 Popper.js 库，需在 Bootstrap.js 前引入 - 需手动初始化工具提示 - 标题为空时不显示，建议设置`container: 'body'` - 禁用元素需通过外层元素触发，支持 Shadow DOM
示例	- 使用`data-bs-toggle="tooltip"`和`data-bs-title`定义工具提示 - 支持在链接、按钮等元素上使用 - 提供自定义样式和 HTML 内容的示例
启用工具提示	初始化代码： `document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))`
链接上的工具提示	在`<a>`标签添加`data-bs-toggle="tooltip"`和`data-bs-title`（或`title`属性）
自定义工具提示	使用`data-bs-custom-class`指定自定义类，通过 CSS 变量覆盖样式： `.custom-tooltip { --bs-tooltip-bg: var(--bs-primary); }`
方向	支持`top`/`right`/`bottom`/`left`，RTL 布局自动反转方向
CSS 变量	控制外观的核心变量： -`--bs-tooltip-bg`（背景色） -`--bs-tooltip-color`（文字色） -`--bs-tooltip-font-size`（字体大小）等（v5.2.0+）
Sass 变量	通过 Sass 配置： -`$tooltip-max-width: 200px` -`$tooltip-bg`（背景色） -`$tooltip-arrow-width`（箭头尺寸）等
用法	- 动态生成工具提示 DOM - 支持通过`boundary`选项处理溢出问题 - 示例：`new bootstrap.Tooltip(element, { boundary: document.body })`
标记	生成的结构： `<div role="tooltip"><div ></div><div >内容</div></div>`
禁用的元素	禁用按钮需包裹元素并添加`tabindex="0"`： `<span tabindex="0" data-bs-toggle="tooltip">...<button disabled></button></span>`
选项	关键配置： -`placement`: 位置（默认`top`） -`html`: 允许 HTML 内容 -`trigger`: 触发方式（默认`hover focus`） -`delay`: 延迟显示/隐藏
将函数与 popperConfig 使用	自定义 Popper 配置： `new Tooltip(el, { popperConfig(defaultConfig) { return { ...defaultConfig, modifiers: [...] } } })`
方法	-`show()`/`hide()`/`toggle()`: 控制显示 -`dispose()`: 销毁实例 -`getInstance()`: 获取实例 -`setContent()`: 动态更新内容
Events	-`show.bs.tooltip`/`shown.bs.tooltip`（显示前/后） -`hide.bs.tooltip`/`hidden.bs.tooltip`（隐藏前/后） -`inserted.bs.tooltip`（模板插入 DOM 后）

6、助手

6.1 清除修复

清除修复（Clearfix） · Bootstrap v5.3

知识点	说明
功能	清除父容器内的浮动内容，防止因浮动元素导致的高度塌陷问题。
使用方法（HTML）	在父元素上添加`.clearfix`类： `<div >...</div>`
使用方法（SCSS）	通过混合宏`@include clearfix`引入： `.element { @include clearfix; }`
实现原理	在父元素的`::after`伪元素中插入一个块级元素，并清除浮动： `display: block; clear: both; content: "";`
使用场景	父容器包含浮动元素（如使用`.float-start`或`.float-end`的元素）时，确保父容器正确包裹子元素。
示例代码	`html <div > <button >左浮动按钮</button> <button >右浮动按钮</button> </div>`
版本支持	适用于 Bootstrap v5.3 及以上版本，混合宏需在 SCSS 编译环境中使用。

6.2 颜色和背景

颜色和背景 · Bootstrap v5.3

知识点	详细说明
功能	通过合并`.text-`和`.bg-`类，自动计算背景色与文本对比色，简化样式定义。
类名格式	`.text-bg-{color}`，支持颜色：`primary`,`secondary`,`success`,`danger`,`warning`,`info`,`light`,`dark`。
实现原理	使用 Sass 的`color-contrast()`函数动态计算对比文本色（非 CSS 原生实现）。
使用场景	适用于徽章（Badge）、卡片（Card）等组件，替代原有组合类（如`.text-primary + .bg-primary`）。
示例代码	`<div >...</div>` `<span >Info</span>`
自定义颜色问题	若通过 CSS 变量修改主题颜色，可能导致对比度异常，需手动检查。
辅助功能要求	颜色不可作为唯一信息源，需确保内容本身明确，或用`.visually-hidden`类补充隐藏文本。
对比度优化	自动根据背景色选择高对比度文本色（如深背景用白色文字，浅背景用黑色文字）。

6.3 链接颜色

彩色链接（Colored links） · Bootstrap v5.3

类别	类名/用法	描述	注意事项
链接颜色	`.link-primary`,`.link-secondary`,`.link-success`,`.link-danger`,`.link-warning`,`.link-info`,`.link-light`,`.link-dark`	为链接设置主题颜色，包含`:hover`和`:focus`状态。	浅色主题下部分颜色（如`.link-light`）需搭配深色背景以保证对比度。
特殊链接颜色	`.link-body-emphasis`	高对比度链接，自动适配当前颜色模式（浅色/深色）。	目前唯一支持颜色模式适配的链接类，`v6`前为特殊实现，`hover`下划线透明度默认为`75%`。
下划线偏移	`.link-offset-{1-3}`	调整链接下划线与文本的偏移距离（如`.link-offset-2`增加偏移）。	数值越大，偏移距离越远。
下划线透明度	`.link-underline-opacity-{25,50,75,100}`	设置默认状态下链接下划线的透明度（如`25`表示`25%`透明度）。	需与其他链接类（如颜色类）组合使用。
悬停下划线	`.link-underline-opacity-{25,50,75,100}-hover`	设置`hover`状态下链接下划线的透明度（如`.link-underline-opacity-100-hover`）。	通常与默认透明度类搭配，但`.link-body-emphasis`的`hover`透明度为`75%`。
辅助功能提示	结合`.visually-hidden`类或显式文本	确保链接含义不依赖颜色，对屏幕阅读器友好。	避免仅用颜色传递信息，需补充隐藏文本或明确上下文。

6.4 聚焦环

焦点环(Focus ring) · Bootstrap v5.3

知识点	描述与示例
示例	使用`.focus-ring`类替换默认`outline`，通过`box-shadow`实现可自定义的焦点环效果。示例代码： `<a href="#" >Custom focus ring</a>`
自定义	支持通过以下方式自定义焦点环： - CSS 变量（全局或局部覆盖） - Sass 变量（全局配置） - 实用程序类（预定义颜色） - 直接编写 CSS 样式
CSS 变量	可修改的变量： -`--bs-focus-ring-color`：焦点环颜色（默认基于主题色） -`--bs-focus-ring-x`：水平偏移（默认`0`） -`--bs-focus-ring-y`：垂直偏移（默认`0`） -`--bs-focus-ring-blur`：模糊半径（默认`0`）示例：内联样式修改`<a >`
Sass	通过 Sass 变量全局配置： -`$focus-ring-width`：焦点环宽度（默认`0.25rem`） -`$focus-ring-opacity`：透明度（默认`0.25`） -`$focus-ring-color`：颜色（默认`rgba($primary, $opacity)`） -`$focus-ring-blur`：模糊半径（默认`0`）
Utilities	预定义的实用程序类： -`.focus-ring-{color}`（如`focus-ring-primary`、`focus-ring-success`等）直接应用主题色到焦点环，示例： `<a >Danger focus</a>`

6.5 图标链接(Icon link)

图标链接(Icon link) · Bootstrap v5.3

知识点	描述	示例/用法
示例	基础图标链接结构，图标自动调整大小和位置	`<a > <svg>图标</svg> 文字 </a>`或`<a >文字 <svg>图标</svg></a>`
悬停样式	添加`.icon-link-hover`类实现悬停图标动画效果	`<a >文字 <svg>→图标</svg></a>`（默认右移动画）
CSS 变量	通过 CSS 变量覆盖默认样式： •`--bs-icon-link-transform`（悬停动画） •`--bs-link-*`（颜色）
Sass	通过 Sass 变量全局修改样式： •`$icon-link-gap: .375rem`（图标文字间距） •`$icon-link-underline-offset: .25em`（下划线偏移） •`$icon-link-icon-transform`（悬停动画参数）	在 Sass 中定义变量后重新编译
Utilities	使用实用类快速修改样式： • 颜色：`link-success` • 下划线：`link-underline-success` • 透明度：`link-underline-opacity-25`	`<a >...</a>`

6.6 位置

位置 · Bootstrap v5.3

类名	功能描述	行为特点	响应式支持	注意事项
`fixed-top`	将元素固定在视口顶部（边缘到边缘）	始终可见，脱离文档流	无（全局生效）	可能需要添加`padding-top`避免内容被遮挡
`fixed-bottom`	将元素固定在视口底部（边缘到边缘）	始终可见，脱离文档流	无（全局生效）	可能需要添加`padding-bottom`避免内容被遮挡
`sticky-top`	元素在滚动经过后粘在视口顶部	初始在文档流中，滚动触发后固定	无（全局生效）	需确保父容器有足够高度，否则无法触发粘性效果
`sticky-sm-top`	在 SM（≥576px）及以上视口粘在顶部	响应式断点控制固定行为	✅ 支持 SM/MD/LG/XL/XXL 断点后缀（如`sticky-md-top`）	需根据实际屏幕尺寸设计布局
`sticky-md-top`	在 MD（≥768px）及以上视口粘在顶部
`sticky-lg-top`	在 LG（≥992px）及以上视口粘在顶部
`sticky-xl-top`	在 XL（≥1200px）及以上视口粘在顶部
`sticky-xxl-top`	在 XXL（≥1400px）及以上视口粘在顶部
`sticky-bottom`	元素在滚动经过后粘在视口底部	初始在文档流中，滚动触发后固定	无（全局生效）	较顶部更少使用，需精确控制滚动容器高度
`sticky-sm-bottom`	在 SM（≥576px）及以上视口粘在底部	响应式断点控制固定行为	✅ 支持 SM/MD/LG/XL/XXL 断点后缀（如`sticky-md-bottom`）	需测试不同设备下的滚动行为
`sticky-md-bottom`	在 MD（≥768px）及以上视口粘在底部
`sticky-lg-bottom`	在 LG（≥992px）及以上视口粘在底部
`sticky-xl-bottom`	在 XL（≥1200px）及以上视口粘在底部
`sticky-xxl-bottom`	在 XXL（≥1400px）及以上视口粘在底部

6.7 比例

比率（Ratios） · Bootstrap v5.3

类别	描述	示例/用法	注意事项
示例	使用比率类包裹嵌入内容，自动调整子元素尺寸	`<div ><iframe ...></div>`	父元素需添加`.ratio`及比例类，子元素无需设置`frameborder`（Bootstrap已覆盖）
纵横比	预定义的宽高比类，通过CSS变量实现	`.ratio-1x1`(100%) `.ratio-4x3`(75%) `.ratio-16x9`(56.25%) `.ratio-21x9`(42.86%)	比例计算方式为：`高度百分比 = (分母/分子) * 100%`（如`16x9`为`9/16 * 100%`）
自定义比率	通过覆盖`--bs-aspect-ratio`变量自定义任意比例，支持响应式断点调整	`<div >`(2x1) 结合媒体查询断点调整比例	自定义值需为百分比形式；响应式需使用Sass的`media-breakpoint-up`等混合宏
Sass映射	通过修改`$aspect-ratios`变量扩展或修改默认比例类，需重新编译Sass生效	`$aspect-ratios: ("2x1": 50%, "3x2": calc(2/3 * 100%));`	映射键名需符合格式（如`"4x3"`），值需为有效CSS计算表达式；修改后需重新编译以生成新类

6.8 栈(Stacks)

栈(Stacks) · Bootstrap v5.3

类型	描述	示例	CSS
垂直 (vstack)	使用`.vstack`创建垂直布局，默认全宽，通过`.gap-*`控制间距。	按钮垂直堆叠： `<div >` `<button>Save</button>` `<button>Cancel</button>` `</div>`	`.vstack { display: flex; flex-direction: column; align-self: stretch; flex: 1 1 auto; }`
水平 (hstack)	使用`.hstack`创建水平布局，默认垂直居中且宽度自适应，通过`.gap-*`和`.ms-auto`调整间距，支持`.vr`分隔线。	内联表单： `<div >` `<input>` `<button>Submit</button>` `<div ></div>` `<button>Reset</button>` `</div>`	`.hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; }`

6.9 延伸链接

延伸链接（Stretched link） · Bootstrap v5.3

知识点	说明	示例/注意事项
定义与作用	通过添加`.stretched-link`类，使链接的`::after`伪元素覆盖整个包含块，实现区域点击。	适用于卡片等组件，提升用户体验。
使用方法	1. 为链接添加`.stretched-link`类。 2. 包含块需设置`position: relative`。	- 卡片默认有`position: relative`，可直接使用。 - 自定义组件需手动添加`.position-relative`。
包含块条件	满足以下任一条件即为包含块： 1.`position`非`static`。 2.`transform/perspective`非`none`。 3.`will-change`涉及`transform/perspective`。 4.`filter`非`none`（仅Firefox）。	示例：段落设置`transform: rotate(0)`会成为包含块，链接仅覆盖该段落。
限制与兼容性	1. 避免与表格元素混用（布局冲突）。 2. 多个延伸链接需调整`position`和`z-index`。	不推荐多个延伸链接，但可通过样式解决层级冲突。
常见问题	1. 链接自身设置`position: relative`会破坏覆盖逻辑。 2. 包含块未正确设置导致失效。	示例：链接自身添加`position: relative`会导致伪元素无法延伸到父级。
默认支持组件	Bootstrap 卡片（`.card`）默认支持，无需额外设置。	卡片内链接可直接使用`.stretched-link`。
自定义组件适配	需手动为父容器添加`.position-relative`。	示例：自定义布局需`<div >`。

6.10 文本截断

文本截断 · Bootstrap v5.3

属性/类名	说明	应用场景	示例代码	注意事项
`.text-truncate`	添加省略号截断长文本	通用	`<div >长文本内容...</div>`	需设置父容器为`display: block`或`display: inline-block`
块级元素应用	结合网格系统限制宽度	块级容器	`<div > <div >长文本...</div> </div>`	通过网格列（如`.col-2`）控制宽度
内联元素应用	需强制内联块显示并手动限制宽度	行内元素	`<span >长文本...</span>`	必须设置`max-width`（如通过行内样式或CSS类）才能生效
依赖的CSS属性	自动应用以下样式：	底层实现	`css overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`	无需手动编写，由Bootstrap类自动实现

6.11 垂直规则

垂直线 · Bootstrap v5.3

知识点	要点说明
工作原理	- 基于`<hr>`元素设计，作为垂直分隔线 - 默认样式：宽度1px、`min-height: 1em` - 颜色通过`currentColor`继承父级文本颜色，并应用透明度（opacity） - 可通过自定义CSS覆盖默认样式
基础示例	- 基础用法：`<div ></div>` - 在弹性容器（`.d-flex`）中自动填充高度： `html<br> <div ><br> <div ></div><br> </div>`
带堆栈的示例	- 在水平堆栈（`.hstack`）中垂直分隔： `html<br> <div ><br> <div >First item</div><br> <div >Second item</div><br> <div ></div><br> <div >Third item</div><br> </div>` - 关键点： -`.ms-auto`使第二个元素右对齐 -`.gap-3`控制堆栈子项间距 -`.vr`在水平布局中显示为垂直分隔线

6.12 视觉隐藏

视觉隐藏 · Bootstrap v5.3

类/Mixin	用途	应用场景	用法示例	注意事项
`.visually-hidden`	在视觉上隐藏元素，但仍对辅助技术（如屏幕阅读器）可见。	隐藏仅用于屏幕阅读器的内容（如标题、标签）。	`<h2 >标题仅对屏幕阅读器可见</h2>`	元素不会在页面上占据空间，不可通过键盘聚焦。
`.visually-hidden-focusable`	默认视觉隐藏，但元素或其子元素获得焦点时显示（如键盘导航用户）。	创建跳过导航链接或隐藏但可聚焦的交互元素。	`<a href="#content">跳过导航</a>`	需结合`:focus`或`:focus-within`实现动态显示，适用于容器或可聚焦元素。
混合使用	结合`.visually-hidden`和`.visually-hidden-focusable`实现复杂需求。	动态切换视觉隐藏状态（如隐藏文本在聚焦时显示）。	`<button >隐藏按钮</button>`	需注意 CSS 层叠顺序，避免样式冲突。
Mixin 用法	通过 SCSS 自定义类名复用视觉隐藏逻辑。	保持代码一致性或扩展视觉隐藏功能。	`.custom-hidden { @include visually-hidden; }`	需在 Bootstrap 的 SCSS 环境下使用，依赖其变量和函数。

7、实用工具

7.1 API

Utility API · Bootstrap v5.3

知识点	定义/作用	配置选项/示例
属性 (Property)	指定CSS属性名，可以是字符串或数组	`property: opacity`或`property: (margin, padding)`
值 (Values)	属性允许的值，支持列表或映射格式	列表：`values: none underline` 映射：`values: (0: 0, 25: .25)`
类 (Class)	自定义生成类名的前缀	`class: o`生成`.o-25` `class: null`直接使用值作为类名（如`.visible`）
CSS变量实用程序	生成CSS变量而非常规CSS规则	`css-var: true` `css-variable-name: text-alpha`生成`--bs-text-alpha`
本地CSS变量	在规则内生成局部CSS变量	`local-vars: ("bg-opacity": 1)`生成`--bs-bg-opacity`
状态 (State)	生成伪类变体（如:hover）	`state: hover`生成`.opacity-hover:hover` 多状态：`state: hover focus`
响应 (Responsive)	生成响应式断点类	`responsive: true`生成`.opacity-md-25`等响应类
打印 (Print)	生成打印媒体查询类	`print: true`生成`.opacity-print-25`
重要性	控制是否添加!important	全局变量`$enable-important-utilities`（默认true）
覆盖实用程序	替换现有实用程序配置	通过相同键名覆盖：`map-merge($utilities, ("overflow": new-config))`
添加实用程序	新增自定义实用程序	使用`map-merge`添加新键：`cursor: (property: cursor, values: auto pointer)`
修改实用程序	调整已有实用程序配置	嵌套使用`map-get`和`map-merge`修改values等参数
启用响应式	为现有实用程序添加响应式支持	设置`responsive: true`，如修改border实用程序
重命名实用程序	修改生成的类名前缀	修改`class: ml`将margin-start实用程序类名改为`.ml-*`
删除实用程序	移除默认实用程序	`map-remove($utilities, "width")`或设置键值为null
添加、删除、修改	批量操作实用程序	在单个`map-merge`中组合多个操作
删除RTL中的实用程序	从RTL布局中排除特定实用程序	设置`rtl: false`，配合RTLCSS指令`/* rtl:remove */`

7.2 背景

背景 · Bootstrap v5.3

知识点	关键内容
背景色	- 使用`.bg-`类（如`.bg-primary`）设置元素背景色 - 注意事项：颜色不自动设置文本颜色，需搭配`.text-`工具类 -`.bg--subtle`类响应颜色模式（如浅色/深色主题），普通`.bg-`类在 v5.3 中不响应（v6 修复）
背景渐变	- 添加`.bg-gradient`类为元素背景添加半透明渐变效果 - 自定义 CSS 可通过`background-image: var(--bs-gradient);`调用渐变变量
不透明度	- 通过覆盖`--bs-bg-opacity`CSS 变量调整透明度（默认 1） - 提供预定义透明度类：`.bg-opacity-10`（10%）、`.bg-opacity-25`（25%）、`.bg-opacity-50`（50%）、`.bg-opacity-75`（75%）、`.bg-opacity-100`（100%）
工作原理	- 背景色通过`rgba(var(--bs-{color}-rgb), var(--bs-bg-opacity))`动态生成 - 每个`.bg-*`类定义局部 CSS 变量`--bs-bg-opacity`，避免嵌套继承问题
示例	`html<br><div >默认背景</div><br><div >50% 透明度</div><br><div >内联调整透明度</div>`
CSS	- 使用 CSS 变量（如`--bs-primary-rgb`）动态控制颜色值 - 背景渐变变量：`--bs-gradient`
Sass 变量	- 主题颜色变量：`$primary: $blue`，`$secondary: $gray-600`等 - 灰度变量：`$gray-100`到`$gray-900` - 渐变变量：`$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0))`
Sass 映射	-`$theme-colors`：包含主要主题颜色（primary、secondary 等） -`$grays`：包含灰度颜色（未生成实用程序） -`$utilities-bg`：合并 RGB 颜色生成工具类
Sass Mixins	- 渐变生成混入： -`.gradient-x()`（水平渐变） -`.gradient-y()`（垂直渐变） -`.gradient-radial()`（径向渐变） -`.gradient-striped()`（条纹渐变）
实用程序 API	- 在`scss/_utilities.scss`中定义： -`"background-color"`生成`.bg-`类 -`"bg-opacity"`生成透明度工具类 -`"subtle-background-color"`生成`.bg--subtle`类

7.3 边框

边框 · Bootstrap v5.3

知识点	类名/变量	描述	应用方式
添加	`.border`,`.border-top`,`.border-end`,`.border-bottom`,`.border-start`	添加全边框或指定方向边框	`<span ></span>`
删除	`.border-0`,`.border-top-0`,`.border-end-0`等	移除全部或指定方向边框	`<span ></span>`
颜色	`.border-primary`,`.border-success-subtle`等	使用主题颜色设置边框颜色，`*-subtle`类支持颜色模式响应	`<div ></div>`
不透明度	`--bs-border-opacity`,`.border-opacity-50`等	通过 CSS 变量或预定义类（10/25/50/75/100）调整透明度	`<div >`或`<div >`
工作原理	CSS 变量`rgba(var(--bs-success-rgb), var(--bs-border-opacity))`	动态计算颜色和不透明度，避免继承问题	自动应用于`.border-*`类
宽度	`.border-1`到`.border-5`	设置边框宽度（1px 到 5px）	`<span ></span>`
圆角(Radius)	`.rounded`,`.rounded-top`,`.rounded-circle`,`.rounded-pill`等	添加全角或指定方向圆角，支持圆形（50%）和胶囊形状	`<img >`
大小	`.rounded-0`到`.rounded-5`	控制圆角大小（0 无圆角，5 最大）	`<div ></div>`
CSS 变量	`--bs-border-width`,`--bs-border-color`,`--bs-border-radius`等	动态控制边框样式的基础变量	通过`var(--bs-border-width)`引用
Sass 变量	`$border-width`,`$border-radius-lg`,`$primary-border-subtle`等	定义边框宽度、样式、颜色等基础参数	通过修改`scss/_variables.scss`自定义
Sass 映射	`$theme-colors-border-subtle`,`$theme-colors-border-subtle-dark`	存储明/暗模式下的半透明边框颜色	用于生成响应式颜色类
Sass mixins	`@mixin border-radius()`,`@mixin border-top-radius()`等	快速生成圆角样式的混合宏	在自定义组件中调用`@include border-radius($radius)`
实用程序 API	`"border"`,`"rounded"`等配置项	通过 Sass 工具生成边框相关 CSS 类	修改`scss/_utilities.scss`中的属性映射来扩展或自定义类

7.4 颜色

颜色 · Bootstrap v5.3

知识点	说明
颜色	- 提供`.text-primary`,`.text-success`等基于主题色的文本颜色类。 - 强调色类（如`.text-primary-emphasis`）支持颜色模式响应（明/暗）。 -`.text-black-50`,`.text-white-50`,`.text-muted`已弃用。
不透明度	- 通过 CSS 变量`--bs-text-opacity`控制透明度（默认`1`）。 - 使用`.text-opacity-25`,`.text-opacity-50`等类或内联样式覆盖变量。
工作原理	- 颜色类使用`rgba(var(--bs-primary-rgb), var(--bs-text-opacity))`格式，结合 RGB 变量和透明度变量动态计算颜色。
示例	- 内联样式：`<div >` - 使用类：`<div >`
特异性	- 遇到样式冲突时，用`<div>`包裹内容并应用类，以提升特异性。
CSS	- 使用 CSS 变量（如`--bs-primary-rgb`）动态定义颜色。 -`.text-*-emphasis`类通过变量适配颜色模式。
Sass 变量	- 主题色变量：`$primary`,`$success`等。 - 强调色变量：`$primary-text-emphasis`（亮模式用`shade-color()`，暗模式用`tint-color()`）。 - 灰度变量：`$gray-100`到`$gray-900`。
Sass 映射	-`$theme-colors`: 主题色映射，用于生成颜色类。 -`$grays`: 灰度色映射。 -`$theme-colors-rgb`: 主题色的 RGB 值映射，用于透明度计算。
实用程序 API	- 在`scss/_utilities.scss`中定义，通过循环`$theme-colors`生成颜色类。 -`text-opacity`类提供`25`,`50`,`75`,`100`四个透明度级别。

7.5 Display属性

Display 属性 · Bootstrap v5.3

知识点	说明
工作原理	- 通过响应式显示工具类修改元素的`display`属性，支持部分属性值。 - 使用媒体查询基于断点系统（sm-xxl），如`.d-lg-none`在lg及以上屏幕生效。 - xs断点（默认）无缩写，类名从`min-width: 0`开始应用。
表示法	- 类名结构： -`.d-{value}`：适用于所有屏幕（xs及以上）。 -`.d-{breakpoint}-{value}`：指定断点（sm, md, lg, xl, xxl）。 -`value`可为`none`、`inline`、`block`、`grid`、`flex`等。
示例	-`.d-inline`：元素显示为内联。 -`.d-block`：元素显示为块级。（示例中通过`<div>`和`<span>`展示效果）
隐藏元素	- 使用`.d-none`隐藏元素，或结合断点类（如`.d-md-none`）在特定屏幕隐藏。 - 组合类实现响应式显示，如`.d-none.d-md-block.d-xl-none`在md-lg显示，其他隐藏。 - 示例：`.d-lg-none`隐藏lg及以上，`.d-none.d-lg-block`隐藏lg以下。
打印显示	- 使用`.d-print-{value}`控制打印显示（如`.d-print-block`）。 - 可组合屏幕类： -`.d-print-none`：打印时隐藏。 -`.d-none.d-print-block`：屏幕隐藏，打印显示块。
Sass	- 通过修改SCSS变量`$utilities`中的`display`值，自定义支持的属性值，需重新编译生效。
实用程序API	- 在`scss/_utilities.scss`中定义，配置参数包括： -`responsive: true`：支持响应式断点。 -`print: true`：支持打印类。 -`property: display`：对应CSS属性。 -`class: d`：类名前缀。 -`values`：支持的属性值列表（如`none`、`inline`、`block`等）。

7.6 Flex属性

弹性（Flex） · Bootstrap v5.3

知识点	类/属性	作用描述	响应式支持
启用Flex行为	`.d-flex`,`.d-inline-flex`	创建弹性容器（块级/行内）	是（如`.d-sm-flex`）
方向	`.flex-row`,`.flex-row-reverse`,`.flex-column`,`.flex-column-reverse`	控制主轴方向（水平/垂直及其反向）	是（如`.flex-md-row`）
两端对齐内容	`.justify-content-{start/end/center/between/around/evenly}`	控制主轴方向的对齐方式（如居中、两端对齐等）	是（如`.justify-lg-center`）
对齐项	`.align-items-{start/end/center/baseline/stretch}`	控制交叉轴方向的整体对齐方式	是（如`.align-items-md-end`）
自我对齐	`.align-self-{start/end/center/baseline/stretch}`	单独控制某个 flex 项在交叉轴的对齐方式	是（如`.align-self-xl-center`）
填充（Fill）	`.flex-fill`	强制子元素等宽，填充可用空间	是（如`.flex-xl-fill`）
增长和收缩	`.flex-grow-{0/1}`,`.flex-shrink-{0/1}`	控制元素是否扩展（`grow`）或收缩（`shrink`）以适应空间	是（如`.flex-lg-grow-0`）
自动边距	`.me-auto`,`.ms-auto`	通过左右外边距自动分配空间（常用于左右对齐）	否
使用对齐项	`.align-items-*`+`.flex-column`	结合垂直布局和自动边距实现复杂对齐（如顶部/底部固定）	是
包装（Wrap）	`.flex-nowrap`,`.flex-wrap`,`.flex-wrap-reverse`	控制换行方式（不换行/换行/反向换行）	是（如`.flex-md-wrap`）
排序（Order）	`.order-{0-5}`,`.order-first`,`.order-last`	调整元素的视觉顺序（数字越小越靠前，默认 DOM 顺序）	是（如`.order-md-2`）
对齐内容	`.align-content-{start/end/center/between/around/stretch}`	多行内容在交叉轴的对齐方式（仅对多行生效）	是（如`.align-content-xl-between`）
媒体对象	`.flex-shrink-0`+`.flex-grow-1`	经典媒体布局（左侧固定图片，右侧自适应内容）	否
Sass 实用程序 API	`scss/_utilities.scss`	通过 Sass 变量和 mixin 自定义 flex 类（如`flex-direction`、`justify-content`等）	是（响应式配置）
实用程序 API	`property: flex-direction`,`values: row/column...`	生成 flex 相关的 CSS 类	是（按配置生成响应式）

7.7 浮动

浮动 · Bootstrap v5.3

分类	核心要点	示例/参数说明
概述	- 通过`.float-*`类控制元素浮动 - 使用`!important`强制生效 - 视口断点与网格系统一致 - 对弹性盒项目无效	`.float-start`（左浮动） `.float-end`（右浮动） `.float-none`（禁用浮动）
响应式	- 支持5种响应式断点：sm/md/lg/xl/xxl - 断点后缀表示生效的最小视口宽度	`.float-sm-start`（≥576px生效） `.float-xl-end`（≥1200px生效） `.float-md-none`（≥768px禁用浮动）
Sass	- 实用程序定义在`scss/_utilities.scss` - 通过Utility API生成类名	可自定义断点或修改映射关系
实用程序API	配置参数： -`responsive: true`（启用响应式） -`property: float`（CSS属性） -`values`映射关系： `start: left` `end: right` `none: none`	生成逻辑： `float-{breakpoint}-{value}` 例如`.float-lg-end`生成： `@media (min-width: 992px) { float: right !important }`

7.8 交互

交互 · Bootstrap v5.3

类别	类名	用途	示例代码	注意事项
文本选择	`.user-select-all`	点击时选中整个段落文本	`<p >点击全选</p>`	强制用户全选，可能影响操作体验
	`.user-select-auto`	默认文本选择行为（根据浏览器/系统）	`<p >默认行为</p>`	通常不需要显式声明
	`.user-select-none`	禁止用户选择文本	`<p >不可选中</p>`	用户无法复制内容，慎用
指针事件	`.pe-none`	阻止指针交互（鼠标/触控）	`<a href="#" >不可点击</a>`	1. 仅阻止指针事件，键盘仍可操作 2. 需配合`tabindex="-1"`和`aria-disabled="true"`完全禁用
	`.pe-auto`	恢复默认指针交互（通常用于覆盖继承的`.pe-none`）	`<div ><a >可点击</a></div>`	默认行为，通常用于解决父级禁用时的子元素特例
Sass扩展	-	通过实用程序API自定义： 1. 添加新的`user-select`值 2. 修改`pointer-events`类名映射	`scss<br>$utilities: (<br> "user-select": (values: all auto none text),<br> "pointer-events": (class: pe, values: none auto)<br>);<br>`	需在编译前修改Sass变量

7.9 链接

链接（Link） · Bootstrap v5.3

知识点	类名/方法	描述	注意事项
链接不透明度	`.link-opacity-{10/25/50/75/100}`	调整链接整体不透明度	使用`rgba()`值，悬停变体添加`-hover`后缀（如`.link-opacity-10-hover`）
链接下划线
- 下划线颜色	`.link-underline-{primary/secondary/success/danger/warning/info/light/dark}`	独立设置下划线颜色	需先添加`.link-underline`类
- 下划线偏移	`.link-offset-{1/2/3}`	调整下划线与文本距离（单位：em）	悬停变体添加`-hover`后缀（如`.link-offset-3-hover`）
- 下划线不透明度	`.link-underline-opacity-{0/10/25/50/75/100}`	调整下划线不透明度	需先添加`.link-underline`类，悬停变体添加`-hover`后缀
悬停变体	在类名后加`-hover`	创建仅悬停时生效的样式	适用于不透明度、偏移等属性
彩色链接	`.link-{primary/secondary/success/danger/warning/info/light/dark}`	主题色链接，可组合其他实用类	需配合偏移/不透明度类使用（如`.link-offset-2.link-underline-opacity-25`）
Sass	`scss/_utilities.scss`	定义链接相关实用程序的 Sass 变量和映射	支持自定义颜色、偏移值等
Utilities API	通过配置映射生成实用类	自动生成链接不透明度、偏移、下划线等 CSS 类	可在`_utilities.scss`中修改参数扩展功能

7.10 对象拟合

对象拟合（object fit） · Bootstrap v5.3

知识点	详细说明
工作原理	通过`.object-fit-{value}`类设置`object-fit`属性，控制内容填充父容器的方式（如保持比例、拉伸等）。支持响应式断点。
示例	- 类名：`.object-fit-contain`,`.object-fit-cover`,`.object-fit-fill`,`.object-fit-scale`（对应`scale-down`）,`.object-fit-none` - 效果：保留纵横比、覆盖容器、拉伸填满、智能缩放或原始尺寸。
响应式	- 格式：`.object-fit-{breakpoint}-{value}`（如`.object-fit-md-contain`） - 断点：`sm`(≥576px)、`md`(≥768px)、`lg`(≥992px)、`xl`(≥1200px)、`xxl`(≥1400px)。
Video 支持	类名同样适用于`<video>`元素，用法与`<img>`一致（如`.object-fit-cover`）。
实用程序 API	- SCSS 定义：在`scss/_utilities.scss`中声明。 - 配置参数： -`responsive: true`（生成响应式类） -`property: object-fit`（CSS 属性） -`values`：映射类名与 CSS 值（如`contain: contain`）。

7.11 不透明度

不透明度 · Bootstrap v5.3

类别	类名	不透明度值	效果描述	示例代码	实用程序 API 配置
基础类	`.opacity-100`	`1`	元素完全不透明	`<div >`	`property: opacity;` `values: (0:0, 25:.25, 50:.5, 75:.75, 100:1)`
	`.opacity-75`	`0.75`	元素 75% 不透明（25% 透明）	`<div >`
	`.opacity-50`	`0.5`	元素 50% 不透明（半透明）	`<div >`
	`.opacity-25`	`0.25`	元素 25% 不透明（高度透明）	`<div >`
	`.opacity-0`	`0`	元素完全透明	`<div >`
技术实现	文件路径	SCSS 工具类定义位置：`scss/_utilities.scss`
版本支持	Bootstrap 版本	v5.3.0-alpha2 及以上支持

7.12 溢出

溢出(Overflow) · Bootstrap v5.3

类别	类名/方法	功能描述	示例/注意事项
溢出（overflow）	`.overflow-auto`	当内容溢出容器时，自动显示滚动条。	`<div >...</div>`
	`.overflow-hidden`	隐藏溢出容器的内容（不可滚动）。	`<div >...</div>`
	`.overflow-visible`	即使内容溢出容器，也强制显示全部内容（不裁剪）。	`<div >...</div>`
	`.overflow-scroll`	强制显示滚动条（无论内容是否溢出）。	`<div >...</div>`
overflow-x	`.overflow-x-auto`	仅在水平方向溢出时显示滚动条。	`<div >...</div>`
	`.overflow-x-hidden`	隐藏水平方向溢出的内容。	`<div >...</div>`
	`.overflow-x-visible`	强制显示水平溢出的内容（不裁剪）。	`<div >...</div>`
	`.overflow-x-scroll`	强制在水平方向显示滚动条。	`<div >...</div>`
overflow-y	`.overflow-y-auto`	仅在垂直方向溢出时显示滚动条。	`<div >...</div>`
	`.overflow-y-hidden`	隐藏垂直方向溢出的内容。	`<div >...</div>`
	`.overflow-y-visible`	强制显示垂直溢出的内容（不裁剪）。	`<div >...</div>`
	`.overflow-y-scroll`	强制在垂直方向显示滚动条。	`<div >...</div>`
Sass	`$overflows`变量	自定义溢出工具类的可用值（默认：`auto, hidden, visible, scroll`）。	修改`_variables.scss`中的`$overflows`变量以扩展或删除类。
实用程序 API	`"overflow"`配置项	定义`overflow`工具类的生成规则（属性、值）。	`"overflow": (property: overflow, values: auto hidden visible scroll)`
	`"overflow-x"`配置项	定义`overflow-x`工具类的生成规则。	`"overflow-x": (property: overflow-x, values: auto hidden visible scroll)`
	`"overflow-y"`配置项	定义`overflow-y`工具类的生成规则。	`"overflow-y": (property: overflow-y, values: auto hidden visible scroll)`

7.13 位置

位置(Position) · Bootstrap v5.3

分类	说明	类/变量	示例/备注
位置值	定义元素的定位方式	`.position-static` `.position-relative` `.position-absolute` `.position-fixed` `.position-sticky`	无响应式设计，直接通过类名设置定位模式
排列元素	使用边缘定位工具调整元素位置	`{属性}-{位置}` 属性：`top`/`start`/`bottom`/`end` 位置：`0`/`50`/`100`（对应 0%、50%、100%）	`<div >` 组合使用定位类和边缘工具（如`start-50`表示左 50%）
居中元素	通过`translate`工具实现居中	`.translate-middle`（水平+垂直居中） `.translate-middle-x`（仅水平） `.translate-middle-y`（仅垂直）	`<div >` 需结合`top-50`和`start-50`使用，实现完美居中
示例	实际应用场景案例	1. 徽章定位：`top-0 start-100 translate-middle` 2. 箭头标记：`top-100 start-50 translate-middle` 3. 进度条按钮居中	使用组合类实现复杂布局，如按钮角标、悬浮提示等
Sass 映射	通过变量扩展定位值	`$position-values`映射变量	默认值：`(0: 0, 50: 50%, 100: 100%)` 可添加自定义值（如`25: 25%`）扩展工具类
Utilities API	用于生成定位工具类的底层配置	在`scss/_utilities.scss`中定义： -`position`属性及值 -`top`/`bottom`/`start`/`end`边缘工具 -`translate-middle`转换工具	示例配置： `"position": (property: position, values: static relative absolute fixed sticky)` 支持自定义生成规则

7.14 阴影

阴影 · Bootstrap v5.3

知识点	类名/Sass变量/参数	描述	示例/值或配置
示例	`.shadow-none`	移除元素的阴影效果	`<div >`（无阴影）
	`.shadow-sm`	添加小型阴影	`<div >`（更浅更小的阴影）
	`.shadow`	添加默认尺寸的阴影	`<div >`（标准阴影效果）
	`.shadow-lg`	添加大型阴影	`<div >`（更深更大的阴影）
Sass 变量	`$box-shadow`	默认阴影的 Sass 变量	`0 .5rem 1rem rgba($black, .15)`
	`$box-shadow-sm`	小型阴影的 Sass 变量	`0 .125rem .25rem rgba($black, .075)`
	`$box-shadow-lg`	大型阴影的 Sass 变量	`0 1rem 3rem rgba($black, .175)`
	`$box-shadow-inset`	内嵌阴影的 Sass 变量（未直接关联示例中的类）	`inset 0 1px 2px rgba($black, .075)`
Utilities API	`property`	指定 CSS 属性名称（此处为`box-shadow`）	`property: box-shadow`
	`class`	生成的实用工具类名前缀	`class: shadow`（生成`.shadow-*`类）
	`values`	定义不同阴影类名对应的值	`(null: $box-shadow, sm: $box-shadow-sm, lg: $box-shadow-lg, none: none)`（映射到`.shadow-*`类）

7.15 尺寸

调整尺寸大小（Sizing） · Bootstrap v5.3

分类	描述	示例/用法
相对于父级	通过百分比或`auto`设置元素尺寸，基于父容器的大小。	- 类名：`w-25`,`w-50`,`w-75`,`w-100`,`w-auto` - 类名：`h-25`,`h-50`,`h-75`,`h-100`,`h-auto` - 最大尺寸：`mw-100`（max-width:100%）、`mh-100`（max-height:100%）
相对于视口	使用视口单位（`vw`/`vh`）设置元素尺寸，基于浏览器视口的尺寸。	- 类名：`vw-100`（width:100vw）、`vh-100`（height:100vh） - 最小视口尺寸：`min-vw-100`（min-width:100vw）、`min-vh-100`（min-height:100vh）
Sass	在`_utilities.scss`文件中定义实用类的生成规则，通过映射（map）配置属性、类前缀和值。	`scss<br>"width": (<br> property: width,<br> class: w,<br> values: (25: 25%, 50: 50%, ...)<br>)<br>`
Utilities API	Bootstrap 提供的工具类生成系统，允许开发者通过修改 Sass 配置来自定义或扩展实用类。	- 可调整支持的百分比值（如添加`33%`） - 可新增属性（如`min-width`）或类名前缀。

7.16 间距

间距(Spacing) · Bootstrap v5.3

知识点	说明
表示法	类名格式：`{属性}{方向}-{断点}-{尺寸}` 属性：`m`（外边距）、`p`（内边距）方向：`t`（上）、`b`（下）、`s`（左/右）、`e`（右/左）、`x`（左右）、`y`（上下）、空（四边）尺寸：`0-5`（基于`$spacer`的倍数）、`auto`（仅margin）
示例	`.mt-0`（上边距0）、`.ms-1`（左/右边距0.25rem）、`.px-2`（左右内边距0.5rem）、`.p-3`（四边内边距1rem）
水平居中	使用`.mx-auto`类，需配合`display: block`和固定宽度
负边距	默认禁用，需Sass设置`$enable-negative-margins: true` 类名格式：`.m{n方向}-n{尺寸}`（如`.mt-n1`）
间隙（Gap）	父容器使用`.gap-{尺寸}`（响应式），基于`$spacers`，适用于Grid/Flex布局，替代子项边距设置
行间隙	`.row-gap-{尺寸}`设置垂直间距，可配合`.gap-0`单独使用
列间距	`.column-gap-{尺寸}`设置水平间距，响应式支持
Sass映射	`$spacers`变量定义尺寸（0-5）： `0:0`,`1:$spacer0.25`,`2:$spacer0.5`,`3:$spacer`,`4:$spacer1.5`,`5:$spacer3`
Utilities API	通过Sass配置生成工具类： - 包含`margin`/`padding`及其方向变体 - 支持响应式（`responsive: true`） - 合并正负边距值映射

7.17 文本

文本 · Bootstrap v5.3

分类	类名/变量	作用描述	示例/用法	CSS属性	Sass变量/映射
文本对齐方式	`.text-start.text-center.text-end` `.text-[sm/md/lg/xl]-start`	控制文本对齐方向，支持响应式断点	`<p >左对齐（中屏及以上）</p>`	`text-align: left/center/right`	通过Utilities API配置响应式对齐
文本环绕和溢出	`.text-wrap.text-nowrap`	自动换行/强制不换行	`<div >...</div>`	`white-space: normal/nowrap`	`$white-space`映射
分词符	`.text-break`	强制长单词或URL换行	`<p >超长连续字符...</p>`	`word-wrap: break-word` `word-break: break-word`	在RTL语言编译中移除
文本转换	`.text-lowercase.text-uppercase.text-capitalize`	文本大小写转换	`<p >首字母大写</p>`	`text-transform: lowercase/uppercase/capitalize`
字体大小	`.fs-1`到`.fs-6`	按标题级别设置字体大小	`<p >中号文本</p>`	`font-size`	`$font-sizes`映射（含6级尺寸）
字体粗细和斜体	`.fw-[lighter...bold].fst-italic.fst-normal`	控制字重（9种级别）和斜体样式	`<p >半粗体</p>` `<p >斜体</p>`	`font-weight` `font-style`	`$font-weight-*`系列变量（如`$font-weight-bold`）
行高	`.lh-1.lh-sm.lh-base.lh-lg`	控制文本行高（1倍/紧凑/基准/宽松）	`<p >紧凑行距文本...</p>`	`line-height`	`$line-height-*`变量（如`$line-height-base: 1.5`）
等宽字体	`.font-monospace`	应用等宽字体栈	`<p >代码样式文本</p>`	`font-family`	`$font-family-monospace`
重置颜色	`.text-reset`	继承父级颜色	`<a >继承颜色的链接</a>`	`color: inherit`
文字装饰	`.text-decoration-underline` `.text-decoration-line-through` `.text-decoration-none`	添加下划线/删除线移除装饰（常用于链接）	`<a >无下划线链接</a>`	`text-decoration`
CSS相关	-	涉及主要属性： `text-alignwhite-space` `font-sizetext-transform`等
Sass变量	`$font-family-` `$font-size-` `$font-weight-` `$line-height-`	定义字体栈、基准尺寸、字重等级、行高等核心参数	`$font-size-base: 1rem` `$font-weight-bold: 700`
Sass映射	`$font-sizes` `$theme-colors-text`	生成字体大小工具类定义主题色文本颜色映射	`$font-sizes: (1: 2.5rem...)` `$theme-colors-text: ("primary": $blue...)`
Utilities API	通过`scss/_utilities.scss`配置	动态生成工具类系统，支持： • 响应式断点 • RTL控制 • 自定义属性映射 • 值覆盖扩展	示例配置： `"font-size": (<br> rfs: true,<br> property: font-size,<br> values: $font-sizes<br>)`

7.18 垂直对齐

垂直对齐 · Bootstrap v5.3

类名	效果描述	适用元素类型	典型场景示例	注意事项
`.align-baseline`	元素基线与父元素基线对齐	内联、内联块、表格单元格	文本与基线对齐（默认行为）	仅对特定元素生效
`.align-top`	元素顶部对齐到当前行内最高元素的顶部	同上	图标与顶部对齐	非行内元素需结合其他工具
`.align-middle`	元素垂直居中对齐到父容器中部	同上	表格单元格内容垂直居中	表格单元格常用
`.align-bottom`	元素底部对齐到当前行内最低元素的底部	同上	文本底部对齐	对行内元素生效
`.align-text-top`	元素顶部对齐到父元素的字体顶部（与字体相关，而非行高）	同上	图标对齐到文字字体顶部	注意与`.align-top`的区别
`.align-text-bottom`	元素底部对齐到父元素的字体底部	同上	图标对齐到文字字体底部	同上
Flex工具	通过Flex布局实现垂直居中	块级元素（如`<div>`）	整个容器内容垂直居中	使用`.d-flex`+`.align-items-center`，如：`<div >`

7.19 可访问性

可见性 · Bootstrap v5.3

知识点	说明
作用	控制元素的可见性，不修改其`display`属性，不影响布局。
类名	`.visible`和`.invisible`
CSS 属性	`visibility`
值	`.visible`→`visible` `.invisible`→`hidden`
布局影响	元素仍占据页面空间（与`display: none`不同）。
辅助技术兼容性	`.invisible`类元素对视觉和屏幕阅读器用户均隐藏。
优先级	使用`!important`确保样式覆盖。
应用场景	需要临时隐藏元素但保留布局时使用（如动态切换可见性）。
Sass 工具 API	通过`scss/_utilities.scss`声明，配置项为`"visibility"`的键值对。
版本	Bootstrap v5.3.0-alpha2

7.20 Z-index

Z-index · Bootstrap v5.3

知识点	用途/功能	关键点	代码/配置示例
示例	展示如何通过 z-index 实用类控制元素堆叠顺序	- 需要结合`position`类（如`position-absolute`） - 提供从`z-n1`（-1）到`z-3`（3）的层级范围	`html<br><div >z-3</div><br><div >z-2</div>`
覆盖	确保覆盖组件（模态框、工具提示等）始终位于其他内容之上	- 覆盖组件有独立的高层级 z-index（如模态框默认 z-index 1050） - 避免与低级实用类冲突（低级类仅到 3）	无直接代码，但需注意组件默认层级
组件方法	管理组件内部重复元素的堆叠顺序（如按钮组中的按钮）	- 使用低级 z-index 值（如`z-1`） - 仅在组件内部协调重叠元素	无直接代码，常见于组件源码（如按钮组`position: relative`+`z-index`）
CSS	生成 z-index 实用类的 CSS 样式	- 通过工具类（如`.z-3`）直接应用 z-index 值 - 需配合定位类（如`position-absolute`）生效	`css<br>.z-3 { z-index: 3; }<br>.z-n1 { z-index: -1; }`
Sass 映射	自定义 z-index 的层级范围和值	- 修改`$zindex-levels`映射可扩展/调整层级 - 默认值：`n1: -1, 0: 0, 1: 1, 2: 2, 3: 3`	`scss<br>$zindex-levels: (n2: -2, n1: -1, 0: 0, 5: 5); // 扩展层级`
Utilities API	通过工具 API 动态生成 z-index 实用类	- 在`scss/_utilities.scss`中定义 - 支持自定义属性名、类前缀和值映射	`scss<br>"z-index": (<br> property: z-index,<br> class: z,<br> values: $zindex-levels<br>)`

8 扩展

8.1 方法

Approach · Bootstrap v5.3 (sbox.cn)

知识点	说明	关键点/原则	示例/注意事项
响应式设计	以移动优先（mobile-first）为核心	- 优先用`min-width`媒体查询 - 减少CSS覆盖，随视口增大添加样式 - 必要时使用`max-width`覆盖复杂组件	`.d-none`（全屏生效） `.d-md-none`（中屏及以上生效）
组件类设计	基类+修饰类模式	- 基类定义通用样式（如`.btn`） - 修饰类扩展变体（如`.btn-primary`） - 仅当需要多属性修改时才用修饰类	避免过度创建修饰类主题色（`.btn-danger`）和尺寸（`.btn-lg`）是典型用例
z-index层级	分两种层级体系	组件元素：0-3（默认→hover→active→focus）覆盖组件：从1000开始（下拉框→导航栏→模态框→工具提示）	导航栏z-index: 1030 模态框z-index: 1055 确保用户交互元素（如focus状态）优先级最高
HTML/CSS优先	优先使用语义化HTML和CSS实现功能	- 通过data属性驱动JavaScript插件 - 利用浏览器原生功能（如表单验证伪类） - 避免不必要的自定义JS	用`<button data-bs-toggle="modal">`代替JS初始化使用`:valid`/`:invalid`伪类验证样式
工具类（Utilities）	用单一功能类替代自定义CSS	- 减少CSS体积 - 提高开发效率 - 常用属性值组合固化	`.d-block`（display: block） `.mt-3`（margin-top: 1rem）优先于编写自定义样式类
灵活HTML结构	避免严格的HTML结构要求	- 使用类选择器而非子选择器（避免`>`） - 降低CSS特异性 - 允许用户自定义HTML嵌套	导航组件不强制`ul > li > a`结构但需保持语义化（如仍建议用`<button>`而非`<div>`实现按钮）
代码规范	统一的代码编写标准	- 属性顺序：布局→尺寸→文本→视觉 - HTML验证使用`vnu-jar` - 使用连字符命名（kebab-case）	示例CSS顺序：`display > padding > color > background` HTML属性顺序：`class > id > data-*`

8.2 图标

Icons · Bootstrap v5.3 (sbox.cn)

知识点	说明
默认图标集	Bootstrap不包含默认图标集
官方图标库	Bootstrap Icons（由@mdo设计，Bootstrap团队维护）
图标格式推荐	优先使用SVG格式（更好的可访问性和矢量支持）
Bootstrap Icons特点	1. 开源MIT协议 2. 源自Bootstrap组件需求 3. 持续增长的图标库
图标来源	可自由选择： - Bootstrap Icons - 第三方图标集
推荐替代方案	官方测试过的优选图标集（文档未具体命名）
其他可用资源	未经验证但具备潜力的图标库，需满足： 1. 多格式支持（必须含SVG） 2. 可访问性良好
许可证要求	推荐使用MIT等开源协议（与Bootstrap兼容）
典型应用场景	表单、轮播等组件交互元素
技术优势	SVG支持： - 高分辨率显示 - CSS自定义样式 - 更好的无障碍特性

四、实战技巧

1、布局

1.1 需求

（1）假设我期望的布局如下方展示

1.2 实现

（1）我使用cursor给我生成了这样的代码

效果：

代码：

<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap Layout Demo</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">  </head>  <body >    <div >      <!-- Header -->      <div >        <div >          Header        </div>      </div>            <!-- Content Area (Aside + Main) -->      <div >        <!-- Aside -->        <div >          Aside        </div>        <!-- Main Content -->        <div >          Main        </div>      </div>            <!-- Footer -->      <div >        <div >          Footer        </div>      </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>  </body></html>

解读一下代码：

类别	类名/属性	效果说明
布局容器	`container-fluid`	创建全宽容器（无左右外边距），适合全屏布局
视口高度	`min-vh-100`	设置最小视口高度为100vh，确保页面撑满整个屏幕高度
Flex布局	`d-flex`	启用弹性盒子布局
	`flex-column`	设置垂直方向排列子元素
	`flex-grow-1`	允许元素占据父容器的剩余空间
栅格系统	`row`	创建行容器，用于包裹列
	`col-12`	占据整行宽度（适用于header/footer）
	`col-3`	占据3/12宽度（侧边栏）
	`col-9`	占据9/12宽度（主内容区）
背景样式	`bg-light`	设置浅灰色背景色
间距控制	`p-4`	添加4单位（1.5rem）内边距
文本对齐	`text-center`	文字居中显示

1.3 颜色

（1）为了方便查看，我们把每一块的bg-light的背景颜色都改一下

很显然，这不是我们想要的：

我们期望他撑满浏览器视野

左边侧边栏不对

这里讲解一下知识点，在使用色系时，并不是以blue这种关键字，而是使用primary这种直接示意的方式，改变text颜色，那就是text-primary,改变其背景，那就是text-bg-primary，没有元素又想改变背景怎么办呢？直接像本示例一样bg-primary即可：

在这里给大家简单列个不完整的示例表：

元素类型	类名示例	颜色影响部分	效果说明
按钮	`.btn-primary`	背景色 + 文字色	创建带有主题色的按钮
文本颜色	`.text-primary`	文字颜色	设置文字为主题色
背景色	`.bg-primary`	背景颜色	设置背景为主题色
边框	`.border-primary`	边框颜色	设置边框为主题色
徽章	`.badge bg-primary`	背景色 + 文字色	创建带主题色的小徽标
警告框	`.alert-primary`	背景色 + 边框 + 文字色	带主题色的提示框
进度条	`.progress-bar bg-primary`	进度条填充色	主题色进度条
列表组项	`.list-group-item-primary`	背景色 + 文字色	高亮列表项
表格行	`.table-primary`	表格行背景色	高亮表格行
导航链接	`.nav-link active bg-primary`	导航项背景色	激活状态的导航项
卡片头部	`.card-header bg-primary`	卡片头部背景色	主题色卡片标题栏
面包屑导航	`.breadcrumb-item.active`	当前项文字色	需配合`.text-primary`使用
分页激活项	`.page-item.active .page-link`	页码背景色	需配合`.bg-primary`使用
下拉菜单项	`.dropdown-item.active`	激活项背景色	需配合`.bg-primary`使用
工具提示	`data-bs-custom-`	工具提示背景色	自定义主题色工具提示
弹出框	`data-bs-custom-`	弹出框背景色	自定义主题色弹出框

1.4 调整左边侧边栏

我们可以这样，一行里面分成2列，右边一列分成3行。

<!doctype html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap Layout Demo</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">  </head>  <body >    <div >            <!-- Content Area (Left + Right) -->      <div >        <!-- Left Column -->        <div >          aside        </div>        <!-- Right Column -->        <div >          <!-- Right Column Rows -->          <div >            <div >              Header            </div>            <div >              main            </div>            <div >              Footer            </div>          </div>        </div>      </div>          </div>     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>  </body></html>

1.5 撑满视野

<!doctype html><html lang="en" ><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Dashboard Layout</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">    <style>        .dashboard-body {            height: calc(100vh - 3.5rem); /* 精确补偿顶部导航 */        }    </style></head><body >    <!-- 全屏布局容器 -->    <div >        <div >                        <!-- 侧边栏 (固定宽度) -->            <aside >                <h3 >Aside</h3>            </aside>            <!-- 主内容区 (自适应宽度) -->            <main >                <!-- 顶部导航 -->                <header >                    <h3 >Header</h3>                </header>                <!-- 主内容区块 -->                <div >                        <h3>Main</h3>                </div>                <!-- 底部页脚 -->                <footer >                        <h2>Footer</h2>                </footer>            </main>                    </div>    </div>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body></html>

本小节的代码是优化过后的第二套代码，与第一套代码对比如下：

特性	第二套代码（优化版）	第一套代码（原始版）
响应式设计	使用`col-md-*`实现中屏以上水平布局，移动端垂直堆叠	使用`col-3`/`col-9`固定比例，全屏保持3:9布局
高度控制	多级`h-100`+`flex-grow`+自定义高度公式实现精确全屏填充	仅依赖`min-vh-100`基础高度控制
结构嵌套	3级嵌套结构（container > row > columns）	2级嵌套结构（container > row）
页脚定位	使用`mt-auto`实现自动底部吸附	自然文档流排列
视觉增强	包含`shadow`阴影、`rounded`圆角等细节	基础背景色块
移动端显示	侧边栏与主内容区在中屏以下自动堆叠	始终显示3:9比例，可能导致移动端内容挤压
代码复杂度	较高（包含自定义CSS和复杂flex结构）	较低（仅基础网格类）

2、花式布局

要实现1的布局有很多种方法，其实前端技术很Open的，如果你愿意，你可以把它玩出花，代价是花点时间。

2.1纯网格布局（无Flex）

<!doctype html><html lang="en" ><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Grid Layout</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body >    <div >        <div >            <!-- 侧边栏 -->            <aside >                <h3 >AsideIndex-1</h3>            </aside>            <!-- 主内容区 -->            <div  >                <header >                    <h3 >Header</h3>                </header>                                <main >                    <h3>Main</h3>                </main>                                <footer >                    <h3>Footer</h3>                </footer>            </div>        </div>    </div></body></html>

2.2Flex填充布局

<!doctype html><html lang="en" ><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Flex Fill Layout</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"></head><body >    <!-- 侧边栏 -->    <aside  >        <h3 >AsideIndex-2</h3>    </aside>    <!-- 主内容区 -->    <div >        <header >            <h3 >Header</h3>        </header>                <main >            <h3>Main</h3>        </main>                <footer >            <h3>Footer</h3>        </footer>    </div></body></html>

2.3CSS Grid混合布局

给大家一个半成品，大家可以修改一下，邀请大家在评论区贴代码。

<!doctype html><html lang="en" ><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Grid Hybrid Layout</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">    <style>        .layout-grid {            display: grid;            grid-template-columns: 16.666% 1fr;            grid-template-rows: auto 1fr auto;            height: 100vh;        }        @media (max-width: 768px) {            .layout-grid {                grid-template-columns: 1fr;            }        }    </style></head><body>    <div >        <!-- 侧边栏 -->        <aside >            <h3 >Aside</h3>        </aside>        <!-- 主内容区 -->        <header >            <h3 >Header</h3>        </header>                <main >            <h3>Main</h3>        </main>                <footer >            <h3>Footer</h3>        </footer>    </div></body></html>

2.4 对比

我们举了4个例子进行布局，其中一个还是半成品，我们对比一下。

特性	原始方案	纯网格布局	Flex填充布局	CSS Grid混合布局
核心技术	Bootstrap网格+Flex	纯Bootstrap网格	Flex工具类	CSS Grid+Bootstrap
响应式实现	断点类控制	断点类控制	媒体查询	自定义媒体查询
高度控制	h-100+flex-grow	网格行高定义	flex-grow	固定高度定义
移动端适配	自动堆叠	自动堆叠	需要额外处理	自定义响应规则
代码复杂度	中等	简单	简单	较高
扩展灵活性	高	一般	高	最高
浏览器兼容	优秀	优秀	优秀	良好（IE有限）

汇总一下使用到的类：

布局方式	核心类/属性	效果说明
纯网格布局	`.container-fluid` `.row` `.col-md-*` `.h-100`	基于Bootstrap网格系统实现响应式布局，通过列宽定义结构，依赖行列嵌套实现全屏高度
	`.g-0` `.d-grid` `grid-template-rows`	消除默认间距，使用CSS Grid行模板定义垂直布局结构
Flex填充布局	`.d-flex` `.flex-column` `.flex-grow-1` `.flex-shrink-0`	通过Flex弹性容器实现动态填充，侧边栏固定宽度，主内容区自动扩展
	`.min-vh-100` `.mt-auto`	确保全屏高度，实现页脚自动吸附底部
CSS Grid混合布局	`display: grid` `grid-template-columns` `grid-template-rows`	自定义网格轨道定义布局骨架，精确控制行列尺寸
	`.bg-*` `.p-4`	颜色区块和间距的统一控制

3、谈谈继承静态页面是没办法继承的，比如子html想继承父html （如index.html）的结构。HTML 本身并不支持像编程语言那样的“继承”机制。所谓“继承 index.html”，其实是指复用index.html 的结构和样式，然后在新文件中进行扩展或修改。因此需要手动复制index.html的内容到新文件，然后进行修改和增强，这就是前端开发中常见的“继承”方式。

以下是常见的方式来实现继承：

3.1 组件化开发（推荐，适合大型项目）

使用React、Vue、Angular等现代前端框架，把公共部分（如头部、侧边栏、底部）做成组件。这样每个页面只需“引用”这些组件即可，真正实现代码复用和“继承”效果。

3.2服务端模板引擎

用如EJS、Jinja2、Thymeleaf等模板引擎，可以在HTML里用“模板继承”语法。例如EJS里可以<%-include('header.ejs')%>，这样多个页面共用一份头部代码。

4、Bootstrap 5 命名特点总结

4.1、属性型命名（CSS 属性映射）

特点：直接映射 CSS 属性，通过短横线 - 连接属性和参数规律：

{属性简写}-{方向}-{尺寸} {属性简写}-{断点}-{参数} 举例：

边距：mt-5（margin-top: 3rem）、mx-auto（margin-x: auto）颜色：bg-primary（background-color）、text-white（color）排版：text-center（text-align: center）、fs-4（font-size: 1.5rem）布局：d-flex（display: flex）、gap-3（gap: 1rem）举一反三：

若新增 blur-5 可表示 filter: blur(5px) 响应式场景：shadow-lg-md 表示中屏以上添加大阴影

4.2、组件型命名（语义化类名）

特点：用组件名作为前缀，配合状态修饰符规律：

{组件}-{修饰符} {组件}-{状态} 举例：

按钮：btn、btn-outline-danger、btn-lg 导航：nav-tabs、nav-link-active 卡片：card、card-img-overlay 弹窗：modal、modal-fullscreen 举一反三：

若新增 timeline 组件，可设计 timeline-item、timeline-vertical 状态扩展：calendar-day-selected 表示选中状态

4.3、响应式命名（断点系统）

特点：用断点缩写作为中缀，控制生效范围规律：

{属性/组件}-{断点}-{参数} 举例：

栅格：col-md-6（中屏以上占 6 列）显示控制：d-lg-none（大屏隐藏）间距响应：ps-sm-3（小屏以上左 padding）举一反三：

自定义断点：rotate-xl-45 表示超大屏旋转 45 度复合控制：grid-col-xxl-4 表示超宽屏显示 4 列

4.4、状态型命名（动态交互）

特点：描述元素交互状态，常配合 JavaScript 规律：

{状态}-{组件} {组件}-{状态} 举例：

通用状态：active、disabled、show 表单验证：is-invalid、valid-feedback 加载状态：spinner-border、progress-bar-animated 举一反三：

新增状态：uploading、drag-over 组合状态：table-row-highlighted 表示高亮表格行

4.5、HTML 标签增强型

特点：直接扩展原生标签功能规律：

{标签}-{功能} 举例：

表格：table、table-striped、table-hover 表单：form-control、form-select、input-group 列表：list-group、list-group-flush 举一反三：

增强 <details>：details-accordion 实现手风琴效果扩展 <video>：video-responsive 实现响应式视频

4.6、综合应用示例

<!-- 属性型 + 响应式 --><div ></div><!-- 组件型 + 状态 --><button  disabled>  <span ></span>  Submit</button><!-- HTML 标签增强 --><table >  <thead >    <tr><th >Header</th></tr>  </thead></table><!-- 自定义扩展 --><div >  <div ></div></div>

4.7、学习方法论

解构法：拆分如 btn-outline-danger-lg 为： btn（组件） outline（样式变体） danger（主题颜色） lg（尺寸）组合法：通过已知规则组合新类： border-dashed-warning = 虚线边框 + 警告色 rotate-45-hover = 悬停旋转效果逆向法：通过需求反推命名：需要卡片阴影 → 查文档得 shadow 类需要输入框加载态 → 组合 input-loading + spinner

5、bootstrap studio

图形界面构建网站，地址见：Bootstrap Studio：看这一篇就够了