Bootstrap 5 最小可用结构需三行关键代码：viewport meta 标签、CSS CDN、bootstrap.bundle.min.js（含 Popper）；container/row 是栅格前提；交互组件需 data-bs-* 属性或 JS 初始化；断点命名中 xs 无前缀。
直接上手写一个能跑起来的页面，比看十页文档更有效——Bootstrap 5 的最小可用结构就三行关键代码，缺一不可。
必须加上的 <meta name="viewport"> 标签
没它，所有响应式效果都会失效，手机访问时页面会缩成一团、文字小得看不见。这不是 Bootstrap 的 bug，而是浏览器默认行为。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在里，且在任何 CSS 引入之前 - 漏掉或写错（比如写成
device-widths多了个 s）会导致col-md-6在手机上不收缩、navbar-toggler点击无反应 - 部分编辑器模板会自动生成，但手动新建 HTML 文件时极易忽略
CDN 引入顺序不能乱：CSS → Popper → JS
Bootstrap 5 的 JS 组件（如 modal、dropdown）依赖 Popper 库做定位计算，顺序错了组件直接不工作。
- 正确顺序：
<link>引入 CSS →<script></script>引入 Popper →<script></script>引入bootstrap.bundle.min.js - 用
bootstrap.min.js（非 bundle 版）会报ReferenceError: Popper is not defined - CDN 地址建议用官方推荐的 jsdelivr 或 cdnjs，避免某些镜像缺失
bundle版本
container 和 row 不是可选装饰，是栅格系统生效的前提
直接写 <div class="col-6"> 是无效的。Bootstrap 的列（<code>col）必须嵌套在 row 里，而 row 又该放在 container 或 container-fluid 中。
- 常见错误：把
col直接丢在下，结果宽度失控、左右溢出 -
container有最大宽度限制（如 lg 屏下为 960px），container-fluid才是 100% 宽度，别混用 -
row内部自动触发负 margin 抵消col的 padding，跳过它会导致列之间出现意外间隙
组件初始化不是“写了 class 就自动动”，JS 插件要手动触发或靠 data 属性
比如 tooltip、popover、collapse 这些交互组件，光写 HTML 不够，要么加 data-bs-toggle 属性，要么用 JS 调用 new bootstrap.Tooltip()。
-
data-bs-toggle="tooltip"必须配合title属性，否则鼠标悬停没反应 - 用 JS 初始化时，元素必须已存在于 DOM 中——别在
<script></script>标签里直接 new，应包裹在DOMContentLoaded事件里 -
modal默认是隐藏的，需用data-bs-toggle="modal"+data-bs-target="#id"关联触发按钮和模态框容器
最常被忽略的其实是「断点命名规则」：xs 没有前缀（col-6），sm 及以上才带后缀（col-sm-6）。写成 col-xs-6 或 col-md-6 col-sm-12 却忘了 col-6，就会导致小屏下布局崩塌——这问题不会报错，只会在手机上静默失效。
