1.1 Bootstrap 档案与版本演化
文档摘要
1.1 Bootstrap 档案与版本演化 Bootstrap 是 2011 年从 Twitter 内部走出的开源前端 UI 框架，提供预制 CSS 组件与 JavaScript 插件。它的发展史本质上是「响应式布局技术」的演化史：从浮动栅格到 Flexbox，从 jQuery 依赖到原生脚本。选对版本，是动手前的第一份裁决。 本节在全册的位置：它是开庭准备的第一步——先确认「审的是哪部法典」。后面所有章节都以 5.x 的行为为准，而 5.x 的写法差异正是三代演化留下的痕迹。 立案：为什么老项目里到处是 col-xs-6，新文档里却查不到 接手过老项目的读者多半见过 、 、 这些写法，翻 5.x 文档却一无所获。
1.1 Bootstrap 档案与版本演化
Bootstrap 是 2011 年从 Twitter 内部走出的开源前端 UI 框架，提供预制 CSS 组件与 JavaScript 插件。它的发展史本质上是「响应式布局技术」的演化史：从浮动栅格到 Flexbox，从 jQuery 依赖到原生脚本。选对版本，是动手前的第一份裁决。
本节在全册的位置：它是开庭准备的第一步——先确认「审的是哪部法典」。后面所有章节都以 5.x 的行为为准，而 5.x 的写法差异正是三代演化留下的痕迹。
立案：为什么老项目里到处是 col-xs-6，新文档里却查不到
接手过老项目的读者多半见过 col-xs-6、pull-right、data-toggle 这些写法，翻 5.x 文档却一无所获。这不是文档缺失，是版本条文的更替：col-xs-6 属于 Bootstrap 3 的语法（xs 当时是显式前缀），5.x 里超小屏不需要前缀，直接写 col-6。混用两代语法的页面，就像用两部不同的法典断同一个案子，必然出现「类名写了却不生效」的悬案。
图 1-1 Bootstrap 三代演化时间线
取证：三代框架的关键差异对照
下表是接手旧项目时的「翻译对照表」，把 3.x/4.x 的旧写法映射到 5.x 条文：
| 维度 | 3.x | 4.x | 5.x（本册基准） |
|---|---|---|---|
| 栅格引擎 | 浮动布局 | Flexbox | Flexbox |
| 超小屏列类 | col-xs-6 | col-6 | col-6 |
| 断点数量 | 4 档 | 5 档 | 6 档（含 xxl） |
| 脚本依赖 | jQuery | jQuery | 原生 JS + Popper |
| 触发属性 | data-toggle | data-toggle | data-bs-toggle |
| 颜色体系 | Less 变量 | Sass 变量 | Sass 变量 + CSS 自定义属性 |
验证断点数量差异的办法很简单：在 5.x 页面写一组 col-xxl-* 列，把窗口拖过 1400px，会看到列宽跳变；把同一行代码放进 4.x 页面则完全无效——4.x 根本没有 xxl 这个条文。
裁决：新项目与旧项目分别怎么判
<!-- 场景一：新项目，直接按 5.x 条文写 --> <!-- 超小屏不写断点前缀，等于「全区间默认生效」 --> <div class="row"> <div class="col-12 col-md-6 col-xxl-4">卡片：手机整行，平板半行，超宽屏三列</div> </div> <!-- 场景二：维护 3.x 老项目，尊重旧条文，不要混写 --> <!-- col-xs-6 在 3.x 里合法；若擅自改成 col-6，3.x 会当作无效类，布局反而坏掉 --> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4">老页面卡片列，三段式旧语法</div> </div>
两段代码的解读：第一段是本册的标准写法，col-12 兜底手机，col-md-6、col-xxl-4 逐级放宽；第二段提醒你，旧项目的「法典」是 3.x，改写法前先确认框架版本（查看页面引入的 CSS 文件名或配置依赖），否则善意的「升级」会制造新悬案。
变式：若老项目要整体迁移到 5.x，推荐顺序是先迁栅格语法（全文把 col-xs- 改成 col-），再迁数据属性（data-toggle 改 data-bs-toggle），最后移除 jQuery——每一步都可独立验证，比一次改完再排查稳得多。
附案：小版本里的暗改与当场验明版本的办法
大版本之间有翻译对照表可查，小版本（5.0 到 5.3）之间的改动更容易被忽略：5.1 把 CSS 自定义属性铺到了几乎所有组件；5.2 重做了导航栏底部结构并引入工具类 API 的正式版；5.3 带来了颜色模式——在 html 标签上加 data-bs-theme="dark" 就能整站换深色。这些暗改不换类名，只换默认行为，接手项目时同样要验明小版本。
验版本最快的办法不是翻配置，是让页面自己报：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入后任意组件的 VERSION 属性都能报出小版本 --> </head> <body> <div class="container py-5"> <p class="lead">打开浏览器控制台，下一行脚本会打印当前框架版本。</p> </div> <script src="bootstrap.bundle.min.js"></script> <script> // 效果：控制台输出形如 5.3.3 的版本号 // 只要能打印，说明脚本已就位；版本号对不上预期，说明引错了包 console.log('Bootstrap 版本:', bootstrap.Tooltip.VERSION); </script> </body> </html>
这段代码的用法：接手任何 Bootstrap 项目，先把这个探针贴进页面跑一次。版本号报 3.x 或 4.x，后面所有断案都要换对应法典；报 5.3，就可以放心用颜色模式这类新条文。
颜色模式是最值得当场一试的 5.3 特性：
<!-- 同一套类名，只改 html 上一个属性，整站切换深浅色 --> <html lang="zh-CN" data-bs-theme="dark"> <body> <div class="container py-4"> <div class="card" style="max-width: 24rem"> <div class="card-body"> <h5 class="card-title">深色模式下的卡片</h5> <p class="card-text">文字、边框、背景全部自动换档，没有多写一行样式。</p> <button class="btn btn-primary">主操作</button> </div> </div> </div> </body> </html>
把 data-bs-theme 的值在 dark 与 light 之间来回改，卡片无需任何配套样式就跟着换肤——因为 5.3 把组件颜色全部改挂在 CSS 自定义属性上，这个属性只是换了变量的取值。第 5 章讲定制时会回到这个机制：那时你会看到「改一处变量动全局」的另一半含义。
结案要点
- 版本即法典：3.x、4.x、5.x 的类名与数据属性互不通用，动手前先验明框架版本；
- 5.x 三个新基准：超小屏无前缀、data-bs- 属性前缀、六档断点含 xxl；
- 演化主线：浮动到 Flexbox 换了布局引擎，jQuery 到原生 JS 换了脚本引擎，Sass 到 CSS 变量降低了定制门槛；
- 下一节把 5.x 的运行环境搭起来，并加一个能实时显示当前断点的「观察台」。