Bootstrap 5.3+ CDN引入最稳妥，只需两行代码：CSS放内，JS用bootstrap.bundle.min.js放前；缺一不可，否则样式或交互失效。
直接用 CDN 引入最稳妥，Bootstrap 5.3+ 只需两行代码：一个 link 加 CSS，一个 script 加 bootstrap.bundle.min.js，别的都不用管。
CDN 引入必须写对的两处位置
Bootstrap 的 CSS 必须放在 里，JS 必须放在 前（不是 底部）：
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">—— 放在内，缺它所有样式失效 -
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>—— 放在最底部，标签正上方；放太早会报Cannot read property 'addEventListener' of null - 别用
bootstrap.min.js单独引入，它不带 Popper，Dropdown、Modal 等组件会静默失效 - Bootstrap 5 不需要 jQuery，如果项目里已有 jQuery，确保它没干扰
bootstrap.Modal实例创建（比如未隔离作用域）
为什么写了 class 却没效果？先盯这三个地方
常见“引入了但没反应”，90% 是加载或结构问题，不是代码写错：
- 打开开发者工具（F12）→ Network 面板，确认
bootstrap.min.css和bootstrap.bundle.min.js都返回 200；404 或 CORS 错误说明 CDN 地址抄错、路径写成相对路径，或本地服务没配静态资源路由 - Console 面板看有没有
ReferenceError: bootstrap is not defined（JS 没加载）或TypeError: Cannot read property 'addEventListener' of null（DOM 元素还没挂载 JS 就执行了） - Elements 面板点一个
container元素，右侧 Styles 里搜max-width，值如果不是来自bootstrap.min.css，说明 CSS 根本没生效
栅格系统失效？大概率是结构塌了
Bootstrap 的 col-6 不等宽、不换行，不是断点写错，而是嵌套规则被破坏：
立即学习“前端免费学习笔记（深入）”；
- 必须严格按
container→row→col三层嵌套；row是唯一设了display: flex的容器，漏掉它，col就只是普通块元素 - 错误写法：
<div class="col-6">左</div> <div class="col-6">右</div>—— 平级 div，不会 flex 分配 - 正确骨架：
<div class="container"><div class="row"> <div class="col-6">左</div> <div class="col-6">右</div> </div></div> -
container提供居中和响应式最大宽度；container-fluid铺满全宽；别手动给row加margin，它默认左右各 15px padding（gutter）
真正容易被忽略的是：Bootstrap 5 的交互功能（下拉、模态框、提示框）全部依赖 bootstrap.bundle.min.js 里的内置 Popper，单独引 JS 文件或额外加 Popper 脚本反而会冲突。另外，HTML 必须以 开头，且 <code> 标签带 lang 属性，否则部分媒体查询和重置样式可能不生效。
