必须用官网推荐的完整CDN地址：CSS用bootstrap.min.css，JS用bootstrap.bundle.min.js（含Popper），JS放底部或加defer；栅格需container→row→col三层嵌套；断点类名按顺序书写，务必添加viewport meta标签。
怎么用CDN引入Bootstrap而不翻车
直接上手就报错 bootstrap.min.js 找不到或者 Uncaught TypeError: bootstrap is not defined，八成是没按依赖顺序引——Bootstrap 5 要求先引 Popper.js（或 @popperjs/core），再引 Bootstrap 自身，但 CDN 上的官方链接已经打包好了这个依赖，所以必须用官网推荐的完整 CDN 地址，不能自己拼。
- 用
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css引样式（放在） - 用
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js引 JS（.bundle.min.js版本含 Popper，别用不带 bundle 的） - JS 必须放在页面底部，或加
defer属性；否则 DOM 还没加载完就执行初始化会失败 - 别在本地建
css/文件夹然后瞎放 CDN 文件名——CDN 是远程地址，不是本地路径
栅格系统怎么写才不塌
写 col-6 结果两列堆成一列，或者加了 row 还是不换行，大概率是父容器没套 container 或 container-fluid。Bootstrap 栅格依赖「容器 → 行 → 列」三层嵌套，漏一层就失效。
-
container是固定宽度居中，container-fluid是 100% 宽度，选哪个看设计需求，但不能省 -
row必须是container的直接子元素，否则负 margin 会被外层干扰，列会溢出 - 列宽类名如
col-md-4中的md是断点，表示「≥768px 才生效」；小屏下默认是 100%，想小屏也分栏得加col-6这种无断点类 - 一行总列数超过 12 不会报错，但会自动换行——这不是 bug，是设计行为，但容易误以为“没生效”
按钮、表单这些组件为啥样式没出来
写了 却还是浏览器默认灰按钮，第一反应不是 CDN 没引对，就是 class 名拼错了。Bootstrap 5 移除了所有 btn-default、btn-success 以外的旧语义类，且所有组件 class 都强制带前缀，比如 form-control 不是 input-sm。
- 确认 class 名是否带
btn-、form-、nav-等前缀，Bootstrap 5 不再支持无前缀简写 - 表单控件必须加
form-control（）、form-select（）、form-check（复选框）才能有样式 - 自定义颜色用
bg-danger、text-warning这类工具类，别试图改btn-primary的背景色——它本身不含!important，直接覆盖容易冲突 - 如果用了 Sass 自定义主题但只引了 CSS CDN，那变量重写全无效——CDN 是编译后产物，不支持运行时变量
响应式断点怎么调才不卡住
加了 col-lg-3 在 iPad 上还是 100% 宽，不是断点失效，而是设备实际视口宽度没达到 lg（≥992px）阈值。很多平板横屏是 1024×768，但 viewport 缩放或浏览器 UI 占位会让 CSS 视口变小，导致断点没触发。
- 务必在
加，否则移动端断点基本废掉 - 断点类名优先级：越靠后的断点覆盖越早的，比如
col-sm-12 col-md-6表示「小屏全宽，中屏起半宽」，顺序不能反 - 想让某列在某个断点「消失」，用
d-none d-md-block，别用hidden-xs（Bootstrap 5 已移除） - 调试时右键检查元素，在 Styles 面板里手动 toggle 断点类，比反复刷新快得多
栅格和响应式看着简单，但断点计算、容器嵌套、CDN 加载顺序这三处一旦出错，表现就非常隐蔽——往往不是报错，而是“看起来差不多”，结果上线后在某个设备上突然错位。多用浏览器开发者工具的 Layout 和 Device Toolbar 实时验证，别只信本地预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
