最直接有效的方式是通过 CDN 引入 Bootstrap，但必须按顺序加载 CSS、Popper 和 bootstrap.bundle.min.js，并添加 viewport meta 标签以确保移动端适配。
index.html 中引入 Bootstrap，最直接有效的方式是通过 CDN，但必须注意加载顺序、依赖项和移动端适配——否则样式不生效、组件点击无反应、手机端布局错乱都是常见结果。
CDN 引入要按顺序加 script，不能只加 CSS
Bootstrap 的 JavaScript 组件（如 dropdown、modal、collapse）依赖 Popper 和（旧版）jQuery。Bootstrap 5+ 已移除 jQuery 依赖，但仍强依赖 @popperjs/core。
所以哪怕你只用 CSS 类（比如 btn btn-primary），只要后续要启用 JS 插件，就必须按顺序引入：
• 先加 <link> 引入 CSS（放在 <head>）
• 再在 <body> 底部依次引入：popper.min.js → bootstrap.bundle.min.js（含 Popper）
• 不要用 bootstrap.min.js 单独文件，它不含 Popper，会报 ReferenceError: Popper is not defined
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">菜单</button>
<ul class="dropdown-menu"><li><a class="dropdown-item">选项</a></li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>本地引入时路径写错会导致 404，public 目录才是根路径
Vue 项目中，index.html 是从 public/ 目录被服务的，所有相对路径都以该目录为基准。
把 bootstrap.min.css 和 bootstrap.bundle.min.js 放进 public/ 后，引用必须写成：
• <link rel="stylesheet" href="bootstrap.min.css">（不是 ./bootstrap.min.css，也不是 /public/bootstrap.min.css）
• <script src="bootstrap.bundle.min.js"></script>
• 如果放进了子目录如 public/libs/bootstrap/，路径就得写成 libs/bootstrap/bootstrap.bundle.min.js
不加 viewport meta 标签，移动端就白引了
很多开发者引入成功后发现 iPhone 上页面缩成一团、按钮点不中，根本原因是漏了这行：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
• <meta name="viewport" content="width=device-width, initial-scale=1"> 必须放在 <head> 里
• 缺失时浏览器会以桌面宽度渲染，再缩放显示，导致响应式断点失效、col-md-6 等类完全不触发
• Vue CLI 创建的项目默认已有该标签，但手动新建 index.html 或从静态模板拷贝时极易遗漏
真正容易被忽略的点在于：CDN 地址里的版本号（如 @5.3.3）一旦过期或被墙，整个 UI 就会降级为纯 HTML；而本地引入看似稳定，却要求每次升级都要手动替换文件、校验完整性。生产环境建议用 npm 安装 + 构建时打包，index.html 直接引入只适合原型验证或超轻量静态页。
