cdn引入bootstrap 5必须分两步：先加css再加js，且必须用bootstrap.bundle.min.js（含popper），css放head、js放body前；本地开发禁用file://协议，需用live server等本地服务；npm引入须显式import css和js，data属性统一用data-bs-*。
CDN引入必须分两步：CSS放，JS放前
只加CSS不加JS，下拉菜单、折叠栏点不动；只加JS不加CSS，按钮变回原生灰框——这是本地双击HTML时最常遇到的“半生效”问题。根本原因是Bootstrap 5把样式和交互完全解耦，浏览器不会自动补全缺失环节。
务必用bootstrap.bundle.min.js，别用bootstrap.min.js。后者不含Popper，模态框、Tooltip、Dropdown一调就报ReferenceError: Popper is not defined。
-
<link rel="stylesheet">必须放在里，否则页面先渲染再上样式，出现FOUC（闪白） -
<script src></script>必须紧贴上方，DOM没就绪就执行JS，data-bs-toggle全失效 - 推荐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 - 别混用CDN域名，比如同一项目里同时用jsdelivr和bytecdntp，部分地区会加载失败或触发跨域警告
本地引入要避免file://协议限制
双击HTML文件打不开模态框？不是代码错，是浏览器禁了file://协议下的AJAX和模块加载。Bootstrap的bootstrap.bundle.min.js内部依赖动态资源加载逻辑，在file://下直接静默失败。
解决办法只有两个：
- 用VS Code插件
Live Server右键启动，地址变成http://127.0.0.1:5500/xxx.html - 或者用
npx serve、python3 -m http.server起个最小本地服务 - 手动下载时，解压后只取
dist/css/bootstrap.min.css和dist/js/bootstrap.bundle.min.js，别用js/bootstrap.min.js - 路径写相对路径，如
./static/css/bootstrap.min.css，绝对路径C:\xxx\在不同机器上必然挂掉
npm安装后必须显式import CSS和JS
运行npm install bootstrap@5.3.3只是把文件下到node_modules，不import就等于没装。Bootstrap 5已彻底移除jQuery依赖，也**不再自动注入全局$或bootstrap对象**。
常见错误是只写import 'bootstrap'，这只会加载JS，CSS仍为空——因为ESM默认不处理CSS导入。
- 在入口JS里写两行：
import 'bootstrap/dist/css/bootstrap.min.css'和import 'bootstrap' - Vite项目需确认
vite.config.ts中已启用css: { modules: false }，否则工具类可能被误当CSS Module处理 - 若用SCSS自定义主题，应
import 'bootstrap/scss/bootstrap.scss'并确保已配Sass加载器（如vite-plugin-sass） - 所有data属性必须用
data-bs-*，data-toggle在5.x里已无效
CDN与本地引入的核心差异在调试与构建阶段
CDN快、省事，但上线后无法控制版本漂移，且国内偶尔有偶发性加载延迟；本地引入打包进产物，体积增加约200KB，但可tree-shake（需配合SCSS按需导入）、可Source Map调试、能规避CDN单点故障。
真正容易被忽略的是：无论哪种方式，bootstrap.bundle.min.js里的Popper实例是内置绑定的，你不能再单独import @popperjs/core，否则会因多个Popper实例冲突导致Tooltip定位错乱。
另外，Bootstrap的CSS是全局作用域，哪怕你只用了btn btn-primary，整套reboot、type scale、utility classes都会打进包——这不是bug，是设计如此。
