零基础学Bootstrap需先掌握HTML/CSS基础，否则仅会套用class而无法修改样式、调试响应式；Bootstrap是CSS工具集而非网页组装包，需理解其类名逻辑、断点继承及底层布局机制。
Bootstrap 入门只要 1 天，但“会用”和“能用对”差很远
零基础学 Bootstrap，不是学框架本身有多难，而是你得先有 HTML/CSS 基础打底。没有这个前提，直接抄 class="btn btn-primary" 能点出来按钮，但改不了颜色、调不了间距、加不了响应式断点——最后全靠百度+复制粘贴，一换项目就卡壳。
真正卡人的地方是：Bootstrap 的 class 不是魔法咒语，它背后是 CSS 规则、Flex 布局逻辑、媒体查询优先级。所以别指望“学完 Bootstrap 就等于学会前端布局”，它只是帮你绕开手写重复样式，不是帮你跳过理解样式机制。
- 如果你连
<div>和<span>区别都不熟，建议先花 2–3 天补 HTML 结构语义 - 如果写不出居中一个盒子的三种方式（
margin: auto/flex/text-align + inline-block），CSS 盒子模型那一关没过，Bootstrap 的container、row、col你会用得非常机械 - Bootstrap 5 已移除 jQuery 依赖，但很多老教程还在讲
$().modal('show')，直接照搬会报ReferenceError: $ is not defined
为什么很多人学了 3 天还是不会搭首页？
因为把 Bootstrap 当成“网页组装包”，而不是“CSS 工具集”。你抄了个导航栏示例，但删掉 navbar-expand-lg 就塌了；加了个轮播图，但图片不自适应，文字叠在上面——问题不在 Bootstrap，而在你没看懂它的响应式类名设计逻辑。
-
col-6是移动端占半宽，col-md-4是 ≥768px 才生效，col-lg-3是 ≥992px 才生效；混用时注意断点继承关系 -
bg-dark默认文字是白色，但如果你套在已有text-white的元素上，再加个text-muted，颜色可能被覆盖失效 - 自定义主题色要改
$primary变量并重新编译 Sass，不是改个 CSS 文件就能全局替换
本地跑通第一个 Bootstrap 页面，30 分钟够用
别下载完整源码包、别配 Webpack、别折腾 npm start。新手最该做的，是用 CDN 快速验证效果，把注意力放在 class 组合和 DOM 结构上。
在 <head> 里加这三行（Bootstrap 5.3 官方 CDN）：
<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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
- 必须引入
bootstrap.bundle.min.js（含 Popper），否则dropdown、tooltip功能直接白屏 - 别用
bootstrap.min.js单文件，它不含 Popper，控制台会报Popper is not found - CDN 加载失败时页面空白？加个
onerror回退到本地文件或提示，别让新手以为自己代码写错了
学完 Bootstrap 后最容易忽略的一件事
你写的页面，在 Chrome 里看着完美，但在 Safari iOS 15 上 flex 子项错位、在微信内置浏览器里 modal 背景不遮罩——这些不是 Bootstrap 的 bug，是它默认启用的现代 CSS 特性（如 gap、aspect-ratio）在旧环境不支持。
真实项目里，你得查 caniuse.com，得知道 col 类底层用的是 flex 还是 grid，得手动加 @supports 或降级方案。没人替你做兼容性兜底，Bootstrap 只提供“主流现代浏览器可用”的保证，不是“所有手机都能跑”。
