<p>Bootstrap 5 必须引入 bootstrap.bundle.min.js（含 Popper）于 </body> 前，<link> 置 <head> 内；HTML 需含 lang 和 viewport；容器嵌套需注意 gutter；表单组件须用 data-bs-* 属性并确保 DOM 就绪后初始化。</p>
CDN 引入顺序和位置不能错
Bootstrap 5 的 JS 组件依赖 Popper（用于 tooltip、dropdown 等定位），而 bootstrap.bundle.min.js 已内置 Popper，所以只需引入这一个 JS 文件——但必须放在 </body> 之前，且在 DOM 渲染完成后执行。
常见错误现象：Uncaught ReferenceError: bootstrap is not defined，或 modal 点击无反应、tooltip 不显示。
-
<link>必须放在<head>内，否则样式闪动或失效 -
<script src="...bootstrap.bundle.min.js"></script>必须放在</body>前，不能放<head> - 若用单独的
bootstrap.min.js（不含 Popper），需额外引入@popperjs/core，不推荐
HTML 文档结构要带 viewport 和 lang 属性
缺了这两项，响应式断点（如 .col-md-6）可能不触发，移动端缩放异常，甚至部分组件（如 offcanvas）行为错乱。
正确模板开头必须包含：
立即学习“前端免费学习笔记（深入）”；
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 内容 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
注意：lang="zh-CN" 影响屏幕阅读器和字体回退；viewport 缺失会导致小屏下页面被缩放成“全站缩略图”。
容器 class 名没变，但语义和嵌套规则变了
.container 和 .container-fluid 还在，但它们内部不再兼容 Bootstrap 3/4 的旧网格写法。比如直接写 <div class="row"><div class="col-md-6">... 是可以的，但若嵌套了 .row 在 .card-body 里却忘了加 .g-0 或重置 margin，就会出现意外留白。
-
.row默认有--bs-gutter-x（1.5rem），垂直方向也有间隙，不是“零边距容器” - 旧版
.col-xs-*全部移除，最小断点就是.col-*（即始终生效） -
.col（无数字）表示等分，.col-6表示固定占 6 列，二者行为不同，别混用 - Flex 布局已成默认，
.row是display: flex，所以子元素不用再手动设flex: 1
表单和交互组件必须手动初始化 JS
所有依赖 JS 的组件（modal、tooltip、dropdown、offcanvas）不再响应 data-bs-toggle 类自动激活——除非你用了 bootstrap.bundle.min.js 并确保 DOM 已就绪。但即便如此，仍需检查是否漏掉 data-bs-* 属性拼写（v5 统一加了 bs 后缀）。
典型错误：
- 写了
data-toggle="modal"→ 应为data-bs-toggle="modal" - 写了
data-target="#myModal"→ 应为data-bs-target="#myModal" - JS 初始化前就调用
new bootstrap.Modal(...)→ 报Cannot read property 'getElementById' of null
最稳妥做法：DOM 加载完再初始化，例如用 document.addEventListener('DOMContentLoaded', () => { ... }) 包裹。
很多开发者卡在“样式看起来对了，但点击没反应”，问题往往不在 CSS，而在 JS 初始化时机或 data-bs-* 拼写。Bootstrap 5 不再替你猜意图，它要求你明确声明行为——这点比 v4 更严格，也更可控。
