CDN引入需分两步：CSS放head、JS放body末尾；必须用bootstrap.bundle.min.js（含Popper）；推荐jsdelivr的Bootstrap 5.3.3官方CDN；本地双击HTML失败是因file://协议限制，应使用Live Server或本地服务。
CDN引入必须分两步：CSS放head，JS放body末尾
只加css不加js，导航栏收不起来；只加js不加css，按钮变回原生样式——这是本地双击打开html时最常遇到的“半生效”问题。根本原因是bootstrap的样式和交互是解耦的，浏览器不会自动补全缺失环节。
-
<link rel="stylesheet">标签必须放在<head>里，确保页面渲染前就加载样式 -
<script src>必须放在</body>前，否则 JS 执行时 DOM 还没就绪，下拉菜单、折叠栏全失效 - 务必用
bootstrap.bundle.min.js（含 Popper），别用bootstrap.min.js，后者缺依赖，模态框直接报错ReferenceError: Popper is not defined
CDN链接选哪个？认准 jsdelivr + Bootstrap 5.3+ 官方最新版
网上搜到的旧链接（比如 5.2.0-beta1 或 4.6.2）可能已停止维护，部分组件在新版 Chrome/Firefox 中出现兼容问题。2026 年当前稳定推荐用 jsdelivr 的官方源，它同步快、全球节点多、不带广告劫持风险。
- 最新 CSS 引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> - 最新 JS 引入：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> - 别用 BootCDN 或某些国内镜像——它们偶尔滞后一两周，
offcanvas或toast的新 API 可能不可用
为什么本地双击 HTML 文件经常失败？不是 CDN 的锅
VS Code 里右键「Open with Live Server」能跑，但直接双击 index.html 就白屏或无交互，这不是 CDN 链接错了，而是浏览器的安全策略：file:// 协议下，部分浏览器会拦截外部 script 加载（尤其带 module 特性时），或者因 MIME 类型校验失败静默失败。
- 解决办法只有一个：别双击，用 VS Code 插件「Live Server」或 Python 起个本地服务：
python3 -m http.server 8000 - 检查控制台（F12 → Console）有没有报
net::ERR_FILE_NOT_FOUND或CORS policy——有就是路径/协议问题，不是 CDN 本身挂了 - 如果非得离线验证，下载
bootstrap.min.css和bootstrap.bundle.min.js放进项目文件夹，改用相对路径引用
Vue/React 项目里别混用 CDN 和 npm 引入
在 Vue CLI 或 Vite 项目中，一边在 index.html 里写 CDN，一边又在 main.js 里 import 'bootstrap'，会导致 CSS 加载两次、JS 初始化冲突，tooltip 悬停失效、modal 点击无反应。
- 纯静态页 or 小工具页 → 用 CDN，干净利落
- Vue/React 工程 → 统一走 npm：
npm install bootstrap，然后在main.js或main.ts里import 'bootstrap/dist/css/bootstrap.min.css'和import 'bootstrap' - CDN 不支持按需导入，所有组件全量加载；npm 方式可配合 vite-plugin-import 实现组件级 tree-shaking
http:// 在 HTTPS 页面里会被浏览器主动拦截，而错误信息藏在 Security 标签页里，不是 Console。所以复制链接时，开头的 https:// 一个字符都不能少。 
