根本原因是路径解析逻辑不同：浏览器双击打开 file:// 协议下，相对路径按文件系统解析；而服务端渲染时，所有资源请求由浏览器向服务端发起，需用绝对url或根路径。
CDN 引入组件库时，为什么本地双击能跑、服务端渲染就 404？
根本原因是路径解析逻辑不同：浏览器双击打开 file:// 协议下，相对路径（如 ./css/bootstrap.css）按文件系统找；而 Gin / Flask / Express 等服务端渲染时，HTML 被当作响应体返回，所有资源请求由浏览器向服务端发起，路径必须是绝对 URL 或以 / 开头的根路径。
常见错误是把 CDN 地址写成相对路径，比如误写成：<link rel="stylesheet" href="./css/bootstrap.min.css"> —— 这实际会触发对 http://localhost:8080/css/bootstrap.min.css 的请求，而非 CDN。
- 正确做法：CDN 地址一律用完整 HTTPS 链接，如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 服务端模板中避免任何
./或../开头的静态资源引用 - 若需本地 fallback，可用
<link>的onerror回退到本地路径，但生产环境不建议依赖此机制
Bootstrap 的 data-bs-toggle="modal" 不生效，该查什么？
这不是 JS 未加载那么简单。Bootstrap 5 的交互组件（modal、dropdown、tooltip）依赖 bootstrap.bundle.min.js，它内置了 Popper，而单独引入 bootstrap.min.js（无 bundle）不含 Popper，会导致初始化失败且控制台无明显报错。
- 检查是否引入的是
bootstrap.bundle.min.js，不是bootstrap.min.js - 确认
<script></script>标签在 DOM 尾部或加defer，避免脚本执行时 DOM 未就绪 - 确认触发元素有合法的
data-bs-target或href指向对应id，且目标<div class="modal"> 结构完整（含 <code>.modal-dialog和.modal-content） - 如果用了其他 JS 库（如 jQuery），注意 Bootstrap 5 已移除 jQuery 依赖，混用可能引发冲突
- Bootstrap 的
btn btn-primary是一套带状态（:hover、:focus、:disabled）、适配深色模式、响应式断点的完整契约，手写样式只覆盖了其中一环 - 自定义 CSS 若没加
!important，大概率被 Bootstrap 后加载的规则覆盖；加了!important又导致后期调试时找不到样式源头 - 升级 Bootstrap 版本后，
btn-primary的背景色可能变（如从#007bff改为#0d6efd），你的.my-btn却还固守旧值，视觉脱节 - 真正需要定制时，应改 Sass 变量或用 CSS 自定义属性（
--bs-btn-bg），而非绕过框架另起炉灶 - 外层容器必须带唯一前缀类，如
<div class="cmp-card">，内部子元素用 BEM 风格：<code>cmp-card__header、cmp-card__body - 用
data-属性传递配置，例如<div class="cmp-card" data-size="lg" data-shadow="true">，JS 初始化时读取并响应<li>内容区留空+注释说明用途，如 <code><div class="cmp-card__content"><!-- 插入正文 --></div>，避免硬编码文本或结构 - 禁止在组件内写全局样式（如
h3 { color: red; }），所有样式必须限定在前缀类作用域内
为什么别在 Bootstrap 项目里手写 .my-btn { background: #007bff; }？
这不是“风格不统一”的审美问题，而是维护性灾难：类名语义断裂 + 样式优先级失控 + 升级不可控。
纯 HTML 模板里怎么让一个卡片区块“真正可复用”？
没有构建工具、没有框架，所谓“组件化”靠的是人为约定和边界意识。关键不是封装多严密，而是“复制粘贴到新页面还能正常工作”。
这套约束看起来琐碎，但一旦漏掉任意一条，下次复制该卡片到另一个页面时，就会发现标题颜色变了、阴影没了、或者内容撑破布局——而你得花半小时翻 CSS 才找到原因。
