Bootstrap安装最稳妥方式是本地引入预编译文件：下载v5.3版，取css/bootstrap.min.css、js/bootstrap.bundle.min.js（含Popper）和fonts/，按路径放入项目；CSS放，JS放前，必加viewport标签，避免路径大小写错误与非bundle版误用。
直接引入Bootstrap CSS/JS文件最稳妥
别折腾CDN或npm——HBuilderX默认不带Node环境，npm install bootstrap会失败，本地引入是最省心的方案。去Bootstrap官网下载v5.3预编译版，解压后只取三个东西：css/bootstrap.min.css、js/bootstrap.bundle.min.js（注意是bundle版，含Popper）、fonts/（如果用到图标）。把它们按路径放进项目根目录或统一放在lib/下，比如：lib/bootstrap/css/、lib/bootstrap/js/。
HTML里和<script>顺序不能错</script>
常见错误是bootstrap.bundle.min.js加载在里，或者没等DOM就执行依赖它的JS，结果按钮没反应、下拉菜单点不开。正确写法必须：
-
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">放在内 -
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>放在前 - 确保页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则响应式失效
用HBuilderX补全时得手动触发HTML标签提示
HBuilderX对Bootstrap类名不自动提示，但能识别基础HTML结构。想快速写<button class="btn btn-primary"></button>，不要靠敲完再补全——先输入<button>，按<code>Ctrl+Space唤出标签补全，选中后光标停在class=""引号内，这时再手动输btn btn-primary。如果发现连<button></button>都不提示，检查是否启用了Vue 3支持插件（设置→插件→已启用列表里要有vue3），否则HTML骨架补全会降级。
调试时浏览器控制台报“Popper is not defined”
这说明你用了非bundle版的bootstrap.min.js，它依赖外部Popper，而HBuilderX没帮你装。立刻换回bootstrap.bundle.min.js，并确认路径没错——常见坑是把js/写成JS/（Windows不敏感，但导出到Linux服务器就404）。另外，HBuilderX内置浏览器预览（Ctrl+R）有时不刷新JS变更，建议右键index.html→“在浏览器中打开”，用Chrome/Firefox亲自测试。
真正卡住的地方往往不是语法，而是路径大小写、bundle版误用、viewport漏写这三处——它们不会报红，但会让栅格错位、组件失灵、手机端变巨宽。每次加完Bootstrap，先用<div class="container"><div class="row"><div class="col-12">test</div></div></div>跑通最简结构，再往上堆功能。
