最直接有效的方式是通过 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（放在 ）
• 再在 底部依次引入：popper.min.js → bootstrap.bundle.min.js（含 Popper）
• 不要用 bootstrap.min.js 单独文件，它不含 Popper，会报 ReferenceError: Popper is not defined
<meta> <meta> <link> <div> <button>菜单</button> <ul><li><a>选项</a></li></ul> </div> <script></script> <script></script>
本地引入时路径写错会导致 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"> 必须放在 里
• 缺失时浏览器会以桌面宽度渲染，再缩放显示，导致响应式断点失效、col-md-6 等类完全不触发
• Vue CLI 创建的项目默认已有该标签，但手动新建 index.html 或从静态模板拷贝时极易遗漏
真正容易被忽略的点在于：CDN 地址里的版本号（如 @5.3.3）一旦过期或被墙，整个 UI 就会降级为纯 HTML；而本地引入看似稳定，却要求每次升级都要手动替换文件、校验完整性。生产环境建议用 npm 安装 + 构建时打包，index.html 直接引入只适合原型验证或超轻量静态页。
立即进入“夸克AI手把手教你，操作像呼吸一样简单！☜☜☜☜☜点击进入”；
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
