bootstrap 5 与 bootstrap 3 几乎不兼容:栅格改用 flexbox、js 组件去 jquery 化、断点与间距类重构、弃用 ie 支持及 glyphicons,迁移需全面重写代码。

Bootstrap 5 和 Bootstrap 3 不是简单升级,而是两套几乎不兼容的系统。直接替换 CSS 文件或 JS 脚本大概率导致布局错乱、组件失效、响应式崩溃。
栅格系统从 float 切到 flexbox
Bootstrap 3 的 .row 依赖 float + clear: both 实现行内列排列,必须手动处理清除浮动,.col-md-6 类在小屏下默认堆叠,但垂直对齐、等高、间距控制极其受限。
Bootstrap 5 全面基于 display: flex,.row 默认是 flex-container,列自动成为 flex-item:
-
.row不再需要.clearfix或::after伪元素清浮 - 支持
align-items/justify-content类(如align-items-center、justify-content-between)直接控制对齐 - 列高自动拉齐,无需 hack(如
min-height或table-cell模拟) -
.g-*系列类统一控制行列间距,替代 Bootstrap 3 中零散的.row-no-gutters+ 自定义 margin/padding
JavaScript 组件彻底去 jQuery 化
Bootstrap 3 所有交互组件(modal、dropdown、tooltip)强依赖 jQuery,调用方式形如 $(".modal").modal("show");没有 jQuery 就完全不能用。
Bootstrap 5 移除全部 jQuery 绑定,改用原生 Element.addEventListener 和 CustomEvent:
- 初始化方式变为
new bootstrap.Modal(document.getElementById("myModal")) - 事件监听使用标准 DOM 事件名,如
shown.bs.modal→shown.bs.modal(仍保留命名空间,但不再依赖 jQuery 的.on()) -
data-toggle已废弃,统一为data-bs-toggle(注意bs前缀) - Popper.js 升级到 v2,
tooltip和popover的定位逻辑更稳定,但配置项名有变化(如boundary→boundaryElement)
断点、容器与间距类命名全面重构
Bootstrap 3 的断点只有 4 级(xs/sm/md/lg),容器靠 .container(固定宽)和 .container-fluid(100% 宽)二分;列间距靠负 margin + 内边距模拟,无统一控制入口。
Bootstrap 5 扩展为 6 级断点(新增 xxl ≥1400px),并重写整套间距系统:
- 容器新增
.container-xxl,且.container默认按当前断点最大宽度自适应(不再是固定值) - 列偏移/排序类从
.col-md-offset-2改为.offset-md-2;列顺序从.col-md-push-3/.col-md-pull-3改为.order-md-3 - 间距工具类统一前缀
m-/p-,支持方向(t/b/s/e)和断点(md),如mt-3、pe-lg-4 -
.text-center在移动端默认生效,若需仅在大屏居中,得写text-lg-center(Bootstrap 3 是text-center+text-left覆盖)
图标、预处理器与浏览器支持已不可逆割裂
Bootstrap 3 内置 Glyphicons 字体图标,只需 <span class="glyphicon glyphicon-search"></span>;而 Bootstrap 5 完全不提供图标,必须自行引入 Font Awesome、Bootstrap Icons 或 SVG Sprite。
其他关键断裂点:
- CSS 预处理:Bootstrap 3 用 Less,Bootstrap 5 只支持 Dart Sass(LibSass 已弃用),变量体系全量重写,
@grid-columns→$grid-columns,且大量变量转为 CSS 自定义属性(--bs-body-color) - 浏览器支持:Bootstrap 5 明确放弃 IE 11 及以下,也不再 polyfill Flexbox 旧语法;Bootstrap 3 仍做 IE8+ 兼容(包括
box-sizing: border-box的 hack) - 表单控件样式重绘:Bootstrap 5 的
<input type="checkbox">使用伪元素绘制,不依赖背景图;Bootstrap 3 仍用 sprite 图片,定制时需替换整套雪碧图
迁移时最容易被忽略的是 CSS 变量穿透和 JS 初始化时机——比如在 DOMContentLoaded 之前调用 bootstrap.Tooltip 会静默失败,而 Bootstrap 3 的 jQuery 插件对此容忍度更高。











