最稳妥快速的cdn引入方式是按顺序引入css、popper和bootstrap js三者，并添加viewport meta标签；必须用bootstrap.bundle.min.js或单独引入popper，且script需置于前，meta必须在中。
直接在 index.html 里引入 Bootstrap，最稳妥、最快能出效果的方式是用 CDN，但必须配齐三样东西：CSS、Popper、Bootstrap JS，且顺序不能错，否则下拉菜单、Tooltip 等组件会失效。
CDN 引入要写全这三行，缺一不可
很多人只加了 CSS 和 JS，漏掉 Popper，结果 dropdown 点不开、tooltip 不显示。Bootstrap 5+ 已移除 jQuery 依赖，但 Popper 是硬性依赖：
<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/@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.min.js"></script>
注意：popper.min.js 必须在 bootstrap.min.js 之前加载；bootstrap.min.css 必须在 里，其他两个 script 放在 前更稳妥。
viewport meta 标签不加，手机端布局就废了
Bootstrap 响应式能力依赖 <meta name="viewport" content="width=device-width, initial-scale=1">。没这行，哪怕用了 col-md-6，在手机上也会被缩成一团、文字糊作一片。
常见错误：
- 只写了
<meta charset="UTF-8">，漏掉 viewport - 写了但拼错，比如写成
viewpoint或漏掉initial-scale=1 - 放在
里（必须在）
用本地文件时，路径别写错，优先用 bootstrap.bundle.min.js
如果下载了 Bootstrap ZIP 包，解压后别直接引用 bootstrap.min.js —— 它不含 Popper，得自己再引一次。推荐直接用 bootstrap.bundle.min.js，它已内置 Popper。
路径示例（假设你把 bootstrap.bundle.min.js 放在 js/bootstrap.bundle.min.js）：
- CSS：
<link href="css/bootstrap.min.css" rel="stylesheet"> - JS：
<script src="js/bootstrap.bundle.min.js"></script>
注意：路径是相对于 index.html 文件的，不是相对于当前目录或服务器根目录。用浏览器 F12 查看 Network 面板，404 就说明路径错了。
引入后按钮/栅格不生效？先检查 class 拼写和结构
CDN 和 meta 都对了，但 <button class="btn btn-primary"></button> 还是没样式？大概率是 class 名写错或 HTML 结构不合法：
-
btn-primary不是btn-primarys或btn_primary - Bootstrap 5 不再支持
btn-lg单独使用，得搭配btn：正确是class="btn btn-primary btn-lg" - 栅格系统必须套在
container或container-fluid里，<div class="row"><div class="col">xxx</div></div>不能裸写在最外层
真正容易被忽略的是：Bootstrap 5 默认禁用旧版表单控件样式（如圆角输入框），要用 form-control 才生效；还有，所有 JS 组件（如 modal、collapse）都必须有对应 data 属性或通过 JS 初始化，光写 HTML 不会自动激活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
