Bootstrap 布局终极教程：从零开始构建响应式网页
Bootstrap 是一个流行的前端框架，其核心是一个强大而灵活的 12 列响应式网格系统，理解并掌握这个网格系统，就是掌握了 Bootstrap 布局的精髓。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 核心概念：网格系统是如何工作的？
- 基础布局：容器、行、列
- 响应式断点：让页面适配所有设备
- 实用工具类：对齐、偏移、排序等
- 实战案例：构建一个简单的响应式网页
- 进阶技巧与最佳实践
核心概念：网格系统是如何工作的？
想象一个表格，它有行和列，Bootstrap 的网格系统与此类似，但更强大、更灵活。
- 容器：包裹所有内容的“大盒子”,用于限制最大宽度和居中内容。
- 行：在容器内创建水平排列的“行”。
- 列：在行内创建垂直排列的“列”,内容就放在这些列里。
核心规则：
- 行必须放在容器内。
- 列必须放在行内。
- 总列数必须为 12，你可以自由组合列，
col-6+col-6(6+6=12)，或者col-4+col-8(4+8=12)，或者col-3+col-3+col-6(3+3+6=12)。
基础布局：容器、行、列
容器
Bootstrap 提供了两种主要的容器：
（图片来源网络，侵删）
.container：一个响应式的固定宽度容器，在不同屏幕尺寸下，它的宽度是固定的，并在水平方向上居中。- 超小屏幕（<576px）: 100% 宽度
- 小屏幕（≥576px）: 540px 宽度
- 中等屏幕（≥768px）: 720px 宽度
- 大屏幕（≥992px）: 960px 宽度
- 超大屏幕（≥1200px）: 1140px 宽度
.container-fluid：一个 100% 宽度的容器,会始终占满整个视口的宽度。
示例：
<!-- 固定宽度，响应式 --> <div class="container"> <p>我是一个固定宽度的容器，在小屏幕上会变窄，在大屏幕上会变宽。</p> </div> <!-- 100% 宽度 --> <div class="container-fluid"> <p>我是一个占满整个屏幕宽度的容器。</p> </div>
行与列
行使用 .row 类，列使用 .col-* 类。
.row：用于清除列的浮动，并创建列之间的等间距（称为“槽沟” gutter）。.col-*： 是一个数字，代表该列占 12 列中的几份。
示例：
<div class="container">
<!-- 一行 -->
<div class="row">
<!-- 占 6 份宽度 -->
<div class="col-6">
<div class="p-3 bg-light border">列 1 (6/12)</div>
</div>
<!-- 占 6 份宽度 -->
<div class="col-6">
<div class="p-3 bg-light border">列 2 (6/12)</div>
</div>
</div>
<hr>
<div class="row">
<!-- 占 4 份宽度 -->
<div class="col-4">
<div class="p-3 bg-light border">列 1 (4/12)</div>
</div>
<!-- 占 8 份宽度 -->
<div class="col-8">
<div class="p-3 bg-light border">列 2 (8/12)</div>
</div>
</div>
<hr>
<div class="row">
<!-- 三列等宽，每列占 4 份 -->
<div class="col-4">
<div class="p-3 bg-light border">列 1 (4/12)</div>
</div>
<div class="col-4">
<div class="p-3 bg-light border">列 2 (4/12)</div>
</div>
<div class="col-4">
<div class="p-3 bg-light border">列 3 (4/12)</div>
</div>
</div>
</div>
提示：
p-3是内边距(padding)的实用工具类，bg-light是背景色，border是边框,它们能让视觉效果更清晰。（图片来源网络，侵删）
响应式断点：让页面适配所有设备
这是 Bootstrap 最强大的功能之一，你可以根据屏幕尺寸的大小,改变列的布局方式。
Bootstrap 定义了 6 个断点：
| 断点 | 类前缀 | 屏幕尺寸 |
|---|---|---|
| 超小 | (none) | <576px |
| 小 | sm- |
≥576px |
| 中 | md- |
≥768px |
| 大 | lg- |
≥992px |
| 超大 | xl- |
≥1200px |
| 超超大 | xxl- |
≥1400px |
工作原理：
你可以在列类中指定断点。col-md-6 的意思是：“在中等（md）及以上的屏幕上，这个列占 6/12 的宽度；在小于中等屏幕的设备上（如手机），它会自动堆叠（占 100% 宽度）。”
示例： 这是一个非常经典的布局：在电脑上是并排的两列,在手机上变成上下堆叠。
<div class="container">
<div class="row">
<!--
默认情况下（手机端），这两列会堆叠。
当屏幕宽度 ≥768px (md 断点) 时，这个列会占 8/12 的宽度。
-->
<div class="col-md-8">
<div class="p-3 bg-primary text-white text-center">主要内容区 (8/12 on md+)</div>
</div>
<!--
默认情况下（手机端），这两列会堆叠。
当屏幕宽度 ≥768px (md 断点) 时，这个列会占 4/12 的宽度。
-->
<div class="col-md-4">
<div class="p-3 bg-secondary text-white text-center">侧边栏 (4/12 on md+)</div>
</div>
</div>
</div>
组合使用： 你还可以混合使用不同的断点,实现更复杂的布局。
<div class="container">
<div class="row">
<!--
在超小屏幕上占 12 列（全宽）。
在小屏幕上占 6 列（一半宽度）。
在中屏幕上占 4 列（三分之一宽度）。
-->
<div class="col-12 col-sm-6 col-md-4">
<div class="p-3 bg-success text-white text-center">响应式卡片 1</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="p-3 bg-success text-white text-center">响应式卡片 2</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="p-3 bg-success text-white text-center">响应式卡片 3</div>
</div>
</div>
</div>
实用工具类
Bootstrap 提供了大量实用的工具类，让你无需编写 CSS 即可实现常见的布局效果。
对齐
- 水平对齐：
.justify-content-start,.justify-content-center,.justify-content-end,.justify-content-around,.justify-content-between - 垂直对齐：在
.row或.d-flex容器上使用.align-items-start,.align-items-center,.align-items-end - 文本对齐：
.text-start,.text-center,.text-end
示例：
<div class="container">
<!-- 水平居中 -->
<div class="row justify-content-center">
<div class="col-4">
<div class="p-3 bg-info text-white">水平居中的列</div>
</div>
</div>
<!-- 垂直居中 -->
<div class="row align-items-center" style="height: 200px;">
<div class="col">
<div class="p-3 bg-warning">垂直居中的内容</div>
</div>
</div>
</div>
偏移
如果你想让一列向右移动，可以使用 .offset-* 类，它会向左边添加空白（等于列的宽度）。
示例：
<div class="container">
<div class="row">
<div class="col-md-4">第一列</div>
<!--
第二列向右偏移 4 列的宽度。
相当于第一列占 4，空白占 4，第二列占 4，总和为 12。
-->
<div class="col-md-4 offset-md-4">第二列 (偏移了 4 列)</div>
</div>
</div>
嵌套
你可以在一个列内部再创建一个 .row 和 .col,实现更复杂的嵌套布局。
示例：
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- 外层列 -->
<div class="p-3 bg-primary text-white">这是外层列 (8/12)</div>
<!-- 嵌套的行和列 -->
<div class="row">
<div class="col-6">
<div class="p-2 bg-dark text-white">嵌套列 1 (6/12)</div>
</div>
<div class="col-6">
<div class="p-2 bg-dark text-white">嵌套列 2 (6/12)</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 bg-success text-white">这是另一列 (4/12)</div>
</div>
</div>
</div>
实战案例：构建一个简单的响应式网页
让我们来构建一个包含 导航栏、主内容区、侧边栏和页脚 的经典布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 布局实战</title>
<!-- 1. 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 为了演示，给每个区块添加一些高度和颜色 */
.demo-section { min-height: 200px; margin-bottom: 20px; }
.navbar { margin-bottom: 20px; }
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">我的网站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">lt;/a></li>
<li class="nav-item"><a class="nav-link" href="#">联系</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- 主内容区和侧边栏 -->
<div class="row">
<!-- 主内容区：在中等屏幕以上占 9 列，小屏幕占 12 列（全宽） -->
<div class="col-md-9">
<div class="demo-section bg-primary text-white p-4">
<h2>主内容区</h2>
<p>这部分是网站的主要内容，在电脑上，它占据大部分空间，在手机上，它会显示在侧边栏的下方。</p>
</div>
</div>
<!-- 侧边栏：在中等屏幕以上占 3 列，小屏幕占 12 列（全宽） -->
<div class="col-md-3">
<div class="demo-section bg-secondary text-white p-4">
<h4>侧边栏</h4>
<p>这是侧边栏，通常用于放置导航链接、广告或其他次要信息。</p>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="row bg-dark text-white p-4">
<div class="col-12 text-center">
<p>© 2025 我的网站. All rights reserved.</p>
</div>
</footer>
</div>
<!-- 2. 引入 Bootstrap JS (依赖 Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
分析：
- 我们使用
.container作为最外层包裹。 - 导航栏使用了 Bootstrap 自带的组件，区和侧边栏放在一个
.row中，区使用col-md-9，侧边栏使用col-md-3，它们在中等屏幕以上并排显示，加起来正好是 12 列。 - 在小屏幕上，
col-md-9和col-md-3会自动变成col-12，即占满整个宽度,从而实现上下堆叠。 - 页脚也放在一个
.row中，使用col-12确保它在所有屏幕尺寸下都占满宽度。
进阶技巧与最佳实践
- 移动优先：Bootstrap 的网格系统是“移动优先”的，这意味着你先为最小的屏幕（手机）设计布局，然后通过添加
sm-,md-等断点来逐步增强大屏幕上的体验。 - 预编译版 vs 编译版：你可以使用 Bootstrap 官方网站上的定制工具，只选择你需要的组件和实用工具，生成一个更小的 CSS 文件,以优化加载性能。
- Flexbox 和 Grid：Bootstrap 5 的网格底层是基于 CSS Flexbox 实现的，这提供了比浮动更强大、更灵活的布局能力，你也可以直接使用 Bootstrap 的 Flexbox 实用工具类（如
d-flex,justify-content-center）来构建非网格的布局。 - 保持简洁：不要过度使用 Bootstrap，它是一个工具箱，而不是束缚，如果某个样式需要自定义，勇敢地覆盖它或写你自己的 CSS。
- 核心：Bootstrap 布局 = 容器 + 行 + 列。
- 关键：理解 12 列网格系统 和 响应式断点 (
sm,md,lg,xl)。 - 利器：熟练使用 实用工具类 (
offset,align-items,justify-content等) 可以极大提高开发效率。 - 实践：多动手写一些小例子，比如上面的实战案例,是掌握其最快的方式。
希望这份教程能帮助你彻底搞懂 Bootstrap 的布局系统！
