Bootstrap 5 完整新特性汇总：从 v4 到 v5 的变化
2026-05-05 ·
Bootstrap 5 是 Bootstrap 系列的重大版本更新，带来了大量架构层面的改进。本文系统梳理从 v4 到 v5 的所有重要变化，帮助你快速完成升级。
1. 移除 jQuery 依赖
Bootstrap 5 最大的架构变化是完全移除 jQuery 依赖，所有 JavaScript 插件使用原生 JS 重写。这意味着：
- 不再需要引入 jQuery
- 所有 JavaScript API 保持不变
- 打包体积更小，加载更快
- 与框架（React/Vue）集成更简单
2. 网格系统升级
<!-- 新增 xxl 断点 (≥1400px) -->
<div class="col-xxl-4">超大屏自适应</div>
<!-- 垂直对齐类重命名 -->
<div class="align-items-start">...</div> <!-- 旧: align-items-start -->
3. CSS 自定义属性
Bootstrap 5 全面引入了 CSS 自定义属性体系，所有核心颜色和排版变量以 --bs-* 形式暴露：
:root {
--bs-primary: #0d6efd;
--bs-body-font-size: 1rem;
--bs-border-radius: 0.375rem;
}
4. 图标库独立
Bootstrap Icons 成为独立项目，目前包含 2000+ 开源 SVG 图标，通过 npm 或 CDN 使用。
5. 表单控件增强
- 全新的浮标签（Floating Labels）
- 表单校验样式优化，支持自定义反馈信息
- 新增
form-select 替代自定义下拉样式 - 输入组支持更多布局选项
6. 组件变更一览
| 组件 | 变化 |
|---|
| 卡片 | 移除 .card-deck，推荐使用网格系统 |
| 轮播 | 使用原生 JS，不再依赖 jQuery |
| 下拉菜单 | 新增对齐选项，支持 data-bs-* 属性 |
| 模态框 | 改进动画，新增全屏模态框 |
| 导航栏 | 新增 Offcanvas 组件导航方案 |