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 变量自定义栅格参数，定制更灵活
- 保留 Flexbox 栅格，新增
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、追求轻量化 |