Bootstrap需严格遵循HTML结构、viewport标签、container容器、JS初始化及CSS加载顺序；缺一不可，否则样式失效或交互异常。
Bootstrap 不是“搭配”进 HTML 就能用的，它依赖特定的 HTML 结构、预设类名和 JavaScript 初始化逻辑；直接套用 class 名但忽略文档流、容器层级或 JS 依赖，90% 的样式失效或交互异常都源于此。
必须加 viewport meta 标签，否则响应式完全失效
Bootstrap 的栅格、组件断点（如 col-md-6）全靠视口宽度判断。没这行，手机上永远是桌面视图缩放效果：
<meta name="viewport" content="width=device-width, initial-scale=1">
常见错误：只加了 charset 或 description，漏掉这行；或者写成 width=320 这类固定值——那响应式就彻底废了。
container / container-fluid 不是可选，是栅格系统前提
所有 row 必须放在 container 或 container-fluid 内部，否则 row 的负 margin 和 col 的 padding 会错位，导致左右溢出或列塌陷。
立即学习“前端免费学习笔记（深入）”；
使用场景判断：
-
container：居中、带左右 padding，适合常规内容区 -
container-fluid：100% 宽度、无 padding，适合 Banner、地图等铺满区域
错误示例：<div class="row"><div class="col-12">…</div></div> —— 缺 container，列宽计算失准。
JS 组件（如 dropdown、modal）必须显式初始化或引入 bootstrap.bundle.js
Bootstrap 5 移除了 jQuery 依赖，但 JS 组件仍需执行初始化。两种方式任选其一：
- 引入
bootstrap.bundle.min.js（含 Popper），且确保在 DOM 加载后执行（如放</body>前） - 手动调用 JS API，例如：
new bootstrap.Dropdown(document.querySelector('.dropdown'))
典型报错：Uncaught TypeError: bootstrap.Dropdown is not a constructor —— 多因只引了 CSS 或只引了未打包的 bootstrap.js（缺 Popper）。
自定义 CSS 覆盖 Bootstrap 时，选择器权重和加载顺序很关键
Bootstrap 的 CSS 文件必须在你自己的 CSS 之前引入，否则你的规则大概率被覆盖。更稳妥的做法是：
- 用更具体的选择器，比如把
.btn改成.my-app .btn - 避免滥用
!important，它会让后续维护变成噩梦 - 优先用 Bootstrap 提供的 Sass 变量重定义（如改
$primary），而非硬覆盖
容易被忽略的一点：Bootstrap 的 utility 类（如 mb-3、text-center）是原子化的，它们的 CSS 规则优先级很高，直接写 margin-bottom: 0 很可能无效，得用 mb-0 或更高权重的选择器。
