Bootstrap 5最核心的变化是彻底移除jQuery依赖，所有组件重写为原生JS；Popper升级至v2；栅格、间距、Flex工具类逻辑变更；组件API和HTML结构不兼容v4；Sass强制使用Dart Sass且变量命名调整。
如果您正在评估是否将项目升级至 Bootstrap 5，或初次接触该框架并希望全面了解其能力边界，则需明确其引入的核心变更与实际落地中的表现差异。以下是针对 Bootstrap 5 新特性及版本优缺点的深度解析：
一、彻底移除 jQuery 依赖
Bootstrap 5 不再将 jQuery 作为运行前提，所有 JavaScript 组件（如 Modal、Dropdown、Toast）均使用原生 JavaScript 重写。此举显著降低外部依赖复杂度，并提升加载性能与调试透明度。
1、检查现有代码中所有以 $(selector).method() 形式调用的 Bootstrap 功能，全部替换为原生 API。
2、将 data-target="#myModal" 替换为 data-bs-target="#myModal"，其他 data 属性同理添加 bs- 前缀。
3、初始化模态框时，改用 new bootstrap.Modal(document.getElementById('myModal')).show() 替代旧式调用。
二、基于 Flexbox 的重构栅格系统
Bootstrap 5 的 .row 默认为 flex 容器，列自动成为 flex 项，消除了 Bootstrap 3/4 中对 float 和 clearfix 的依赖，使垂直居中、等高列、间距控制等操作原生可实现。
1、删除所有手动添加的 .clearfix 类或伪元素清除浮动代码。
2、使用 align-items-center 或 justify-content-between 等工具类替代 JavaScript 或额外 CSS 实现对齐。
3、将原有 .col-xs-6 类全部移除，改用 .col-6 表示“所有断点下均占半宽”。
三、间距与工具类体系简化
Bootstrap 5 统一使用 rem 单位定义间距，并通过 .g-*（gap）、.m-*（margin）、.p-*（padding）系列替代旧版零散命名，同时默认启用 flex-wrap: wrap。
1、将 .row-no-gutters 替换为 .g-0。
2、删除已废弃的 .form-group，改用 mb-3 等间距类控制表单元素间距离。
3、若需禁用 flex 换行，必须显式添加 flex-nowrap 类，因 d-flex 默认启用换行。
四、组件结构与 API 全面不兼容
大量组件的 HTML 结构、data 属性、初始化方式发生断裂式变更，无法通过简单类名替换完成迁移，必须按新规范重写标记与交互逻辑。
1、将 .card-block 全部替换为 .card-body，且 .card-header 不再自带背景色，需手动添加 bg-light。
2、移除 data-dismiss="alert"，改用 data-bs-dismiss="alert"；否则警告框无法关闭。
3、表单验证逻辑下沉至浏览器原生 :valid/:invalid 伪类，JS 设置 setCustomValidity() 后必须调用 reportValidity() 才能触发 .is-valid 样式。
五、Sass 编译链路与定制机制变更
Bootstrap 5 强制要求使用 Dart Sass 编译器，弃用 LibSass，并对变量命名、函数签名、模块导入路径进行批量调整，导致原有定制方案大概率失效。
1、确认项目构建工具已配置 Dart Sass，移除 LibSass 相关插件或 loader。
2、将所有 $spacer 及 $spacers 自定义值同步更新至新单位体系（默认 $spacer: 1rem）。
3、检查 SCSS 文件中所有 @import "bootstrap/scss/..." 路径，确保未引用已被移除的模块（如 normalize 已由 Reboot 替代）。
