1.2 环境搭建与断点观察台
文档摘要
1.2 环境搭建与断点观察台 搭建 Bootstrap 环境有两条路：CDN 引入（五分钟可用，适合学习与静态页）与 npm 安装（面向工程化，可深度定制）。本节除了跑通两条路，还要在页面右下角挂一个「断点观察台」——视口一变，它立刻报出当前站在哪级断点，后续所有章节的断案都靠它取证。 上一节判定了版本：以 5.x 为法典。本节把这部法典装进你的页面，并制造一件丈量断点的工具。它承接 1.1 的版本结论，通往第 2 章——容器与栅格的每个案件都要用观察台复核。 路线一：CDN 起步页 学习阶段用 CDN 最省事，样式与脚本各引一行： 要点有三。 缺失时手机浏览器会假装自己是 980px 宽的桌面，所有断点判断随之失效——这是新手页面上断点「全不生效」的头号原因。
1.2 环境搭建与断点观察台
搭建 Bootstrap 环境有两条路：CDN 引入（五分钟可用，适合学习与静态页）与 npm 安装（面向工程化，可深度定制）。本节除了跑通两条路，还要在页面右下角挂一个「断点观察台」——视口一变，它立刻报出当前站在哪级断点，后续所有章节的断案都靠它取证。
上一节判定了版本：以 5.x 为法典。本节把这部法典装进你的页面，并制造一件丈量断点的工具。它承接 1.1 的版本结论，通往第 2 章——容器与栅格的每个案件都要用观察台复核。
路线一：CDN 起步页
学习阶段用 CDN 最省事，样式与脚本各引一行：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- viewport 元标签是响应式的总开关：缺了它，手机会按 980px 宽的桌面页渲染，断点全部失真 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 起步页</title> <!-- 编译好的样式：head 里引入，尽早阻塞渲染，避免页面闪白 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="container py-4"> <h1 class="mb-3">你好，Bootstrap</h1> <button class="btn btn-primary">主按钮</button> <!-- 交互脚本放 body 末尾：包含全部插件与 Popper，晚加载不阻塞首屏 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
要点有三。meta viewport 缺失时手机浏览器会假装自己是 980px 宽的桌面，所有断点判断随之失效——这是新手页面上断点「全不生效」的头号原因。CSS 放头部、JS 放尾部是加载顺序的老规矩。bootstrap.bundle.min.js 自带 Popper（弹层定位库），单独引 bootstrap.min.js 而页面又有下拉、弹窗时，弹层位置会算错。
路线二：npm 工程化安装
项目要做主题定制（第 5 章）或走打包器时，改用包管理安装：
# 初始化一个最小前端工程并安装 Bootstrap 与图标库 npm init -y npm install bootstrap@5.3.3 bootstrap-icons
// 模块入口：分别引入预编译 CSS 与 JS 捆绑包 // 效果：打包后等同于 CDN 方式，但版本锁定、可离线、可裁剪 import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.bundle.min.js';
npm 路线的真正价值在第 5 章展开：直接改 Sass 源变量重新编译，能从根上换掉整套配色与断点。学习第 2 到 4 章时不必急着切过来。
制造观察台：让页面自己报告当前断点
Bootstrap 内置了按断点显隐的工具类（第 2.4 节详断），这里先借用它造一件工具：六个 span 各自在唯一一个断点区间可见，叠在同一个角标里，任何时刻只有一行字露出来。
<!-- 断点观察台：右下角角标，随视口宽度切换文案 --> <div class="alert alert-dark position-fixed bottom-0 end-0 m-2 py-2 px-3" role="status"> <span class="d-inline d-sm-none">当前断点 xs：小于 576px</span> <span class="d-none d-sm-inline d-md-none">当前断点 sm：576 到 767px</span> <span class="d-none d-md-inline d-lg-none">当前断点 md：768 到 991px</span> <span class="d-none d-lg-inline d-xl-none">当前断点 lg：992 到 1199px</span> <span class="d-none d-xl-inline d-xxl-none">当前断点 xl：1200 到 1399px</span> <span class="d-none d-xxl-inline">当前断点 xxl：1400px 起</span> </div>
原理：每个 span 都是「默认隐藏、命中区间显示、下一区间再隐藏」的三连判。以第二行为例，d-none 先判默认隐藏，d-sm-inline 在 sm 及以上改判显示，d-md-none 又在 md 起收回——三个判决叠加，可见窗口恰好只剩 sm 一段。拖动窗口宽度，角标文案会逐级跳变，跳变的那一下就是你亲眼看到的「断点切换」。把这段角标常驻在你的练习页里，本册后面每一节的实验都省去猜测。
图 1-2 六大断点标尺
现场勘查：开发工具里的双重验证
角标报告的是「页面视角」，再用浏览器开发工具交叉验证一次。打开检查面板，点击设备模拟按钮进入响应式模式：顶部的宽度数值可拖可输入；把它拖到 575 与 576 来回切换，角标在 xs 与 sm 之间跳变，样式面板里 @media (min-width: 576px) 的规则也会随之灰显或点亮。两个证据源对上，断点行为才算取证完毕。
⚠️ 常见坑：模拟器宽度显示 575，角标却报 sm——多半是系统缩放（如 125%）导致 CSS 像素与物理像素不一致。以角标与媒体查询高亮为准，不要信窗口标题栏的物理像素。
顺带记一个练习法：把观察台存成起步页模板，此后每一节的案例都在它上面跑。断案时先看角标报哪级，再预测样式变化，最后拖动验证——预测对了才算掌握，预测错了当场回读对应小节。这个「先判后验」的习惯比任何笔记都管用，它把教程变成了随时开庭的练习场。
结案要点
- CDN 适合起步，
meta viewport是响应式总开关，bundle 版脚本自带 Popper； - npm 路线为定制与打包而生，学习期不必切换；
- 断点观察台用「默认隐藏 + 区间显示 + 下区间收回」三连判实现，本身就是响应式工具类的第一次实战；
- 六断点全是「大于等于」判：命中一级，上面各级条文同时对当前视口生效——这句话是第 2 章所有裁决的公理。