直接用 CDN 引入 CSS 框架即可快速使用组件，无需构建工具；需严格按文档写 HTML 结构、正确引入 CSS/JS、初始化 JS 组件、覆盖 CSS 变量自定义样式，并注意移动端兼容性与无障碍访问。
直接用 CDN 引入，别碰构建工具
大多数 CSS 框架（比如 Bootstrap、Tailwind、Bulma）的预置组件，根本不需要 npm install 或配置 webpack。你只是想快速加个 button 或 modal，不是要定制主题或做 SSR 渲染。
常见错误是看到文档里有 npm install bootstrap 就照抄，结果卡在 import 'bootstrap/dist/css/bootstrap.min.css' 报错——因为没配 loader，也没开 dev server。
- 打开框架官网，找「Quick Start」或「CDN」章节，复制
<link>和<script></script>标签 - 粘贴到 HTML 的
里（CSS）和底部（JS，如果组件需要） - 确认页面已加载完成再调用 JS 组件，比如
new bootstrap.Modal(...)要等DOMContentLoaded - 注意 CDN 版本号是否匹配文档示例，
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3和@5.2.0的data-bs-*属性可能不兼容
HTML 结构必须严格按文档写，别“差不多就行”
CSS 框架的组件样式依赖特定 class 名称和嵌套结构，漏一个 class="btn" 或多一层 <div>，按钮就变回原生模样；少个 <code>data-bs-toggle="modal"，点击就没反应。
典型翻车现场：把 Bootstrap 的 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"></button> 改成 <button onclick="openModal()"></button>，然后发现 backdrop 不显示、ESC 关不掉——因为 JS 初始化逻辑全靠 data 属性触发。
立即学习“前端免费学习笔记（深入）”；
- 不要手写 class，直接复制文档里的完整 HTML 示例块
- 检查是否有拼写错误：
data-bs-toggle不是data-bs-show，form-control不是form-input - 某些组件（如 Toast、Dropdown）需要额外 JS 初始化，光写 HTML 不生效
- 避免用 CSS 重置库（如 normalize.css）覆盖框架默认 margin/padding，会导致栅格错位
自定义颜色/尺寸？改 CSS 变量，别动源码
想把 Bootstrap 的 primary 色从蓝色改成品牌紫，最省事的是覆盖 CSS 变量，而不是去改 SCSS 文件、重编译、再引本地 CSS——那已经脱离“快速使用”范畴了。
所有现代 CSS 框架（Bootstrap 5+、Tailwind、Bulma）都提供 CSS 自定义属性（--bs-primary、--tw-bg-opacity），优先级高、无需构建、热更新即见效果。
- 在你的
<style></style>标签或独立 CSS 文件中，写:root { --bs-primary: #6366f1; } - 确保该样式表引入顺序在框架 CSS 之后，否则变量不会生效
- 不要用
!important去硬盖 class，会破坏响应式断点和状态伪类（如.btn:hover） - Tailwind 用户注意：
tailwind.config.js仅在构建时生效，CDN 版本不读这个文件
移动端弹窗/下拉菜单打不开？检查 body overflow 和 tabindex
用 Modal 或 Dropdown 后，手机点不动、背景不能滚动、键盘 Tab 失效——大概率是框架 JS 自动加了 overflow: hidden 到 ，但你的项目已有其他脚本也操作 body.style，互相覆盖了。
另一个高频问题是组件内部元素缺失 tabindex，导致无法键盘操作，也影响屏幕阅读器识别，部分框架（如 Bootstrap）要求手动加 tabindex="-1" 到模态框容器。
- 打开 DevTools，在 Elements 面板里搜索
body，看是否有意外的style="overflow: hidden;"残留（比如上一个 Modal 关闭失败） - 给
<div class="modal"> 加 <code>tabindex="-1"，并确保aria-labelledby指向正确标题 ID - 禁用浏览器扩展（尤其是广告拦截、暗黑模式插件），它们可能劫持
document.body的 style 属性 - 不要在 Modal 内部用
position: fixed的子元素，会脱离框架的 z-index 管理体系
真正麻烦的从来不是“怎么加一个按钮”，而是组件在不同设备、不同焦点状态、不同 DOM 生命周期下的行为一致性。别急着封装，先让单个 Modal 在 iOS Safari 里点三次都能正常关闭。
