bootstrap 5 是彻底重写的框架,移除了 jquery 和 popper v1 依赖,要求将 data-toggle 改为 data-bs-toggle、data-dismiss 改为 data-bs-dismiss,并用原生 api 替代 jquery 调用;栅格系统改为 flex 布局,offset-* 类被 ms/me/mx-auto 替代,组件结构和初始化方式也全面重构。

Bootstrap 5 不是“增强版 Bootstrap 4”,而是彻底重写的框架——旧功能不是被“隐藏”或“弃用警告”,而是直接从源码里删了。升级前不清理这些,页面大概率白屏、错位、交互失灵。
data-toggle 和 data-target 全部失效
Bootstrap 5 的 JS 组件监听器根本不会读取 data-toggle 或 data-target,哪怕它们还写在 HTML 里,也完全没作用。
- 必须全部替换为
data-bs-toggle和data-bs-target,比如data-bs-toggle="modal"、data-bs-toggle="collapse" -
data-dismiss="modal"要改成data-bs-dismiss="modal" - 如果用了自定义事件监听(比如
$('#myModal').on('shown.bs.modal', ...)),得改用原生addEventListener('shown.bs.modal'),且元素必须是HTMLElement,不能是 jQuery 对象 - 常见错误现象:
TypeError: $().modal is not a function或点击按钮毫无反应——八成是因为 jQuery 还在、data-toggle没改、或bootstrap.bundle.min.js没加载成功
jQuery 和 Popper.js 依赖被硬性切断
Bootstrap 5 不再兼容 jQuery:它不检查是否存在 $,也不做任何降级处理,而是直接用 document.querySelector、CustomEvent 和 Element.classList 实现所有逻辑。
- 项目里只要还留着
jquery.min.js或旧版popper.js(v1.x),即使没调用,也可能因执行顺序或全局污染导致bootstrap.dropdown初始化失败 - 必须使用
bootstrap.bundle.min.js(含 Popper v2),不能只引bootstrap.min.js - 所有
$().xxx()调用全部无效,比如$('.alert').alert('close')→ 必须改写为new bootstrap.Alert(element).close() - 不再支持 IE11,若需兼容,得自己加 polyfill,但官方不保证行为一致
栅格与间距类语义重构
Bootstrap 5 的 .row 默认是 flex 容器,.col 是 flex 项,整个布局模型变了,旧的“浮动+清除”逻辑已不存在。
-
offset-*类(如offset-md-3)被移除,改用ms-auto(右推)、me-auto(左推)或mx-auto(居中) -
.row-no-gutters被g-0替代;行列间距统一用g-*系列(g-3=gap: 1rem) -
.text-center在所有断点生效,如只需 lg+ 居中,得写text-lg-center,而不是靠覆盖 -
.img-responsive、.btn-default、.panel、.page-header全部消失,对应功能需拆解为多个基础类组合(如border-bottom pb-3 h2 fw-bold)
组件结构和默认行为变更
很多组件的 HTML 结构不再是“可选优化”,而是强制要求——否则 JS 初始化会跳过或报错。
- Modal 必须有
role="dialog"、aria-modal="true"、aria-labelledby,否则可能无法聚焦或被屏幕阅读器忽略 - Dropdown 触发元素必须是
<button></button>或带role="button"的元素,<a></a>标签默认不触发 - Tooltip/Popover 需要手动初始化(
new bootstrap.Tooltip(...)),不会自动绑定data-bs-toggle,除非你用bootstrap.bundle.min.js并确保 DOM 已就绪 - 默认不响应
touchstart,只监听click和pointerdown,移动端点击延迟需自行处理
最常被忽略的一点:迁移不是“找替换表”,而是“重读文档”。比如 offset-md-2 找不到对应类,不是漏写了,是设计哲学变了——它现在是 margin 控制,不是栅格偏移。强行套用旧思维,只会反复踩坑。











