在网页开发中，让页面在手机、平板、电脑等不同设备上都能良好显示（即“响应式布局”）是必备技能。而Bootstrap5作为最流行的前端框架之一，能帮我们快速实现这一目标。本文将用最简单的方式，带你一步步掌握Bootstrap5响应式布局的核心用法。
一、为什么选择Bootstrap5？¶
- 响应式设计：自动适配手机、平板、电脑等不同屏幕尺寸，无需手动写复杂的CSS媒体查询。
- 栅格系统：基于12列网格布局，用“行（row）”和“列（col）”快速划分页面。
- 组件丰富：自带导航、按钮、卡片等常用组件，无需从零开发。
- 轻量高效：通过CDN引入，无需本地安装，新手也能快速上手。
二、引入Bootstrap5¶
要使用Bootstrap5，首先需要在HTML中引入它的CSS和JS文件。推荐用CDN（内容分发网络）方式，无需下载本地文件。
完整引入代码（在<head>和</body>中）：¶
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 关键：让手机浏览器识别屏幕宽度，避免页面缩放错误 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap响应式布局示例</title>
<!-- 引入Bootstrap5的CSS样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容在这里 -->
<!-- 引入Bootstrap5的JS（若需下拉菜单、模态框等交互功能，需引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
提示：
<meta name="viewport">是响应式的关键，它告诉浏览器“以设备宽度为基准，初始缩放1倍”，否则手机上页面可能被放大或缩小。
三、响应式布局核心：栅格系统¶
Bootstrap5的响应式布局基于“12列网格系统”，通过 行（row） 和 列（col） 实现。核心逻辑是：
- 页面宽度被分为12等份（12列）。
- 用row包裹内容，用col-*指定列的宽度，*为列数（1-12）。
- 通过不同的“断点前缀”适配不同屏幕尺寸（如手机、平板、电脑）。
1. 屏幕尺寸断点与前缀¶
Bootstrap5默认提供5个断点（不同屏幕的最小宽度），对应前缀如下：
- xs：手机（默认，无前缀，<576px）
- sm：小平板（≥576px）
- md：中等平板（≥768px）
- lg：大平板/小电脑（≥992px）
- xl：电脑（≥1200px）
例子：
col-sm-4表示“小屏幕及以上时，列占4列”（即12列中的4列，约占页面宽度33.3%）。
2. 容器（Container）¶
所有内容需用 容器 包裹，容器分为两种：
- container：固定宽度，在大屏幕上居中显示（避免内容过宽）。
- container-fluid：全屏宽度，无左右边距（适合全屏布局）。
<div class="container"> <!-- 固定宽度容器 -->
<div class="row"> <!-- 行 -->
<div class="col"> <!-- 列（默认占12列，即全屏） -->
内容1
</div>
<div class="col"> <!-- 列（默认占12列，即全屏） -->
内容2
</div>
</div>
</div>
四、实战：从手机到PC的布局实现步骤¶
下面通过一个“头部+导航+内容+侧边栏+底部”的完整页面，演示如何用Bootstrap5实现响应式布局。
步骤1：搭建基础结构¶
先创建一个简单的HTML页面，引入Bootstrap5的CDN：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5响应式示例</title>
<!-- 引入Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容开始 -->
<!-- 页面内容结束 -->
<!-- 引入Bootstrap5 JS（需交互功能时用） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
步骤2：添加头部（Header）和底部（Footer）¶
用bg-primary设置背景色，text-white设置文字颜色，py-3设置上下内边距（padding）：
<!-- 头部 -->
<header class="bg-primary text-white py-3">
<div class="container"> <!-- 容器包裹内容 -->
<h1>我的网站</h1>
</div>
</header>
<!-- 底部 -->
<footer class="bg-dark text-white py-3 text-center">
<div class="container">
<p>© 2023 我的网站</p>
</div>
</footer>
步骤3：添加导航栏（Navbar）¶
用navbar类创建导航，navbar-expand-lg让导航在大屏幕上展开：
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 导航菜单 -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">产品</a></li>
<li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>
</div>
</div>
</nav>
步骤4：内容区与侧边栏（核心响应式布局）¶
用row包裹内容和侧边栏，通过col-*设置不同屏幕下的列宽：
- 大屏幕（lg）：内容区占9列，侧边栏占3列（col-lg-9和col-lg-3）。
- 小屏幕（sm）：内容区和侧边栏都占12列（col-sm-12，自动堆叠）。
<div class="container my-4"> <!-- my-4：上下边距 -->
<div class="row"> <!-- 行 -->
<!-- 内容区 -->
<div class="col-lg-9">
<div class="card mb-4"> <!-- 卡片组件，带下边距 -->
<div class="card-body">
<h2 class="card-title">主内容</h2>
<p>这里是文章/产品列表等主要内容，在大屏幕上占9列。</p>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<h3 class="card-title">侧边栏</h3>
<p>这里是分类、推荐等辅助内容，在大屏幕上占3列。</p>
</div>
</div>
</div>
</div>
</div>
五、关键知识点总结¶
- 响应式核心：通过
col-*类的断点前缀（sm、md、lg等），让列在不同屏幕尺寸下自动调整宽度。 - 栅格规则：每行（row）最多12列，列数总和不超过12。
- 容器作用：用
container固定宽度，避免内容过宽；container-fluid全屏。 - 常用辅助类：
-text-center：文本居中；
-bg-*：背景色（如bg-primary）；
-mb-*/py-*：边距/内边距（如mb-4表示下边距4单位）。
六、效果预览¶
- 手机/小平板：侧边栏自动堆叠在内容区下方，所有列占满屏幕宽度（
col-sm-12）。 - 中等/大屏幕：内容区占9列，侧边栏占3列（
col-lg-9和col-lg-3），布局紧凑有序。
总结¶
Bootstrap5的响应式布局核心是“栅格系统+断点设置”，通过简单的col-*类就能快速实现多设备适配。只需引入CDN、用container包裹内容、row划分行、col-*定义列，就能让页面在手机、PC等设备上“自适应”显示。
现在就可以动手尝试：复制上述代码到HTML文件，调整不同屏幕尺寸下的列宽，体验响应式布局的神奇之处吧！