sublime text 无法一键生成 bootstrap 模板，需组合安装 package control、emmet 和 bootstrap 5 snippets 插件，并配合自定义 snippet（如 bs5-html）才能实现高效开发；缺任一环节都会导致类名或组件补全失效。
Sublime Text 本身不提供 Bootstrap 模板生成功能，所谓“安装 Bootstrap 插件”实际是安装代码片段（snippets）或补全增强工具；真正能快速写出 Bootstrap 项目的，靠的是 Emmet + Bootstrap Snippets + 自定义 .sublime-snippet 的组合，而不是一键建站。
怎么装出“有提示”的 Bootstrap 开发环境
不是装一个叫 “Bootstrap” 的插件就完事。你得装三类东西：基础补全引擎、Bootstrap 类名缩写支持、组件级代码块。缺一不可，否则输入 btn 不弹 btn btn-primary，或敲 bs5-navbar 没反应，都是因为漏了某一层。
-
Package Control必须先装好——它是所有插件的入口，没它就别谈后续 -
Emmet负责解析.container>.row>.col-6这类语法，也顺带补全 Bootstrap 类名（如btn.btn-success） -
Bootstrap 5 Snippets（或Bootstrap 4 Snippets）提供bs5-modal、bs5-card等完整组件插入能力，但只在 HTML 语法下生效 - 别装
Bootstrap 3 Snippets（已停止维护），也别信“Bootstrap Completion”这类名字模糊的插件——很多年没更新，对 Bootstrap 5 的data-bs-*属性完全不识别
为什么输入 bs5-html 没反应
常见现象：装完 Bootstrap 5 Snippets，在 HTML 文件里输 bs5-html 或 template:html5，按 Tab 没任何输出。根本原因只有两个：
- 当前文件没设为
HTML语法：右下角显示不是HTML，而是Plain text或XML—— 点击那里手动切过去 - 插件未正确加载：重启 Sublime Text 后，在命令面板（
Ctrl+Shift+P）输入Package Control: List Packages，确认列表里真有Bootstrap 5 Snippets（注意大小写和空格） - 某些版本的插件把前缀改成了
bs5-而非bootstrap5-，试试bs5-container而不是bootstrap5-container - 如果用的是 Sublime Text 4，部分老 snippet 会因语法变更失效，此时应优先用自定义 snippet 替代
怎么自己写一个 bootstrap5-html 模板 snippet
比依赖第三方插件更稳、更可控的方式：直接建一个 bootstrap5-html.sublime-snippet 文件，放在 Packages/User/ 目录下。这样无论插件更新还是崩溃，你的模板都在。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
内容示例（复制保存即可）：
<snippet><content><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${1:Page Title}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
${2:<!-- content -->}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>]]></content><tabtrigger>bs5-html</tabtrigger><scope>text.html.basic</scope></snippet>
-
<tabtrigger></tabtrigger>决定你敲什么触发，这里设为bs5-html -
<scope></scope>必须是text.html.basic（Sublime Text 4 默认 HTML 语法标识），不是text.html或source.html -
${1:Page Title}和${2:...}是 tab 停留位，方便快速编辑 - CDN 地址用的是
jsdelivr，比官网 CDN 更稳定；若需离线开发，把href和src改成本地路径即可
Emmet 和 Bootstrap Snippets 冲突怎么办
典型表现：输 bs5-card 按 Tab，出来的是 Emmet 解析的 <bs5-card></bs5-card>，而不是 Bootstrap 卡片结构。这是因为 Emmet 默认劫持所有以字母开头的缩写。
- 打开
Preferences → Package Settings → Emmet → Settings - 在用户设置里加一行：
"abbreviations": {}（清空 Emmet 自定义缩写，避免干扰） - 或者更精准地：把
Bootstrap Snippets的触发前缀加进 Emmet 的白名单，比如加"bs5-": "div.card"，但不如直接关掉缩写冲突来得干脆 - 另一个办法：用
Ctrl+Shift+P→ 输入Insert Snippet，从菜单里选Bootstrap 5 Snippets下的具体项，绕过 Tab 触发
最常被忽略的一点：Bootstrap 5 的 JS 组件（如 Modal、Dropdown）依赖 bootstrap.bundle.min.js，而不是单独的 popper + bootstrap。snippet 里漏掉 bundle，写完也跑不起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
