Bootstrap: 响应式布局
最后更新：2026-08-26
1. 本课导读
(1) 前置知识
- 掌握 Flexbox 容器和对齐方式（来自第五课）
- 熟悉
justify-content-*和align-items-*工具类
(2) 🎯 你将学到
- 理解 Bootstrap 6 个断点体系（xs/sm/md/lg/xl/xxl）
- 掌握响应式显示工具类
d-{breakpoint}-* - 学会响应式文字对齐和字号控制
- 掌握
.img-fluid实现响应式图片 - 能独立制作多端适配的响应式页面
(3) 痛点
Charlie 正在开发一个后台仪表盘：桌面端显示完整侧栏和表格，平板端折叠侧栏，手机端隐藏侧栏改汉堡菜单——如果用纯 CSS 媒体查询实现，需要写大量重复代码。
(4) 解法
Bootstrap 提供了完整的响应式工具类体系——你只需在 class 名中插入断点后缀，就能在不同屏幕尺寸下应用不同样式。Bootstrap 的响应式工具类让这件事变得非常简单。
理解方式： 响应式就像伸缩衣架——同一个 HTML 结构，在不同宽度的屏幕下自动调整布局。Bootstrap 的断点就是档位：手机、平板、桌面、大屏、超大屏。
(5) 收益
使用 Bootstrap 的响应式工具类后，Charlie 用 d-none d-md-block、col-12 col-md-6 这样的 class 就实现了多端适配，开发效率大幅提升。
2. 断点体系
▶ 示例：断点体系概览
Bootstrap 5 定义了 6 个断点，以 min-width 为基准（移动优先）：
| 断点 | 标签 | 最小宽度 | 典型设备 |
|---|---|---|---|
| Extra small | 无 | < 576px | 手机竖屏 |
| Small | sm |
>= 576px | 手机横屏 |
| Medium | md |
>= 768px | 平板 |
| Large | lg |
>= 992px | 笔记本电脑 |
| Extra large | xl |
>= 1200px | 桌面显示器 |
| Extra extra large | xxl |
>= 1400px | 超大屏 |
graph LR
subgraph Bootstrap breakpoints (min-width)
A[xs 0-575px] --> B[sm 576-767px]
B --> C[md 768-991px]
C --> D[lg 992-1199px]
D --> E[xl 1200-1399px]
E --> F[xxl 1400px+]
end
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 移动优先的含义： 先写小屏样式，再用
min-width断点覆盖大屏。不带断点的 class 作用于所有屏幕，带断点的只在指定宽度以上生效。
3. 显示工具类：d-*
控制元素在不同屏幕下的显示/隐藏：
HTML
<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
Visible on md+ screens, hidden on mobile
</div>
<div class="d-block d-md-none bg-success text-white p-3 mb-2">
Visible on mobile, hidden on md+ screens
</div>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
(1) 常用响应式显示模式
| 需求 | 写法 |
|---|---|
| 手机隐藏，平板以上显示 | d-none d-md-block |
| 手机显示，平板以上隐藏 | d-block d-md-none |
| 总是隐藏 | d-none |
| 打印时显示 | d-none d-print-block |
4. 文字响应式
HTML
<!-- Responsive text alignment -->
<p class="text-center text-md-start">
Centered on mobile, left-aligned on md+
</p>
<!-- Responsive font size -->
<p class="fs-6 fs-md-5 fs-lg-4">
Gets larger on bigger screens
</p>
<!-- Responsive text color -->
<p class="text-muted text-md-primary">
Gray on mobile, blue on tablet+
</p>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
| 写法 | 手机 | 平板+ |
|---|---|---|
text-center text-md-start |
居中 | 左对齐 |
text-start text-lg-center |
左对齐 | 桌面居中 |
5. 边距与间距响应式
HTML
<div class="container">
<div class="card p-3 p-md-4 p-lg-5 mb-3 mb-md-0">
<h5>Responsive Card</h5>
<p class="mb-0 mb-md-2">Padding and margin adapt to screen size.</p>
</div>
<div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Cancel</button>
</div>
</div>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
| 需求 | 实现 |
|---|---|
| 手机紧凑、桌面宽松 | p-3 p-md-5 |
| 手机竖排、桌面横排 | flex-column flex-md-row |
| 手机间距小、桌面间距大 | gap-2 gap-lg-4 |
6. 响应式图片
HTML
<img src="https://via.placeholder.com/1200x600" class="img-fluid" alt="Responsive image">
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
.img-fluid等价于max-width: 100%; height: auto;——图片不会超过父容器宽度，且按比例缩放。
HTML
<img src="https://via.placeholder.com/400x400" class="img-fluid rounded-circle" alt="Circular" style="max-width: 200px;">
<img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="Thumbnail">
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
| class | 效果 |
|---|---|
img-fluid |
自适应宽度 |
img-thumbnail |
1px 圆角边框 |
rounded |
圆角 |
7. 断点与显示工具类参考
(1) 断点完整参考
| 断点名称 | 标签 | 最小宽度 | 容器最大宽度 | 典型设备 |
|---|---|---|---|---|
| Extra Small | 无 | 0px | 100% | 手机竖屏 |
| Small | sm |
576px | 540px | 手机横屏 |
| Medium | md |
768px | 720px | 平板 |
| Large | lg |
992px | 960px | 笔记本电脑 |
| Extra Large | xl |
1200px | 1140px | 桌面显示器 |
| Extra Extra Large | xxl |
1400px | 1320px | 超大屏 |
(2) 显示工具类参考
| class | 效果 | 典型用法 |
|---|---|---|
d-none |
始终隐藏 | 隐藏元素 |
d-block |
始终块级显示 | 显示元素 |
d-inline |
始终行内显示 | 行内文本 |
d-inline-block |
始终行内块 | 图标+文字 |
d-flex |
弹性容器 | 布局容器 |
d-none d-md-block |
手机隐藏，平板+显示 | 响应式侧栏 |
d-block d-md-none |
手机显示，平板+隐藏 | 汉堡菜单 |
d-none d-print-block |
仅在打印时显示 | 打印版式 |
▶ 示例：响应式图片画廊
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Gallery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="text-center mb-4">响应式图片画廊</h3>
<div class="row g-3">
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/0d6efd/fff?text=1" class="img-fluid rounded" alt="img1">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/198754/fff?text=2" class="img-fluid rounded" alt="img2">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/dc3545/fff?text=3" class="img-fluid rounded" alt="img3">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/ffc107/000?text=4" class="img-fluid rounded" alt="img4">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/6f42c1/fff?text=5" class="img-fluid rounded" alt="img5">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/20c997/fff?text=6" class="img-fluid rounded" alt="img6">
</div>
</div>
<p class="text-muted text-center mt-3">col-6 → col-md-4 → col-lg-3，每张图片使用 img-fluid 自适应</p>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
▶ 示例：响应式排版
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Typography</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="text-center text-md-start mb-4">响应式排版</h3>
<p class="fs-6 fs-md-5 fs-lg-4 text-center text-md-start">
字号随屏幕变大：手机 fs-6 → 平板 fs-5 → 桌面 fs-4。<br>
<code>.fs-6 .fs-md-5 .fs-lg-4</code>
</p>
<hr>
<p class="text-muted text-md-primary text-lg-success text-center text-md-start">
文字颜色响应式：手机灰色 → 平板蓝色 → 桌面绿色。<br>
<code>.text-muted .text-md-primary .text-lg-success</code>
</p>
<hr>
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center bg-light p-3 rounded">
<span class="badge bg-primary fs-6 fs-md-5 mb-2 mb-md-0">标签一</span>
<span class="badge bg-success fs-6 fs-md-5 mb-2 mb-md-0">标签二</span>
<span class="badge bg-danger fs-6 fs-md-5">标签三</span>
</div>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
▶ 示例：响应式间距
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Spacing</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Hero with responsive padding -->
<div class="bg-primary text-white p-3 p-md-5 rounded text-center text-md-start">
<h1 class="display-6">响应式间距</h1>
<p class="mb-0">手机 p-3 (16px)，桌面 p-5 (48px)</p>
</div>
<!-- Stacked sections -->
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>区块一</h5>
<p>my-4 确保上下间距，p-3 手机内边距，p-lg-4 大屏内边距。</p>
</section>
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>区块二</h5>
<p class="mb-0 mb-md-2">文字下方间距也是响应式的。</p>
<p class="d-none d-md-block">这个段落只在 md+ 屏幕显示。</p>
</section>
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>区块三</h5>
<p>所有区块使用相同间距 class，保证一致性。</p>
</section>
<div class="d-flex flex-column flex-md-row gap-2 gap-md-3 justify-content-md-end">
<button class="btn btn-outline-secondary">取消</button>
<button class="btn btn-primary">提交</button>
</div>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
▶ 示例：响应式表格
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-3">响应式表格</h3>
<p class="text-muted small mb-3">手机端隐藏"部门"和"状态"列，平板以上显示全部列</p>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>#</th>
<th>姓名</th>
<th class="d-none d-md-table-cell">部门</th>
<th>邮箱</th>
<th class="d-none d-md-table-cell">状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td class="d-none d-md-table-cell">技术部</td>
<td>zhang@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-success">在职</span></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td class="d-none d-md-table-cell">市场部</td>
<td>li@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-warning">试用期</span></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td class="d-none d-md-table-cell">设计部</td>
<td>wang@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-danger">已离职</span></td>
</tr>
</tbody>
</table>
</div>
<p class="text-muted small">
提示：使用 <code>d-none d-md-table-cell</code> 在手机上隐藏列，使用 <code>table-responsive</code> 防止表格溢出。
</p>
</div>
</body>
</html>
输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。
❓ 常见问题
Q 移动优先是什么意思？为什么大屏样式要用断点后缀？
A 移动优先意味着基础样式（不带断点）是给小屏的，带断点的样式覆盖大屏。例如
d-none d-md-block：d-none 对所有屏幕生效（隐藏），d-md-block 在 md 及以上覆盖为显示。Q 如果我想在 lg 和 md 之间有一种行为，在 sm 和 xs 有另一种行为，怎么办？
A Bootstrap 是
min-width 向上覆盖的。你可以写 d-none d-md-block d-xl-none 表示：xs-sm 隐藏，md-lg 显示，xl+ 又隐藏。Q 响应式图片的
img-fluid 和直接用 CSS max-width: 100% 有区别吗？A 本质相同。
.img-fluid 就是 max-width: 100%; height: auto; 的预设工具类，与 Bootstrap 的图像组件配合更一致。Q Bootstrap 有打印样式相关的 class 吗？
A 有。Bootstrap 5 提供
d-print-* 系列工具类，如 d-print-none（打印时隐藏）、d-print-block（打印时显示）。还提供 display-print-* 控制打印时的 display 值。这些 class 只在打印媒体中生效，非常适合做打印版式优化。Q 如何自定义断点？
A 自定义断点需要修改 Sass 变量
$grid-breakpoints 和 $container-max-widths（Phase 5 详解）。如果只用 CSS 覆盖，可以写媒体查询：@media (min-width: 1600px) { ... } 但自定义断点的工具类（如 d-xxl-block）不会自动生成。建议优先使用 Bootstrap 的标准断点。📖 小节
- Bootstrap 有 6 个断点：xs/sm/md/lg/xl/xxl，基于
min-width移动优先 - 工具类 + 断点后缀 = 响应式控制：
d-{breakpoint}-*、text-{breakpoint}-*、p-{breakpoint}-* d-none d-md-block是最常用的显示切换模式.img-fluid让图片自适应
📝 作业
- ⭐ 创建一个响应式导航栏：手机端
flex-column竖排链接，平板以上flex-row横排。 - ⭐⭐ 做一个三档响应式卡片：手机端
p-2、平板p-4、桌面p-5，文字手机居中、桌面左对齐。 - ⭐⭐⭐ 创建一个表格：在手机上隐藏第 3、4 列（
d-none d-md-table-cell），桌面显示全部列。
