Bootstrap仅引入CSS可显示样式但交互组件失效；必须同时引入bootstrap.bundle.min.js（含Popper），且CSS放、JS放前，结构需符合语义规范。
直接加 Bootstrap CDN 就能用，但别只加 CSS
加了 bootstrap.min.css 确实能让按钮、表格看起来像 Bootstrap 风格，但很多组件（比如折叠菜单、模态框、下拉）根本动不了——它们依赖 JavaScript。漏掉 JS 文件是新手最常踩的坑。
必须同时引入：
-
bootstrap.min.css（放在） -
bootstrap.bundle.min.js（放在前，且要确保已加载popper.js；用bundle版本就不用单独引 popper）
推荐用官方 CDN（v5.3+）：
<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>
class 名不是“套皮”，得按 Bootstrap 的语义重写结构
Bootstrap 不是滤镜，不能把 <div class="my-btn"> 改成 <code><div class="btn btn-primary"> 就完事。它要求 HTML 结构配合 class 语义：比如导航栏必须用 <code><nav class="navbar"></nav> + <div class="container"> + <code><ul class="navbar-nav"></ul> 才能触发响应式折叠逻辑。
常见替换对照：
- 原
<h1>标题</h1>→ 改用<h1 class="display-4"></h1>或<h1 class="h2"></h1>（Bootstrap 提供语义化字号类，不建议只靠font-size） - 原浮动布局
float: left→ 全部换成col-md-6/row/d-flex等栅格或工具类 - 原自定义表单样式 → 替换为
<div class="form-group"> + <code><input class="form-control">+<select class="form-select"></select>JavaScript 组件要手动初始化，HTML data 属性只是快捷方式
比如你想用 Tooltip，光写
<button data-bs-toggle="tooltip" title="提示"></button>是没用的——页面加载后还得主动调用 JS 初始化：const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))否则控制台可能报错：
TypeError: Cannot read properties of undefined (reading 'Tooltip')，说明bootstrap对象未加载或执行时机太早。注意点：
- 确保脚本在
bootstrap.bundle.min.js加载之后执行 - 如果用了模块打包（如 Webpack），改用
import { Tooltip } from 'bootstrap'，不要混用 CDN 和 npm 引入 -
data-bs-toggle中的bs是 Bootstrap 5+ 的命名空间，别写成data-toggle（那是 v4）
自定义样式容易和 Bootstrap 冲突，优先用 utility class 覆盖
别急着写
.my-header { color: #ff6b35 !important; }。Bootstrap 的 utility class（如text-warning、bg-dark、py-4）有明确的 CSS 优先级和响应式断点，比手写 class 更可靠。覆盖技巧：
- 想微调间距？用
mt-3、mb-0，而不是margin-top: 1rem - 需要新颜色？先查 Bootstrap 调色板（
text-success、bg-info），不够再扩展主题，别直接color: #xxx - 真要加专属样式，把 class 放在 Bootstrap CSS 之后，并利用命名空间（如
app-header）降低污染风险
最易被忽略的是：Bootstrap 默认启用
reboot.css（重置基础样式），它会改的 margin、button的 border 等。如果你原有样式严重依赖浏览器默认行为，得先看 reboot 做了什么，再决定是否禁用部分规则。 - 确保脚本在
