Bootstrap5：看这一篇就够了

已于 2025-05-08 09:14:32 修改
阅读量882 收藏 32
点赞数 23
分类专栏： web前端技术 文章标签： js
于 2025-04-23 22:33:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43431593/article/details/147464545
版权

前言

在日新月异的前端世界中，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 class="alert alert-info">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 class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-xl-4">
      <div class="card h-100">
        <img src="..." class="card-img-top">
        <div class="card-body">
          <h5 class="card-title">响应式卡片</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 class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 卡片组件 -->
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- 表单验证 -->
<div class="mb-3">
  <label class="form-label">Email address</label>
  <input type="email" class="form-control is-invalid">
  <div class="invalid-feedback">Invalid email format</div>
</div>

（3）记忆口诀

/* 边距工具速记 */
m = margin      // 例如: m-3
p = padding     // 例如: pt-2
t = top         // 例如: mt-4
b = bottom      // 例如: pb-3
s = start(left) // 例如: ms-auto
e = end(right)  // 例如: me-2
x = 水平轴      // 例如: px-5
y = 垂直轴      // 例如: my-0

/* 响应式断点 */
sm ≥576px       // 例如: col-sm-6
md ≥768px       // 例如: d-md-none
lg ≥992px       // 例如: text-lg-start
xl ≥1200px      // 例如: shadow-xl
xxl ≥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 class="container">
.container-fluid全屏流动容器<div class="container-fluid">
.row行容器<div class="row">
.col-{breakpoint}-*列定义（*为1-12）<div class="col-md-6">
.g-{n}列间距（n=0-5）<div class="row g-4">

（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 class="mb-3">
  <label class="form-label">邮箱地址</label>
  <input type="email" class="form-control" placeholder="name@example.com">
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox">
  <label class="form-check-label">同意协议</label>
</div>

<!-- 浮动标签 -->
<div class="form-floating">
  <input type="email" class="form-control" 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 class="container mt-5">
        <h1 class="text-primary">Bootstrap 5 Test</h1>
        <button class="btn btn-primary" id="testButton">Test Button</button>
        <div id="debugOutput" class="mt-3"></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 class="alert alert-info">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 class="container mt-5">
        <h1 class="text-primary">Bootstrap 5 Test</h1>
        <button class="btn btn-primary" id="testButton"><span>Test Button</span></button>
        <div id="debugOutput" class="mt-3"></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 class="alert alert-info">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 class="row">
  <div class="col-6 col-md-4">左栏（小屏占6列，中屏占4列）</div>
  <div class="col-6 col-md-8">右栏（小屏占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 class="container"><div class="row"><div class="col">内容</div></div>
​​垂直对齐​​行内所有列的垂直对齐方式.align-items-start/center/end（行级）
.align-self-*（列级）		<div class="row align-items-center">
​​水平对齐​​控制列在行内的水平分布.justify-content-start/center/end/around/between/evenly<div class="row justify-content-between">
​​列换行​​当一行总列宽超过 12 时自动换行无需特殊类，自动行为<div class="col-9">+ <div class="col-4">（自动换行）
​​分栏符​​强制在指定位置换行.w-100（通用）
.d-none.d-{breakpoint}-block（响应式）		<div class="w-100"></div>（强制换行）
​​排序类​​控制列的顺序（DOM 顺序不变，视觉顺序变化）.order-{1-5}
.order-{breakpoint}-*
.order-first/last		<div class="col order-md-2">（中屏第二顺位）
​​偏移类​​通过网格类向右移动列.offset-{breakpoint}-{1-11}<div class="col-md-4 offset-md-4">（居中布局）
​​边距工具​​使用间距工具实现灵活偏移.ms-auto（左外边距自动）
.me-auto（右外边距自动）		<div class="col-md-4 ms-auto">（右对齐）
​​独立列类​​在非 .row 容器中使用列类.col-*（需手动处理间距）<div class="col-3 p-3">独立列</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 class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">。
​​无槽​​.g-0移除所有槽（删除负 margin 和列的 padding）。边缘到边缘设计需移除父级 .container，并在 .row 添加 .mx-0。示例：<div class="row g-0">。
​​更换槽​​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-backdropOffcanvas背景层1040侧边栏弹出时的遮罩层
$zindex-offcanvasOffcanvas侧边栏1045侧边栏内容显示层级
$zindex-modal-backdrop模态框背景层1050模态对话框的遮罩
$zindex-modal模态框1055模态对话框内容层级
$zindex-popover弹出框1070信息提示框（层级高于模态框）
$zindex-tooltip工具提示1080文字提示信息
$zindex-toastToast通知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列无效
- 内联样式优先于修饰类（如style="--bs-columns:3;"）
​​示例​​基础布局示例包含三列、响应式、自动换行等场景
​​三列​​等宽三列布局使用.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（如style="--bs-columns:12;"）
​​自定义​​通过CSS变量动态调整布局- --bs-columns: 列数
- --bs-gap: 间隙大小
- --bs-rows: 行数
​​无网格类​​直接子元素自动适应为网格项无需显式添加.g-col-*类，自动填充可用空间
​​列和间隙​​自定义列数和间隙大小如style="--bs-columns:10; --bs-gap:1rem;"结合.g-col-6和.g-col-4
​​添加行​​显式定义行数和行内位置设置--bs-rows:3并配合grid-row属性定位
​​间隙​​单独控制垂直/水平间隙使用row-gap或column-gap（如style="--bs-gap: .25rem 1rem;"定义垂直和水平间隙）
​​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 变量
• 允许实时自定义（如 style="--bs-body-color: #333;"）
• 所有 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（如 &lt;section&gt;）
​​代码块​​• 使用 <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 class="text-body-secondary">副标题</small></h3>text-body-secondary类
​​禁用标题（Display headings）​​更大的强调标题样式<h1 class="display-1">超大标题</h1>.display-1-.display-6类，Sass变量：$display-font-sizes, $display-font-weight
​​突出（Lead）​​突出段落文本的强调样式<p class="lead">突出段落</p>.lead类，Sass变量：$lead-font-size, $lead-font-weight
​​内联文本元素​​为内联标签（如<mark>、<del>）提供语义化样式<mark>高亮</mark>, <del>删除线</del>对应标签或.mark, .small, .text-decoration-underline等类
​​文本实用程序​​通过工具类快速调整文本对齐、颜色、粗细等属性<p class="text-center fw-bold">居中加粗</p>text-*, fw-*, text-decoration-*等类
​​缩写​​为<abbr>标签提供悬停提示和样式<abbr title="World Wide Web" class="initialism">WWW</abbr>.initialism类，Sass变量：$initialism-font-size
​​块引用​​引用内容的块级样式<blockquote class="blockquote">引用内容</blockquote>.blockquote类
​​命名源​​在块引用中添加来源说明<figure><blockquote>...</blockquote><figcaption class="blockquote-footer">来源</figcaption>.blockquote-footer类
​​对准​​控制块引用内容的对齐方式<figure class="text-center">...</figure>text-center, text-end类
​​列表（无样式）​​移除列表默认样式（仅直系子元素）<ul class="list-unstyled">...</ul>.list-unstyled类
​​列表（内嵌）​​将列表项水平排列<ul class="list-inline"><li class="list-inline-item">项1</li>...</ul>.list-inline, .list-inline-item类
​​说明列表对齐方式​​使用网格系统对齐说明列表的术语和描述<dl class="row"><dt class="col-sm-3">术语</dt><dd class="col-sm-9">描述</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="..." class="img-fluid" alt="...">需要父容器有宽度约束，max-width: 100% 和 height: auto无
​​图像缩略图​​.img-thumbnail添加圆角边框和缩略图样式<img src="..." class="img-thumbnail" 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 class="rounded float-start" ...>需要配合 .clearfix 清除浮动无
.mx-auto.d-block水平居中图像<img class="rounded mx-auto d-block" ...>需同时使用 .d-block 和 .mx-auto无
父容器使用 .text-center通过文本对齐方式居中图像<div class="text-center"><img class="rounded" ...></div>依赖父容器的文本对齐属性无
​​图片元素​​类加在 <img> 而非 <picture>为响应式图片指定多个 <source> 时保持样式兼容性<picture><source ...><img class="img-fluid img-thumbnail" ...></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 class="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 class="table-light">
.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-sizeSass变量控制标题字体大小，默认值为 $small-font-size（Bootstrap定义的小号字体）。修改此变量可自定义标题字号，需在引入Bootstrap前覆盖。
$figure-caption-colorSass变量控制标题颜色，默认值为 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" class="form-control">
​​尺寸大小​​控制输入框高度.form-control-lg, .form-control-sm<input class="form-control form-control-lg">
​​表单文本​​辅助说明文本，需与控件关联.form-text + aria-labelledby/aria-describedby<div class="form-text" id="helpText">...</div>
​​禁用​​禁用交互和聚焦disabled 布尔属性<input class="form-control" disabled>
​​只读​​禁止修改但允许聚焦readonly 布尔属性<input class="form-control" readonly>
​​只读纯文本​​无边框的只读样式.form-control-plaintext<input class="form-control-plaintext" readonly>
​​文件输入​​文件上传控件type="file", .form-control-sm/.form-control-lg<input type="file" class="form-control">
​​Color​​颜色选择器type="color" + .form-control-color<input type="color" class="form-control-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", class="form-range"<input type="range" class="form-range" id="customRange1">
​​禁用状态​​添加 disabled 属性使输入灰显，阻止交互和聚焦。disabled（布尔属性）<input type="range" class="form-range" disabled>
​​最小和最大值​​默认 min=0, max=100，可自定义范围。min, max<input type="range" class="form-range" min="0" max="5">
​​步数​​默认步长为整数值（step=1），可设置小数步长。step<input type="range" class="form-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 class="input-group-text"> 添加前缀/后缀，输入框用 <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 class="input-group-text"> 包裹 <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>相同
- 自定义高度需用style="height: ..."（禁用rows属性）
- 示例：<textarea style="height: 100px">
​​选择（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>相同
- 自定义高度需用style="height: ..."（禁用rows属性）
- 示例：<textarea style="height: 100px">
​​选择（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" class="form-control">
​​实用工具（Utilities）​​用间距工具控制表单元素分组.mb-3（下边距）等 margin 类<div class="mb-3">...</div>
​​表单网格（Form grid）​​用网格系统创建多列布局.row, .col<div class="row"><div class="col">...</div></div>
​​槽（Gutters）​​控制网格列间距.g-*（如 g-3）<div class="row g-3">...</div>
​​横向表单（Horizontal）​​标签和控件水平排列.row, .col-form-label, .col-sm-*<div class="row mb-3"><label class="col-sm-2 col-form-label">...</div>
​​水平标签大小调整​​标签与输入框大小匹配.col-form-label-sm/lg, .form-control-sm/lg<label class="col-form-label-sm">, <input class="form-control-sm">
​​列大小调整​​自定义列宽，非均匀分配.col-sm-7（指定宽度）<div class="col-sm-7"><input...></div>
​​自适应大小（Auto-sizing）​​列宽根据内容自动调整.col-auto, .gy-*, .gx-*, .align-items-center<div class="col-auto"><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 class="breadcrumb">，每项为<li class="breadcrumb-item">。
- 最后一项添加active类和aria-current="page"表示当前页。
- 非最后一项用<a>标签包裹链接。
​​分隔符​​- ​​默认分隔符​​：/，通过CSS伪元素::before和--bs-breadcrumb-divider变量实现。
- ​​自定义方法​​：
- CSS：style="--bs-breadcrumb-divider: '>'" 或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 class="btn">按钮</button>
​​按钮变体​​提供多种语义化颜色变体（共9种）btn-primary, btn-secondary, btn-success...
​​禁用文本环绕​​防止按钮文本换行.text-nowrap 或通过Sass变量 $btn-white-space: nowrap
​​按钮标签​​可用于<button>、<a>、<input>元素<a class="btn" role="button">链接按钮</a>
​​Outline buttons​​无背景色的边框按钮btn-outline-primary, btn-outline-secondary...
​​尺寸大小​​预定义大小：大（.btn-lg）、小（.btn-sm），支持CSS变量自定义<button class="btn btn-lg">大按钮</button>
​​禁用状态​​通过disabled属性或.disabled类禁用按钮<button disabled>禁用按钮</button>
<a class="disabled" aria-disabled>
​​链接功能注意事项​​禁用链接需添加tabindex="-1"和aria-disabled="true"<a class="btn disabled" tabindex="-1" aria-disabled>禁用链接</a>
​​块按钮​​使用栅格系统创建全宽响应式按钮<div class="d-grid gap-2">
<button class="btn">块按钮</button></div>
​​按钮插件​​通过JavaScript实现交互功能（如切换状态）data-bs-toggle="button"
​​切换状态​​按钮的激活状态（active）<button class="btn active" 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 class="btn-group"> + .btn按钮水平排列，需添加 role="group" 和 aria-label必须为辅助技术提供明确的组标签<div class="btn-group" role="group" aria-label="..."> + 多个 .btn
​​混合样式​​不同按钮类混合使用（如 .btn-danger, .btn-warning）允许不同颜色/样式的按钮组合确保视觉一致性<button class="btn btn-danger">, <button class="btn btn-warning">
​​分级显示样式​​使用 Outline 样式（.btn-outline-*）按钮边框样式，背景透明适用于需要轻量级设计的场景<button class="btn btn-outline-primary">
​​复选框/单选组​​<input type="checkbox/radio"> + <label> 配合 .btn-check 和 .btn将表单控件伪装成按钮组input 需隐藏，label 绑定 for 属性，关闭自动补全<input type="checkbox" class="btn-check"> + <label class="btn" for="...">
​​按钮工具栏​​<div class="btn-toolbar"> 包含多个 .btn-group组合多个按钮组，支持间距工具类（如 .me-2）需为工具栏和每个子组添加 role 和 aria-label<div class="btn-toolbar" role="toolbar"> + 多个嵌套 .btn-group
​​调整尺寸​​在父容器添加 .btn-group-lg/.btn-group-sm统一调整组内所有按钮大小无需单独为每个按钮设置尺寸类<div class="btn-group btn-group-lg">
​​嵌套​​在 .btn-group 中嵌套另一个 .btn-group（如下拉菜单）实现复杂交互（如按钮与下拉菜单混合）下拉菜单需要配合 dropdown-toggle 和 dropdown-menu<div class="btn-group"> + 嵌套 <div class="btn-group"> + 下拉菜单代码
​​垂直变化​​使用 .btn-group-vertical按钮垂直堆叠不支持水平方向的下拉菜单分割<div class="btn-group-vertical"> + 多个垂直排列的 .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设置固定宽度（如style="width: 18rem;"）
​​文本对齐方式​​使用.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 class="carousel slide"> + carousel-inner + carousel-item active
​​指示器​​通过按钮标记添加幻灯片跳转点<div class="carousel-indicators"> + data-bs-slide-to索引值
​​字幕​​在轮播项中添加带响应式隐藏的说明文字<div class="carousel-caption d-none d-md-block">
​​交叉淡入淡出​​使用淡入淡出过渡效果替代滑动效果添加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 class="dropdown-header">
分隔符<hr class="dropdown-divider">
文本段落直接在 .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 class="list-group"><li class="list-group-item">
​​活动项​​通过.active类高亮当前选项<li class="list-group-item active" aria-current="true">
​​禁用项​​用.disabled类显示禁用状态<li class="list-group-item disabled" aria-disabled="true">
​​链接和按钮​​使用<a>/<button>+.list-group-item-action实现交互<a class="list-group-item list-group-item-action">
​​冲洗（Flush）​​移除边框和圆角<ul class="list-group list-group-flush">
​​编号​​使用.list-group-numbered+<ol>生成序号<ol class="list-group list-group-numbered">
​​水平排列​​响应式水平布局.list-group-horizontal{-sm|md|lg|xl|xxl}
​​变体​​颜色上下文类.list-group-item-primary .list-group-item-success等
​​带徽章​​结合flex布局和徽章组件<span class="badge bg-primary rounded-pill">14</span>
​​自定义内容​​自由组合排版元素使用d-flex+justify-content-between等工具类
​​复选框/单选​​内嵌表单控件<input class="form-check-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 class="tab-pane fade show active">
​​方法​​控制选项卡的APIshow() dispose() getInstance()
​​事件​​选项卡切换触发事件shown.bs.tab hidden.bs.tab

5.13 模态

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

​​知识点​​​​说明​​
​​工作原理​​基于 HTML/CSS/JS，使用 position: fixed，不支持嵌套，移动端需注意渲染，禁用页面滚动，需自定义焦点逻辑。
​​示例​​静态模态结构包含 modal-header、modal-body（必须带 padding）、modal-footer（可选）。
​​模态组件​​基础结构：<div class="modal"> 包含 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"
深色 offcanvasv5.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 时点击外部不关闭
keyboardEsc 键关闭默认 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 class="pagination">- 必须添加aria-label描述导航用途（如aria-label="Search results pages"）
- 通过<li class="page-item">和<a class="page-link">构建分页链接- 确保屏幕阅读器兼容性
​​使用图标​​- 用<span aria-hidden="true">隐藏图标符号（如&laquo;）- 必须为图标添加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 class="pagination">上
​​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伪元素处理按钮高度，可添加&nbsp;占位空格保持高度。
- 需JavaScript切换可见性，并用aria-hidden控制辅助技术访问。
​​宽度​​支持三种方式调整宽度：
1. 网格类（如.col-6）
2. 实用类（如.w-75）
3. 内联样式（如style="width: 25%;"）。
​​颜色​​- 默认使用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）或 style="width: 25%"宽度值需与 aria-valuenow 属性同步
- 高度在 .progress 容器上设置 height 属性style="height: 20px"（直接定义外层容器高度）内层 .progress-bar 自动适应容器高度
​​标签​​在 .progress-bar 内添加文本直接在元素内写入文本（如 <div class="progress-bar">25%</div>）使用 .overflow-visible 和 .text-dark 解决溢出问题；需保证颜色对比度
​​背景​​使用背景工具类修改颜色.bg-{color}（如 .bg-success）或 .text-bg-{color}（组合类）深色背景需搭配浅色文字（默认白色），浅色背景需手动添加 .text-dark
​​多个进度条​​使用 .progress-stacked 包裹多个 .progress 容器外层 <div class="progress-stacked">，每个子项为独立 .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' })
​​选项​​
- rootMarginstring | 0px 0px -25%
- smoothScrollboolean | false
- targetstring/Element | null
- thresholdarray | [0.1, 0.5, 1]
​​方法​​
- refresh()更新 Scrollspy 实例以检测新元素
- dispose()销毁实例
​​事件​​
activate.bs.scrollspy当新锚点被激活时触发

​​5.22 旋转（转圈圈）

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

​​知识点​​​​描述​​​​示例/关键点​​
​​边框微调器​​通过旋转边框实现加载动画的组件<div class="spinner-border" role="status">...</div>
​​颜色​​使用文本颜色类（如 text-primary）自定义颜色，依赖 currentColor避免使用 border-color（部分边框为透明）
​​增长微调器​​通过缩放效果实现加载动画的组件<div class="spinner-grow" role="status">...</div>
​​对齐​​使用Flex、浮动或文本对齐工具控制微调器的位置
- ​​边距​​使用边距工具类（如 m-5）调整间距<div class="spinner-border m-5">...</div>
- ​​放置​​通过Flex布局、浮动或文本对齐实现精准定位
- ​​Flex​​使用Flex工具居中或对齐微调器<div class="d-flex justify-content-center">...</div>
- ​​浮动​​使用浮动工具（如 float-end）定位<div class="spinner-border float-end">...</div>
- ​​文本对齐​​通过文本对齐工具（如 text-center）居中<div class="text-center">...</div>
​​大小​​使用 .spinner-border-sm 或自定义CSS调整尺寸<div class="spinner-border spinner-border-sm" style="width:3rem;">...</div>
​​按钮​​在按钮内集成微调器，需禁用按钮并添加辅助文本<button class="btn btn-primary" disabled><span class="spinner-border-sm">...</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 class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">内容</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 class="clearfix">...</div>
​​使用方法（SCSS）​​通过混合宏 @include clearfix 引入：
.element { @include clearfix; }
​​实现原理​​在父元素的 ::after 伪元素中插入一个块级元素，并清除浮动：
display: block; clear: both; content: "";
​​使用场景​​父容器包含浮动元素（如使用 .float-start 或 .float-end 的元素）时，确保父容器正确包裹子元素。
​​示例代码​​html <div class="bg-info clearfix"> <button class="float-start">左浮动按钮</button> <button class="float-end">右浮动按钮</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 class="text-bg-primary p-3">...</div>
<span class="badge text-bg-info">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="#" class="focus-ring ...">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 style="--bs-focus-ring-x: 10px; ...">
​​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 class="focus-ring focus-ring-danger ...">Danger focus</a>

6.5 图标链接(Icon link)

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

知识点描述示例/用法
​​示例​​基础图标链接结构，图标自动调整大小和位置<a class="icon-link"> <svg>图标</svg> 文字 </a> 或 <a class="icon-link">文字 <svg>图标</svg></a>
​​悬停样式​​添加 .icon-link-hover 类实现悬停图标动画效果<a class="icon-link icon-link-hover">文字 <svg>→图标</svg></a>（默认右移动画）
​​CSS 变量​​通过 CSS 变量覆盖默认样式：
• --bs-icon-link-transform（悬停动画）
• --bs-link-*（颜色）		style="--bs-icon-link-transform: translate3d(0,-.125rem,0); --bs-link-hover-color-rgb: 25,135,84;"
​​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 class="icon-link link-success link-underline-success">...</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 class="ratio ratio-16x9"><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 class="ratio" style="--bs-aspect-ratio: 50%;"> (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 class="vstack gap-2">
<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 class="hstack gap-3">
<input>
<button>Submit</button>
<div class="vr"></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 class="d-flex position-relative">。

6.10 文本截断

文本截断 · Bootstrap v5.3

属性/类名说明应用场景示例代码注意事项
.text-truncate添加省略号截断长文本通用<div class="text-truncate">长文本内容...</div>需设置父容器为 display: block 或 display: inline-block
​​块级元素应用​​结合网格系统限制宽度块级容器<div class="row"> <div class="col-2 text-truncate">长文本...</div> </div>通过网格列（如.col-2）控制宽度
​​内联元素应用​​需强制内联块显示并手动限制宽度行内元素<span class="d-inline-block text-truncate" style="max-width: 150px;">长文本...</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 class="vr"></div>
- 在弹性容器（.d-flex）中自动填充高度：
html<br> <div class="d-flex" style="height: 200px;"><br> <div class="vr"></div><br> </div>
​​带堆栈的示例​​- 在水平堆栈（.hstack）中垂直分隔：
html<br> <div class="hstack gap-3"><br> <div class="p-2">First item</div><br> <div class="p-2 ms-auto">Second item</div><br> <div class="vr"></div><br> <div class="p-2">Third item</div><br> </div>
- 关键点：
- .ms-auto使第二个元素右对齐
- .gap-3控制堆栈子项间距
- .vr在水平布局中显示为垂直分隔线

6.12 视觉隐藏

视觉隐藏 · Bootstrap v5.3

​​类/Mixin​​​​用途​​​​应用场景​​​​用法示例​​​​注意事项​​
.visually-hidden在视觉上隐藏元素，但仍对辅助技术（如屏幕阅读器）可见。隐藏仅用于屏幕阅读器的内容（如标题、标签）。<h2 class="visually-hidden">标题仅对屏幕阅读器可见</h2>元素不会在页面上占据空间，不可通过键盘聚焦。
.visually-hidden-focusable默认视觉隐藏，但元素或其子元素获得焦点时显示（如键盘导航用户）。创建跳过导航链接或隐藏但可聚焦的交互元素。<a class="visually-hidden-focusable" href="#content">跳过导航</a>需结合 :focus 或 :focus-within 实现动态显示，适用于容器或可聚焦元素。
​​混合使用​​结合 .visually-hidden 和 .visually-hidden-focusable 实现复杂需求。动态切换视觉隐藏状态（如隐藏文本在聚焦时显示）。<button class="visually-hidden visually-hidden-focusable">隐藏按钮</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 class="bg-success p-2 text-white">默认背景</div><br><div class="bg-success p-2 bg-opacity-50">50% 透明度</div><br><div style="--bs-bg-opacity: .5;">内联调整透明度</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 class="border-top"></span>
​​删除​​.border-0, .border-top-0, .border-end-0 等移除全部或指定方向边框<span class="border border-top-0"></span>
​​颜色​​.border-primary, .border-success-subtle 等使用主题颜色设置边框颜色，*-subtle 类支持颜色模式响应<div class="border border-danger-subtle"></div>
​​不透明度​​--bs-border-opacity, .border-opacity-50 等通过 CSS 变量或预定义类（10/25/50/75/100）调整透明度<div style="--bs-border-opacity: .5"> 或 <div class="border-opacity-25">
​​工作原理​​CSS 变量 rgba(var(--bs-success-rgb), var(--bs-border-opacity))动态计算颜色和不透明度，避免继承问题自动应用于 .border-* 类
​​宽度​​.border-1 到 .border-5设置边框宽度（1px 到 5px）<span class="border border-3"></span>
​​圆角(Radius)​​.rounded, .rounded-top, .rounded-circle, .rounded-pill 等添加全角或指定方向圆角，支持圆形（50%）和胶囊形状<img class="rounded-circle">
​​大小​​.rounded-0 到 .rounded-5控制圆角大小（0 无圆角，5 最大）<div class="rounded-3 rounded-top-0"></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 class="text-primary" style="--bs-text-opacity: 0.5;">
- 使用类：<div class="text-primary text-opacity-50">
​​特异性​​- 遇到样式冲突时，用 <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 class="user-select-all">点击全选</p>强制用户全选，可能影响操作体验
.user-select-auto默认文本选择行为（根据浏览器/系统）<p class="user-select-auto">默认行为</p>通常不需要显式声明
.user-select-none禁止用户选择文本<p class="user-select-none">不可选中</p>用户无法复制内容，慎用
​​指针事件​​.pe-none阻止指针交互（鼠标/触控）<a href="#" class="pe-none">不可点击</a>1. 仅阻止指针事件，键盘仍可操作
2. 需配合 tabindex="-1" 和 aria-disabled="true" 完全禁用
.pe-auto恢复默认指针交互（通常用于覆盖继承的 .pe-none）<div class="pe-none"><a class="pe-auto">可点击</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-1001元素完全不透明<div class="opacity-100">property: opacity;
values: (0:0, 25:.25, 50:.5, 75:.75, 100:1)
.opacity-750.75元素 75% 不透明（25% 透明）<div class="opacity-75">
.opacity-500.5元素 50% 不透明（半透明）<div class="opacity-50">
.opacity-250.25元素 25% 不透明（高度透明）<div class="opacity-25">
.opacity-00元素完全透明<div class="opacity-0">
​​技术实现​​​​文件路径​​SCSS 工具类定义位置：scss/_utilities.scss
​​版本支持​​​​Bootstrap 版本​​v5.3.0-alpha2 及以上支持


7.12 溢出

溢出(Overflow) · Bootstrap v5.3

​​类别​​​​类名/方法​​​​功能描述​​​​示例/注意事项​​
​​溢出（overflow）​​.overflow-auto当内容溢出容器时，自动显示滚动条。<div class="overflow-auto">...</div>
.overflow-hidden隐藏溢出容器的内容（不可滚动）。<div class="overflow-hidden">...</div>
.overflow-visible即使内容溢出容器，也强制显示全部内容（不裁剪）。<div class="overflow-visible">...</div>
.overflow-scroll强制显示滚动条（无论内容是否溢出）。<div class="overflow-scroll">...</div>
​​overflow-x​​.overflow-x-auto仅在水平方向溢出时显示滚动条。<div class="overflow-x-auto">...</div>
.overflow-x-hidden隐藏水平方向溢出的内容。<div class="overflow-x-hidden">...</div>
.overflow-x-visible强制显示水平溢出的内容（不裁剪）。<div class="overflow-x-visible">...</div>
.overflow-x-scroll强制在水平方向显示滚动条。<div class="overflow-x-scroll">...</div>
​​overflow-y​​.overflow-y-auto仅在垂直方向溢出时显示滚动条。<div class="overflow-y-auto">...</div>
.overflow-y-hidden隐藏垂直方向溢出的内容。<div class="overflow-y-hidden">...</div>
.overflow-y-visible强制显示垂直溢出的内容（不裁剪）。<div class="overflow-y-visible">...</div>
.overflow-y-scroll强制在垂直方向显示滚动条。<div class="overflow-y-scroll">...</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 class="position-absolute top-0 start-50">
组合使用定位类和边缘工具（如 start-50 表示左 50%）
​​居中元素​​通过 translate 工具实现居中.translate-middle（水平+垂直居中）
.translate-middle-x（仅水平）
.translate-middle-y（仅垂直）		<div class="position-absolute top-50 start-50 translate-middle">
需结合 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 class="shadow-none">（无阴影）
.shadow-sm添加小型阴影<div class="shadow-sm">（更浅更小的阴影）
.shadow添加默认尺寸的阴影<div class="shadow">（标准阴影效果）
.shadow-lg添加大型阴影<div class="shadow-lg">（更深更大的阴影）
​​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:$spacer*0.25, 2:$spacer*0.5, 3:$spacer, 4:$spacer*1.5, 5:$spacer*3
​​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 class="text-md-start">左对齐（中屏及以上）</p>text-align: left/center/right通过Utilities API配置响应式对齐
​​文本环绕和溢出​​.text-wrap .text-nowrap自动换行/强制不换行<div class="text-wrap" style="width:6rem">...</div>white-space: normal/nowrap$white-space 映射
​​分词符​​.text-break强制长单词或URL换行<p class="text-break">超长连续字符...</p>word-wrap: break-word
word-break: break-word		在RTL语言编译中移除
​​文本转换​​.text-lowercase .text-uppercase .text-capitalize文本大小写转换<p class="text-capitalize">首字母大写</p>text-transform: lowercase/uppercase/capitalize
​​字体大小​​.fs-1 到 .fs-6按标题级别设置字体大小<p class="fs-3">中号文本</p>font-size$font-sizes 映射（含6级尺寸）
​​字体粗细和斜体​​.fw-[lighter...bold] .fst-italic .fst-normal控制字重（9种级别）和斜体样式<p class="fw-semibold">半粗体</p>
<p class="fst-italic">斜体</p>		font-weight
font-style		$font-weight-* 系列变量（如$font-weight-bold）
​​行高​​.lh-1 .lh-sm .lh-base .lh-lg控制文本行高（1倍/紧凑/基准/宽松）<p class="lh-sm">紧凑行距文本...</p>line-height$line-height-* 变量（如$line-height-base: 1.5）
​​等宽字体​​.font-monospace应用等宽字体栈<p class="font-monospace">代码样式文本</p>font-family$font-family-monospace
​​重置颜色​​.text-reset继承父级颜色<a class="text-reset">继承颜色的链接</a>color: inherit
​​文字装饰​​.text-decoration-underline
.text-decoration-line-through
.text-decoration-none		添加下划线/删除线
移除装饰（常用于链接）		<a class="text-decoration-none">无下划线链接</a>text-decoration
​​CSS相关​​-涉及主要属性：
text-align white-space
font-size text-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 class="d-flex align-items-center">


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 class="z-3 position-absolute">z-3</div><br><div class="z-2 position-absolute">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 class="min-vh-100 d-flex flex-column">
    <div class="container-fluid">
      <!-- Header -->
      <div class="row">
        <div class="col-12 bg-light p-4 text-center">
          Header
        </div>
      </div>
      
      <!-- Content Area (Aside + Main) -->
      <div class="row flex-grow-1">
        <!-- Aside -->
        <div class="col-3 bg-light p-4">
          Aside
        </div>
        <!-- Main Content -->
        <div class="col-9 p-4">
          Main
        </div>
      </div>
      
      <!-- Footer -->
      <div class="row">
        <div class="col-12 bg-light p-4 text-center">
          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-class="tooltip-primary"工具提示背景色自定义主题色工具提示
弹出框data-bs-custom-class="popover-primary"弹出框背景色自定义主题色弹出框

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 class="min-vh-100 d-flex flex-column">
    <div class="container-fluid">

      
      <!-- Content Area (Left + Right) -->
      <div class="row flex-grow-1">
        <!-- Left Column -->
        <div class="col-3 bg-secondary p-4">
          aside
        </div>
        <!-- Right Column -->
        <div class="col-9">
          <!-- Right Column Rows -->
          <div class="row">
            <div class="col-12 bg-primary p-4">
              Header
            </div>
            <div class="col-12 bg-success p-4">
              main
            </div>
            <div class="col-12 bg-danger p-4">
              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" class="h-100">
<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 class="h-100">
    <!-- 全屏布局容器 -->
    <div class="container-fluid h-100 px-0">
        <div class="row g-0 h-100">
            
            <!-- 侧边栏 (固定宽度) -->
            <aside class="col-md-2 bg-secondary h-100 d-flex flex-column p-4">
                <h3 class="text-white mb-4">Aside</h3>
            </aside>

            <!-- 主内容区 (自适应宽度) -->
            <main class="col-md-10 d-flex flex-column h-100">
                <!-- 顶部导航 -->
                <header class="bg-primary p-4 shadow-sm">
                    <h3 class="text-white mb-0">Header</h3>
                </header>

                <!-- 主内容区块 -->
                <div class="dashboard-body flex-grow-1 p-4 bg-success">
                        <h3>Main</h3>
                </div>

                <!-- 底部页脚 -->
                <footer class="bg-danger p-4 text-white mt-auto">
                        <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" class="h-100">
<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 class="h-100">
    <div class="container-fluid h-100 px-0">
        <div class="row g-0 h-100">
            <!-- 侧边栏 -->
            <aside class="col-md-2 bg-secondary h-100 p-4">
                <h3 class="text-white">AsideIndex-1</h3>
            </aside>

            <!-- 主内容区 -->
            <div class="col-md-10 h-100 d-grid" style="grid-template-rows: auto 1fr auto">
                <header class="bg-primary p-4">
                    <h3 class="text-white">Header</h3>
                </header>
                
                <main class="bg-success p-4">
                    <h3>Main</h3>
                </main>
                
                <footer class="bg-danger p-4 text-white">
                    <h3>Footer</h3>
                </footer>
            </div>
        </div>
    </div>
</body>
</html>

2.2 Flex填充布局

<!doctype html>
<html lang="en" class="h-100">
<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 class="h-100 d-flex">
    <!-- 侧边栏 -->
    <aside class="bg-secondary p-4 flex-shrink-0" style="width: 16.666%">
        <h3 class="text-white">AsideIndex-2</h3>
    </aside>

    <!-- 主内容区 -->
    <div class="d-flex flex-column flex-grow-1">
        <header class="bg-primary p-4">
            <h3 class="text-white">Header</h3>
        </header>
        
        <main class="bg-success p-4 flex-grow-1">
            <h3>Main</h3>
        </main>
        
        <footer class="bg-danger p-4 text-white">
            <h3>Footer</h3>
        </footer>
    </div>
</body>
</html>

2.3 CSS Grid混合布局

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

<!doctype html>
<html lang="en" class="h-100">
<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 class="layout-grid">
        <!-- 侧边栏 -->
        <aside class="bg-secondary p-4">
            <h3 class="text-white">Aside</h3>
        </aside>

        <!-- 主内容区 -->
        <header class="bg-primary p-4">
            <h3 class="text-white">Header</h3>
        </header>
        
        <main class="bg-success p-4">
            <h3>Main</h3>
        </main>
        
        <footer class="bg-danger p-4 text-white">
            <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 class="bg-gradient-primary p-3 p-lg-5 shadow-lg-md"></div>

<!-- 组件型 + 状态 -->
<button class="btn btn-custom hover-scale" disabled>
  <span class="spinner-grow-sm loading-state"></span>
  Submit
</button>

<!-- HTML 标签增强 -->
<table class="table table-hover table-responsive-sm">
  <thead class="table-dark">
    <tr><th class="text-nowrap">Header</th></tr>
  </thead>
</table>

<!-- 自定义扩展 -->
<div class="timeline timeline-vertical">
  <div class="timeline-event timeline-event-highlighted"></div>
</div>


4.7、学习方法论

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

持续更新中。。。

Bootstrap5 表单
froginwe11的博客
03-14 326
Bootstrap 是一个流行的开源前端框架，它可以帮助开发者快速构建响应式和交互式的网页。Bootstrap5 是 Bootstrap 的最新版本，它带来了许多新的特性和改进。本文将详细介绍 Bootstrap5 中表单的使用方法，包括表单布局、表单控件、表单验证以及一些高级应用。
Bootstrap 一篇就够 快速入门&使用（中文文档）
m0_60786924的博客
05-02 3万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
Bootstrap 5 详细知识点总结与实践指南
最新发布
加入“Super Entity”，与全能开发团队共探AI智能体与数字人项目，开启前沿技术之旅。
02-26 950
Bootstrap 5 是一个功能强大且灵活的前端框架，它在性能、响应式设计、组件丰富度和定制性方面都进行了显著改进。通过本文的介绍，相信你已经对 Bootstrap 5 有了全面的了解。希望这些知识点和实践指南能帮助你在项目中更好地使用 Bootstrap 5。
Bootstrap5相对于4的个人更新笔记
但老师
08-31 3666
目录布局组件文本表单轮播导航进度提示样式 布局 新增.row-cols-*布局策略,从之前.row .col 的复杂布局变得更加快速 新增.g-*水平和垂直div间隙,.gx-*水平间隙,.gy-* 垂直间隙 新增.position-*对div进行各种各样的布局 组件 文本 新增属性role='button'以实现cursor:pointer互动,例如 <span role='button'>文字</span> 新增类.user-select-all,.user-sel
bootstrap5：Bootstrap 5-示例和练习项目
03-04
Desenvolver布局baseado no arquivo MODELO SITE： 1 Colunas ao ser visualizado否celular 2 Colunas ao ser visualizado否平板电脑4 Colunas ao ser visualizado否computador Deveráconter： 影像 文字报 文本 Botãocom o texto-塞巴舞 软件ERP Trabalhamos comvários的客户，DES PORTE Pequenoatémulti nacionais e estamos prreparados para melhor lender。 （imagem：software.png） Aplicativos移动版 Android应用程序和IOS参数集成软件。 （imagem：mobile.png） Desen
bootstrap5
weixin_34138139的博客
01-18 295
列表组的使用 ul.list-group &gt; li.list-group-item *5... 列表组中可以放置徽标: 在li中放置 span.badge. bootstrap中的情景类: 实际上就是所谓的颜色类, 如 .list-group-item-success 等类. 列表组的链接 还是list-group, list-group-item类, 只是将ul换成 div, li换成 a...
Bootstrap5
2301_80438496的博客
11-12 897
container类用于固定宽度并支持响应式布局的容器.container-fluid类用于100%宽度，占据全部视口的容器。
angular2入门，就这一篇就够了
01-27
Angular2.x是在2016年9月发布，基于当时的新标准ECMAScript 6(ES6)进行开发，这使得它与Angular1.x有着显著的区别，犹如Java与JavaScript之间的差异，学习Angular2.x意味着需要掌握全新的编程思想和技术栈。...
springcloud教程 -- 1.快速搭建入门级demo,看这一篇就够了
热门推荐
叶巨岩的博客
08-01 8万+
废话不多讲，跟紧我，开启你的SpringCloud初体验 首先回顾微服务的基本组成： [图片 here] 生产者：提供服务 消费者：消费服务 服务注册/发现中心：服务注册，发现，监控 所以，首先明白springcloud微服务的架构基础：生产者（client），消费者（client），服务注册/发现中心（server）
bootstrap-5-columns:Bootstrap 五列布局
06-22
bootstrap-5 列 Bootstrap 五列布局。 这是受此启发。 它利用 Bootstrap 自己的 LESS mixin 函数是最干净、更面向未来的解决方案。 此外，它还为您提供了所有offset 、 pull 、 push类。 快速查看源代码表明，我可以使用./less/bootstrap-5-columns.less内容轻松实现这一./less/bootstrap-5-columns.less 。 ！ 指示 使用凉亭安装： bower install bootstrap-5-columns 导入dist/bootstrap-5-columns.min.css 随意使用课程！ 兼容性 我已经针对 Bootstrap >= 3.2.0 对其进行了测试，但对于早期版本也可能没问题。 如果你发现了，请告诉我！
一文学会 BootStrap
阿城的博客
07-07 2160
自动布局列也能和断点搭配使用，在不同断点下，进行不同的列布局，比如大屏列多一点，小屏列少一点。比如实现一行8列的布局，12的因数没有8，所以如果要使用网格系统实现，我们就需要嵌套。另外，col 包裹实际内容的，为了美观，所以给 col 设置内边距 15px，防止实际内容紧贴着容器 container。分别对应着：手机，手机横屏，平板，小屏笔记本13、14寸，一般尺寸的电脑。在xl屏幕显示6列，在lg屏幕显示4列，在md屏幕显示3列，在sm屏幕显示2列，特小屏(none)显示1列。
预处理？看这一篇就够了
程序员云锦的博客
12-02 1322
文章目录背景概念几种具有代表性的预处理器学习sass前的准备sass常用语法缩进变量条件语句 背景 CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，在很长一段时间内，它的发展几乎全是表现力层面上的提升。 ​ 最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。 ​ 当一门语言的能力不足而用户的运行环境又不支持其它选择的时候，这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发，然
Bootstrap（五）
qq_43278421的博客
06-02 320
晚上继续学习组件设计的内容 bootstrap按钮式下拉菜单 按钮式下拉菜单其实就是把前面两部分内容合在一起 先是写一个按钮组的结构，然后在每个按钮中添加内容，把所有按钮改写成下拉菜单的形式 难度其实不大，就是代码量比较大。 bootstrap的导航 首先是默认标签导航 这是基于“ul”和"li”标签然后添加.nav-tabs类，还有需要同时添加.nav类 <div class="bs-docs-example"> <ul class="nav nav-tabs">
WEB前端网页设计-Bootstrap5 网格系统
君逍遥o
04-30 616
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
Bootstrap5详细讲解
Harris-H的博客
08-30 5616
文章目录Boostrap v50.介绍1.快速开始2.布局容器 Boostrap v5 0.介绍 使用 Bootstrap 构建快速、响应式布局的网站 Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。 1.快速开始 <!doctype html> <html lang="zh-CN"> <head> &l
BootStrap5快速入门
没有途径，只有努力
04-07 3091
BootStrap5快速入门BootStrap5快速入门引入1.容器2.网格系统3.文字排版标签Display 标题类smallmarkabbrblockquotecodekbd4.颜色5.表格6.形状7.消息提示8.按钮9.徽章10.进度条11.加载12.分页13.列表组14.卡片15.下拉菜单16.手风琴17.导航18.轮播19.模态框(信息交互)20.提示框21.回到顶部----------------总结练习实战效果图 BootStrap5快速入门 本教程只记录部分常用的 官方文档请前往官网:[简
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lion King

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值