参阅：Bootstrap 中文网
Bootstrap 3、4、5 是前端框架的三代核心演进，核心差异在于：3 是浮动栅格+强依赖 jQuery+兼容 IE8+；4 全面转向 Flexbox 栅格+可选 jQuery+兼容 IE10+；5 彻底移除 jQuery+原生 JS+CSS 变量+放弃 IE+新增 XXL 断点与内置 SVG 图标。
一、基础信息对比
| 版本 |
发布时间 |
核心定位 |
浏览器兼容 |
依赖 |
| Bootstrap 3 |
2013-08 |
经典稳定版，移动优先 |
IE8+、主流现代浏览器 |
必须 jQuery、Less 预处理器 |
| Bootstrap 4 |
2018-01 |
现代化重构，Flexbox 时代 |
IE10+、主流现代浏览器 |
可选 jQuery、Sass 预处理器 |
| Bootstrap 5 |
2021-05 |
原生 JS 时代，轻量化 |
放弃 IE，仅现代浏览器 |
无 jQuery、Dart Sass、CSS 变量 |
二、核心技术差异
1. 栅格系统（Grid）
-
Bootstrap 3
- 基于 float 浮动 实现，需手动清除浮动
- 断点：
xs(<768px)、sm(≥768px)、md(≥992px)、lg(≥1200px)
- 容器：
.container（固定）、.container-fluid（全宽）
- 列间距：
.row 负边距实现，无统一间距类
-
Bootstrap 4
- 全面改用 Flexbox，布局更灵活、对齐更简单
- 新增
xl(≥1200px) 断点，共 5 级响应
- 间距统一：
.g-* 控制列间距，替代 .row-no-gutters
- 自动布局：
col 自动等分，无需指定宽度
-
Bootstrap 5
- 保留 Flexbox 栅格，新增
xxl(≥1400px) 断点（6 级）
- 间距类优化：
.g-0 替代 .row-no-gutters，支持垂直间距
- 支持 CSS 变量自定义栅格参数，定制更灵活
2. JavaScript 依赖与实现
- Bootstrap 3 ：强依赖 jQuery，所有交互组件（模态框、下拉、轮播等）均基于 jQuery 开发，必须引入 jQuery 才能使用。
- Bootstrap 4 ：jQuery 可选，保留 jQuery 兼容，但开始支持原生 JS 调用方式，降低依赖门槛。
- Bootstrap 5 ：彻底移除 jQuery ，所有组件重写为原生 JS；Popper.js 升级到 v2；新增
data-bs-* 命名空间，避免冲突；性能与兼容性更好。
3. CSS 预处理器与定制
- Bootstrap 3 ：使用 Less 编写，变量与混合宏基于 Less 语法。
- Bootstrap 4 ：切换到 Sass (LibSass)，变量体系重构，定制更灵活。
- Bootstrap 5 ：仅支持 Dart Sass ，全面引入 CSS 自定义属性（变量），可在运行时动态修改主题；变量命名统一，支持深色模式快速切换。
4. 图标系统
- Bootstrap 3 ：内置 Glyphicons 字体图标库，无需额外引入。
- Bootstrap 4 ：移除内置图标，推荐使用 Font Awesome 等第三方图标库。
- Bootstrap 5 ：官方提供 Bootstrap Icons（SVG 图标），可直接引入使用，支持自定义颜色与大小。
三、组件与工具类差异
1. 核心组件替换
- Bootstrap 3 ：
.panel、.well、.thumbnail 用于卡片式布局。
- Bootstrap 4 ：统一为
.card 组件，替代上述所有，结构更简洁、功能更强大。
- Bootstrap 5 ：
.card 优化，新增 Offcanvas（侧边抽屉）、Toast（轻提示）、Floating Labels（浮动标签） 等组件；表单控件统一样式（如文件输入用 .form-control）。
2. 工具类（Utilities）
- Bootstrap 3：工具类较少，主要是文本、颜色、边距基础类。
- Bootstrap 4 ：大幅扩充工具类，如
mt-3（上边距）、d-flex（弹性布局）、text-truncate（文本截断）等，减少自定义 CSS。
- Bootstrap 5 ：工具类更丰富，新增透明度（
.opacity-*）、光标（.cursor-*）、边框半径（.rounded-*）等；支持响应式工具类（如 d-md-none）。
四、版本选择建议
- 选 Bootstrap 3：需兼容 IE8、维护老项目、追求极致稳定。
- 选 Bootstrap 4：兼容 IE10、项目需平稳过渡、不想放弃 jQuery。
- 选 Bootstrap 5：新项目、现代浏览器、追求轻量化与原生 JS、需要灵活定制与深色模式。
下面把 Bootstrap 3 / 4 / 5 的核心差异整理成清晰对比表格，方便你直接查看：
Bootstrap 3、4、5 核心差异对比表
1. 基础架构对比
| 对比项 |
Bootstrap 3 |
Bootstrap 4 |
Bootstrap 5 |
| 发布时间 |
2013 |
2018 |
2021 |
| 布局核心 |
Float 浮动 |
Flexbox |
Flexbox |
| JS 依赖 |
必须依赖 jQuery |
依赖 jQuery（可选） |
彻底移除 jQuery |
| CSS 预处理器 |
Less |
Sass (LibSass) |
Dart Sass + CSS 变量 |
| 浏览器兼容 |
IE8+ |
IE10+ |
放弃 IE，仅现代浏览器 |
| 图标 |
内置 Glyphicons |
无内置图标 |
官方提供 Bootstrap Icons |
2. 栅格系统对比
| 对比项 |
Bootstrap 3 |
Bootstrap 4 |
Bootstrap 5 |
| 断点数量 |
4 个 |
5 个 |
6 个 |
| 断点 |
xs / sm / md / lg |
xs / sm / md / lg / xl |
xs / sm / md / lg / xl / xxl |
| 列间距 |
负边距实现 |
g-* 统一控制 |
g-* 优化，支持垂直间距 |
| 布局特点 |
需清除浮动，对齐麻烦 |
弹性布局，自动对齐 |
更灵活，支持 CSS 变量定制 |
3. 组件与工具类对比
| 对比项 |
Bootstrap 3 |
Bootstrap 4 |
Bootstrap 5 |
| 卡片容器 |
panel / well / thumbnail |
统一为 card |
card 优化增强 |
| 新增组件 |
传统弹窗、下拉等 |
完善工具类 |
Offcanvas / Toast / 浮动标签 |
| 工具类 |
较少 |
大量新增 |
更丰富，支持响应式工具类 |
| 表单控件 |
样式较零散 |
统一 form-control |
进一步统一，样式更现代 |
4. 命名与 API 对比
| 对比项 |
Bootstrap 3 |
Bootstrap 4 |
Bootstrap 5 |
| 属性前缀 |
data-* |
data-* |
data-bs-* |
| JS 调用 |
jQuery 方式 |
jQuery / 原生 |
纯原生 JS |
| 定制方式 |
Less 变量 |
Sass 变量 |
CSS 变量 + Sass |
| 深色模式 |
无 |
无 |
原生支持 |
5. 适用场景
| 版本 |
推荐使用场景 |
| Bootstrap 3 |
老项目维护、需要兼容 IE8 |
| Bootstrap 4 |
兼容 IE10、过渡项目、仍使用 jQuery |
| Bootstrap 5 |
全新现代项目、不考虑 IE、追求轻量化 |