第 1 章 开庭准备：Bootstrap 基础

第 1 章 · 开庭准备：Bootstrap 基础

章节摘要：正式断案之前，先把法庭建起来。本章讲清 Bootstrap 的来历与版本差异（为什么教程统一用 5.x）、把可断点观察的开发环境搭好，并拆解类名里的「断点暗号」。读完你能独立搭起一套能实时观察断点切换的页面环境，看到任何 Bootstrap 类名都能读出它的含义。

学习目标

阅读完本章，你应当能够：

1. 说出 Bootstrap 3、4、5 三代框架在栅格与脚本上的关键差异，并解释为什么新项目应选 5.x；
2. 用 CDN 与 npm 两种方式分别搭起可运行页面，并知道各自适合什么阶段；
3. 在浏览器开发工具里实时查看当前视口宽度与命中的媒体查询；
4. 把任意类名拆成「前缀 · 断点 · 属性 · 值」四段并读出其行为。

核心概念速览

类名会过时，断点条文不会：先记规则，再记类名，是这套教程与速查手册最大的差别。

子章节导航

1.1 Bootstrap 档案与版本演化

从 2011 年 Twitter 内部工具到如今的开源框架，三代版本各自解决了什么问题。重点不是背年份，而是理解「移动优先」「Flexbox 栅格」「去 jQuery」这三个转折对今天写法的影响。

1.2 环境搭建与断点观察台

CDN 五分钟起步，npm 面向工程化。本节搭一个带「断点指示器」的观察页面：视口一变，页面立刻告诉你现在站在哪级法庭上。

1.3 基本用法：类名里的断点暗号

Bootstrap 几百个类名共享一套命名语法。掌握「前缀-断点-属性-值」的拆法，没见过的类名也能推断出七成行为。

子章节之间的逻辑关系

三节是递进关系：先知道用什么版本（1.1），再把观察工具架起来（1.2），最后用观察工具验证命名规律（1.3）。

1.1 选定 5.x ──► 1.2 搭观察台 ──► 1.3 拆类名暗号
                      │
                      └──► 第 2 章起所有断案都在观察台上进行
​

本章知识点清单

逐条可考核，学完本章请自查：

1. 能说出 2.x/3.x、4.x、5.x 三代在栅格引擎、脚本依赖、数据属性三方面的差异；
2. 能背出六个断点的名称与阈值（576、768、992、1200、1400），并解释「最小宽度」判的含义；
3. 能用 CDN 写出包含 viewport 元标签的起步页，并说明 bundle 脚本与普通脚本的区别；
4. 能在包管理工程里引入 Bootstrap 的样式与脚本；
5. 能搭建并解释断点观察台的「默认隐藏、区间显示、下区间收回」三连判；
6. 能把 col-lg-6、d-md-none、me-2 拆成「前缀 · 断点 · 值」并读出行为；
7. 能解释同族类名的阶梯覆盖与「同一断点写两个值」的失控风险。

本章办案纪律

开工前先立三条纪律，后面六章都会回头引用：

1. 版本统一用 5.x：本册所有类名、断点阈值、脚本接口都以 5.x 为准。接手 3.x 老项目时，先回 1.1 的版本对照表换算，再动手改代码，不要拿 5.x 的直觉直接套旧类名。
2. 断案以观察台实证为准：任何「某某类在某断点会怎样」的判断，都在 1.2 搭好的观察页上拖一拖视口验证。凭印象写的媒体查询九成会错一档。
3. 类名先拆解、后记忆：遇到没见过的类，先按 1.3 的四段式拆开读，再决定要不要记。记不住没关系，拆法会了，几百个类名就只是一张可推导的表。
4. 案例先预测、后验证：每节的判例都先在观察台上预测结果再拖动视口，预测错误就是最好的复习信号。

前置知识与后续延伸

• 前置知识：HTML 标签、CSS 选择器与盒模型的基本概念；会在浏览器里打开一个本地页面。
• 后续延伸：本章的观察台与命名拆解法将贯穿全册；第 2 章立即用它裁决第一批真实布局案件。