1.3 基本用法：类名里的断点暗号
文档摘要
1.3 基本用法：类名里的断点暗号 Bootstrap 的几百个类名共享一套命名语法：属性前缀、可选断点、取值三段拼接，如 、 、 。读懂这套语法，没见过的类名也能推断出七成行为；读不懂，每个类名都是孤立的密码。本节把语法拆开，并串起第一个完整页面。 本节是第 1 章的收尾：观察台已就位（1.2），现在给它配上一套「读类名」的方法论。第 2 章开始的所有裁决，都将用这套语法描述。 类名解剖：三段式结构 图 1-3 响应式类名的解剖图 图 1-3 响应式类名的解剖图 三段之外还有一个方向暗号值得先记住：逻辑属性类里的 与 （如 、 ）表示起点侧与终点侧，在从左到右的页面里分别对应右与左。用逻辑方向而非物理方向，是为了一件事：页面切换到从右到左的语言时，间距随文向自动镜像，不必重写一遍类名。
1.3 基本用法：类名里的断点暗号
Bootstrap 的几百个类名共享一套命名语法：属性前缀、可选断点、取值三段拼接，如
col-lg-6、d-md-none、me-sm-2。读懂这套语法，没见过的类名也能推断出七成行为；读不懂，每个类名都是孤立的密码。本节把语法拆开，并串起第一个完整页面。
本节是第 1 章的收尾：观察台已就位（1.2），现在给它配上一套「读类名」的方法论。第 2 章开始的所有裁决，都将用这套语法描述。
类名解剖：三段式结构
图 1-3 响应式类名的解剖图
三段之外还有一个方向暗号值得先记住：逻辑属性类里的 s 与 e（如 me-2、ms-auto）表示起点侧与终点侧，在从左到右的页面里分别对应右与左。用逻辑方向而非物理方向，是为了一件事：页面切换到从右到左的语言时，间距随文向自动镜像，不必重写一遍类名。
第一个完整页面：把语法用起来
<body class="bg-body-tertiary"> <!-- 页头：结构组件 + 工具类混搭 --> <header class="bg-primary text-white py-5 mb-4"> <div class="container"> <!-- fs-/fw- 控制字号字重，lead 是引导段落样式 --> <h1 class="fw-bold">断点观察站</h1> <p class="lead mb-0">拖动窗口宽度，看下面的卡片如何换行。</p> </div> </header> <main class="container"> <div class="row g-3"> <!-- 三张卡片：手机 1 列，md 起 2 列，lg 起 3 列 --> <div class="col-12 col-md-6 col-lg-4"> <div class="card shadow-sm"> <div class="card-body"> <h5 class="card-title">栅格卡片 A</h5> <p class="card-text">col-12 col-md-6 col-lg-4 的三段式写法。</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="card shadow-sm"> <div class="card-body"> <h5 class="card-title">栅格卡片 B</h5> <p class="card-text">观察台角标报哪个断点，这行就按哪级条文排。</p> </div> </div> </div> <div class="col-12 col-md-12 col-lg-4"> <div class="card shadow-sm"> <div class="card-body"> <h5 class="card-title">栅格卡片 C</h5> <p class="card-text">md 区间它独占整行，lg 起才并入三列。</p> </div> </div> </div> </div> </main> </body>
拖动窗口逐段验证：xs 区间三张卡片竖排（col-12 生效）；跨过 768px，A、B 并排、C 独占一行（col-md-6 与 col-md-12 生效）；跨过 992px，三张等宽并排（col-lg-4 接管）。同一行 HTML，三种判决，全部由视口宽度触发——这就是「断点暗号」的全部含义。
裁决规则：同族类名的覆盖顺序
初学者最常问：col-12 col-md-6 里两条都写着，到底听谁的？答案是按断点从小到大「阶梯覆盖」：
<!-- 阶梯覆盖演示：四个断点四条条文 --> <div class="col-6 col-sm-8 col-lg-10 col-xxl-12"> xs 占半行，sm 起 8/12，lg 起 10/12，xxl 起满行 </div> <!-- 反面写法：断点从小到大书写是约定，但从大到小写同样合法； 真正非法的是同一断点写两个值，如 col-md-6 col-md-8， 此时后引样式表中顺序靠后者胜出，行为依赖源码顺序，属于不可控写法 -->
/* 验证覆盖关系：在样式面板里给 .col-md-6 打勾取消， 会看到元素回落到 .col-6 的判决——「回落」正是阶梯覆盖的底层机制： 小断点规则无条件生效，大断点规则在媒体查询内重复声明同名属性 */ .col-6 { flex: 0 0 auto; width: 50%; } @media (min-width: 768px) { .col-md-6 { flex: 0 0 auto; width: 50%; } }
💡 关键直觉：Bootstrap 的响应式不是「检测设备切布局」，而是「一堆带 min-width 条件的普通 CSS 规则按层叠规则排序」。你已有的 CSS 知识（后写的覆盖先写的、更具体的选择器胜出）在 Bootstrap 里原样有效，框架没有发明新物理。
当堂自检：五道读名题
方法好不好用，当场考一遍。下面五个类名都来自后面章节，先别查文档，按三段式读出行为，再对照答案：
p-md-4——前缀 p 是 padding，断点 md 起 768px，值 4 档内边距。断点段放在第二位，说明 768px 以下这个类完全不生效，内边距回落到元素默认值（通常是 0）。text-lg-end——排版族，lg 起 992px 文本靠终点侧对齐。注意它没写默认态，窄屏的对齐方式由别的类或默认继承决定，这条类只管宽屏。d-none d-lg-flex——组合案：全区间隐藏，992px 起改为弹性盒显示。这是「宽屏专用元素」的标准写法，第 2.4 节会反复用到。order-sm-last——sm 起把元素排到末位。窄屏维持 DOM 原顺序，768px 后视觉次序改变，但标签页焦点次序仍跟 DOM 走，这个落差在无障碍一章会回来审。col-xxl-auto——超宽屏起列宽按内容收缩。配合自动布局，它常用于「大屏上把操作按钮挤成一行」的场景。
五题的共性：只要拆出前缀、断点、值三段，再套「断点只管起点、终点由更大断点接管」的规则，陌生类名的行为就能推出七成。剩下三成是各族的取值表（比如间距只有 0 到 5 加 auto），那是第 4 章速查台的工作，不必现在背。
⚠️ 一个高频误读：
text-lg-end不是「只有 lg 区间生效」，而是「lg 及以上生效直到被改判」。把「及以上」三个字漏掉，会在 xl 屏幕上疑惑为什么样式还没消失。
结案要点
- 类名三段式：属性前缀、可选断点、取值；省略断点即全区间生效；
- 阶梯覆盖：同族类名按断点从小到大层层接管，同一断点写两个值是失控写法；
ms-/me-是逻辑方向暗号，从右到左文向下自动镜像；- 观察台加语法表已备齐，第 2 章进入正题：容器与栅格的连环断案。