第 3 章 组件断案

第 3 章 · 组件断案

章节摘要：组件是长在栅格上的预制件。本章按「导航、表单、内容、弹层与杂项」四类审案，重点不是罗列类名，而是每个组件自带的断点行为与结构约定：navbar 在哪个断点展开、表单怎么借栅格分栏、表格怎样在窄屏滚动、弹窗为什么与断点无关。读完你能看懂并改写任何 Bootstrap 组件示例，而不是复制后不敢动。

学习目标

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

1. 用 navbar-expand-{断点} 精确控制导航栏折叠与展开的切换点，并说出折叠态的结构组成；
2. 借栅格与 row-cols 搭出横排、竖排、多列表单，并掌握 form-label、form-control、form-text 的分工；
3. 判断表格、图片、图注等内容元素在窄屏的退化策略（滚动、缩放、换行）；
4. 说清 modal、toast、tooltip 各自的触发链路与层级规则，识别哪些组件需要 JS、哪些纯 CSS。

核心概念速览

组件断案先问两个问题：它长在栅格上还是层级上？它靠纯 CSS 还是需要脚本？答案决定你排错时该查布局还是查脚本。

子章节导航

3.1 导航组件：折叠与展开的临界点

导航栏是断点行为最显眼的组件：navbar-expand-lg 一个类决定了汉堡按钮何时消失。本节审 navbar、nav、选项卡与面包屑。

3.2 表单组件：栅格里的输入布局

表单不是独立组件而是「控件 + 栅格 + 间距工具」的合成体。本节审控件家族与分栏策略，顺带立好表单无障碍的规矩。

3.3 内容组件：表格图片与排版

表格在窄屏是滚动还是堆叠、图片如何自适应、图注怎么排——内容元素的断点退化策略是本节主案。

3.4 弹窗提示与卡片等杂项组件

modal、toast、tooltip、popover 属于「层级上的组件」；卡片、徽章、进度条、折叠面板属于栅格上的杂项兵种。两类混编一节，用「长在哪」的标尺统一断案。

子章节之间的逻辑关系

四节按「页面骨架的搭建顺序」推进：先立导航（定门面），再放表单（收输入），再铺内容（展示主体），最后处理浮层与点缀。

3.1 导航立门面 ──► 3.2 表单收输入 ──► 3.3 内容铺主体
                                          │
        3.4 弹层与杂项 ◄──────────────────┘
​

本章知识点清单

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

1. 能说出 navbar-expand-{断点} 的切换点选择依据——不是背 lg 万能，而是按菜单项数量与文案长度实测：项多提前展开，项少可以压到更宽才展开；
2. 能默写折叠态三件套：toggler 汉堡按钮、collapse 折叠容器、aria-expanded 与 aria-controls 属性，缺一件键盘与读屏就断一条路；
3. 能区分 nav 的三种形态（水平导航、nav-pills 竖排、选项卡）并写出选项卡的 data-bs-toggle 接线；
4. 能解释表单不是单一组件：form-label 管标签、form-control 管输入框宽度与高度、form-text 管辅助说明，三者职责不重叠；
5. 能用 row-cols 与 col-12 col-md-6 组合出一栏、两栏、三栏表单，并知道 label 与控件必须成对出现；
6. 能对窄屏表格做出三选一裁决：横向滚动（table-responsive）、隐藏次要列、自定义堆叠成卡片，并说出各自代价；
7. 能解释 img-fluid 生效的前提是 max-width 百分比与 height auto 的配合，以及 figure 与 figcaption 的语义分工；
8. 能说清 modal 的三层结构（遮罩、对话框、内容区）与「脚本把整个弹窗搬到 body 末端」的层级原理，能判断 toast 与 alert 的适用分界。

前置知识与后续延伸

• 前置知识：第 2 章全部四审（容器、栅格、flex、显隐）；HTML 表单控件的基本概念。
• 后续延伸：第 4 章工具类是本章反复借用的「胶水」；第 6.1 节把弹层组件的脚本 API 讲深；第 7 章案例把本章组件全部串成页面。