必须手动逐个将data-toggle替换为data-bs-toggle，Bootstrap 5完全不识别旧属性，残留一个即导致模态框、下拉菜单、折叠导航等交互组件静默失效且控制台无报错。
data-toggle → data-bs-toggle 必须手动逐个替换
Bootstrap 5 完全不识别 data-toggle，哪怕只留一个没改，对应模态框、下拉菜单、折叠导航就会静默失效，控制台也不报错。这不是 CSS 问题，是 JS 初始化逻辑被跳过——bootstrap.Modal 构造函数压根不会运行。
常见错误现象：点击按钮没反应、下拉菜单点不开、导航栏折叠后无法展开。
- 所有触发器元素（
<button></button>、<a></a>、<div>）都得检查 <code>data-toggle、data-target、data-dismiss属性 - 必须替换成
data-bs-toggle、data-bs-target、data-bs-dismiss - 如果用了 jQuery 链式调用（如
$('[data-toggle="collapse"]').collapse()），全部要重写为new bootstrap.Collapse()实例化方式 - 第三方插件（如旧版
bootstrap-datepicker）若未声明支持 v5，也会因读不到data-toggle而挂掉 -
ml-auto和ms-auto在 Flex 容器中行为不等价：ms-auto依赖兄弟元素存在才能“挤出”空间；真正接近传统居中语义的是mx-auto - 盲目把
ml-3全局替成ms-3，可能让 RTL 用户看到反向外边距 - 若项目没用 RTL，可批量替换，但务必同步检查是否混用了已废弃的
float-left（v5 中应为float-start） - 原写法：
.col-md-6 .col-lg-4 - v5 写法：
.col-12 .col-md-6 .col-lg-4（确保 xs 下满宽堆叠） -
.col（无数字）在 v5 中仍是等分，但底层是flex: 1 1 0，若内容超长且无word-break，可能横向溢出 - 如果发现小屏列没堆叠，优先检查
.row是否被覆盖为display: block，或是否漏加响应式类 - 必须在 HTML 中显式引入：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet"> - 不能只写
class="bi bi-search"就以为能生效 - 若使用自建构建流程（如 Webpack），需确保该 CSS 文件被正确打包并注入 HTML
- 注意版本兼容性：
bootstrap-icons@1.11.0是目前与 Bootstrap 5.3+ 最稳定的搭配
ms/me 替换 ml/mr 不是全局搜索替换就能完事
ms-3 和 me-3 是逻辑方向（margin-start / margin-end），不是 left/right 的别名。在 LTR 页面里视觉一样，但语义不同；一旦项目启用 dir="rtl"，ms-3 会自动翻转到右侧，而 ml-3 仍硬绑左侧——这会导致 RTL 模式下布局完全错位。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
.col-6 含义反转，漏加断点前缀直接导致小屏列宽异常
Bootstrap 3 的 .col-md-6 表示“仅中屏及以上占 6 列”，而 Bootstrap 5 的 .col-6 表示“所有断点（包括 xs）都占 6 列”。漏掉断点前缀，.col-md-6 在 v5 中根本无效，xs 下列宽变成 auto，内容撑开而非堆叠。
正确写法必须补全响应式类：
图标类名 bi-* 必须配对引入 bootstrap-icons.css
bi-search 这类类名本身不带图标数据，只是 CSS 选择器。Bootstrap 5 已彻底移除 Glyphicons，所有图标依赖外部引入的 bootstrap-icons.css 提供 SVG 数据 URI 和样式规则。
常见错误现象：图标显示为空白方块、控制台报 404（找不到字体文件）、页面加载后图标突然出现又消失。
迁移最难的不是改代码，是判断哪些地方“看起来没坏但其实逻辑已断”。比如 data-toggle 没改，JS 不报错也不执行；.col-md-6 没补 .col-12，小屏下看似正常，实则列宽失控——这些静默失效点，必须靠人工逐页验证，没法靠工具全自动兜底。
