2. 第一个页面：一行 CDN 起步

这是什么：CDN 起步 = 不装 Node、不跑 npm，HTML 里引两行 Bootstrap 的公开 CDN 文件，单文件保存 .html 双击浏览器就能用。

为什么用：学框架最怕第一步就被环境劝退。Bootstrap 免构建就能用，先把力气花在理解「栅格」这个核心概念上；等真要上工程（npm 安装、按需定制），骨架还是这三件套，本章末尾给你路线。

如何用：本章只做一件事——做出你的第一个 Bootstrap 页面，拖动浏览器窗口，亲眼看它自己变形。

2.1 两行 CDN 引入 Bootstrap

在 HTML 里引入 Bootstrap，CSS 管长相、JS 管交互，各一行：

<!-- 样式：放 head，控制一切外观 -->
<link href="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 脚本：放 body 结尾，控制弹窗、轮播等交互 -->
<script src="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/js/bootstrap.bundle.min.js"></script>

这里用 npmmirror 公共 CDN（和 jQuery、Vue 教程选 CDN 的思路一致：公开、稳定、国内快）
想用官方源可把域名换成 https://cdn.jsdelivr.net/npm/bootstrap@5.3.8，路径相同
bundle 版把 Popper（定位气泡位置的小库）打包在内，省一件事，入门直接用 bundle

2.2 第一个页面（整段可跑）

把下面的完整页面贴进「🧪 在线运行场」，或存成 first.html 双击打开，然后左右拖动浏览器窗口宽度：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一个 Bootstrap 页面</title>
  <link href="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="mt-4">拖动窗口，看下面三个色块</h1>
    <div class="row mt-3">
      <div class="col-md-4">
        <div class="p-4 bg-primary text-white rounded">第一块</div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-success text-white rounded">第二块</div>
      </div>
      <div class="col-md-4">
        <div class="p-4 bg-warning rounded">第三块</div>
      </div>
    </div>
  </div>
</body>
</html>

你会看到：窗口宽时三个色块并排成一行，窗口变窄（约 768px 以下）自动堆成一列——没写一行 CSS，没写一个媒体查询。

2.3 逐块拆解：三件套发生了什么

Bootstrap 的页面骨架永远是这三层：

结构	类名	角色
① 容器	`container`	给内容一个居中、限宽的「画框」，两边自动留白
② 行	`row`	一条横向轨道，专门用来放列；负边距抵掉容器内边距
③ 列	`col-md-4`	格子。`4` = 占 12 列中的 4 份；`md` = 屏幕达到中等尺寸才生效

再看示例里用到的其他类，都是「白捡」的样式：

bg-primary / text-white：背景色、文字色，Bootstrap 预置的颜色类
rounded：圆角；p-4：内边距；mt-3：上边距——第 6 章工具类专讲
<meta name="viewport">：响应式的前提，手机浏览器靠它告诉页面「按设备宽度渲染」。没有这行，手机上 Bootstrap 的断点全部失效（等于用桌面宽度缩放显示）。从 HTML 教程起我们就强调它，Bootstrap 页面更是必需。

和手写 CSS 对照：CSS 教程第 6、7 章你用 display:flex + 媒体查询才做到的「三列变一列」，Bootstrap 一个 col-md-4 搞定——代价是类名是人家定死的，换来的是不用自己写规则。

2.4 container 还是 container-fluid

container 限宽居中，container-fluid 占满整行。想在大屏限宽、小屏贴边，还有响应式容器 container-md（md 以下贴边、以上限宽）。入门阶段：页面主体用 container，需要通栏背景（如导航栏）时在外层不加容器即可。

2.5 动手改

把三个色块改成四个，每块 col-md-3（3×4=12，正好一行）
试试 col-6 col-md-3：窗口很窄时会变成什么布局？
把 container 换成 container-fluid，看画框两侧留白有什么变化

2.6 小结

免构建 = CDN 引入 CSS + bundle JS，单文件双击就能跑
页面骨架三件套：container 装 → row 排 → col-* 分格
col-md-4 读法：md 及以上屏幕占 4/12，以下自动堆叠
viewport meta 必须有，否则手机断点全失效

三件套里最核心的就是那个「12 列」和「断点」，下一章把它彻底讲透。下一章：栅格系统 🐸