零基础学Bootstrap5布局：响应式网格实战指南

Bootstrap5 是一个流行的前端框架，能帮我们快速构建响应式网页。所谓“响应式”，就是网页能自动适配手机、平板、电脑等不同设备的屏幕尺寸。对零基础来说，Bootstrap 最核心的功能之一就是响应式网格系统，用它可以轻松实现不同屏幕下的布局变化。接下来我们一步步学习。

一、安装 Bootstrap5¶

刚开始学，最简单的方式是用 CDN 引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 页面的 <head> 里加入 Bootstrap 的 CSS 链接，在 <body> 结束前加入 JavaScript 链接（因为 Bootstrap 的交互功能需要 JS 支持）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>零基础学 Bootstrap5 布局</title>
</head>
<body>

  <!-- 页面内容 -->

  <!-- 引入 Bootstrap5 JS（依赖 Popper.js，这里用 CDN 一起引入） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

这样，Bootstrap5 就安装好了，接下来可以直接用它的类名写布局了。

二、响应式网格系统核心概念¶

Bootstrap 的网格系统基于 “容器（container）→ 行（row）→ 列（col）” 三层结构，就像搭积木一样：

容器（container）：包裹整个内容，让页面居中显示，并且在不同屏幕下自动调整宽度（比如手机端左右留边距，电脑端居中）。
行（row）：用来创建水平布局，必须放在容器内，并且会自动处理列的排列。
列（col）：真正的内容区域，用来划分页面的宽度。Bootstrap 把页面宽度分为 12 列，列的大小用“占 12 列中的几列”表示（比如占 4 列就是 col-4）。

三、列的断点与占比¶

不同设备的屏幕尺寸不同，Bootstrap 用 “断点” 来区分屏幕大小，比如：
- xs：超小屏幕（手机，宽度 < 576px）
- sm：小屏幕（平板竖屏，≥576px）
- md：中等屏幕（平板横屏，≥768px）
- lg：大屏幕（电脑，≥992px）
- xl：超大屏幕（宽屏电脑，≥1200px）

列的类名格式是 col-<断点>-<占比>，比如：
- col-md-4：在中等屏幕（≥768px）及以上，这列占 4 列（12 列中的 4 列，即宽度的 1/3）。
- 如果不加断点（比如 col-6），默认是所有屏幕尺寸下都占 6 列（宽度的 1/2）。

四、实战：用网格系统做响应式布局¶

我们来做一个简单的页面，内容区用网格系统实现不同屏幕下的布局变化。目标是：在手机上“1 列显示”，平板上“2 列显示”，电脑上“3 列显示”。

示例代码：响应式三列布局¶

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 关键：让手机正确识别屏幕宽度 -->
  <title>响应式网格实战</title>
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- 顶部导航栏（简单示例） -->
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">我的网站</a>
    </div>
  </nav>

  <!-- 内容区：响应式网格 -->
  <div class="container my-4"> <!-- my-4 是 Bootstrap 自带的“margin-top:1rem”，让内容和导航栏有间距 -->
    <div class="row"> <!-- 行 -->
      <!-- 第一列：手机 1 列，平板 6 列，电脑 4 列 -->
      <div class="col-sm-12 col-md-6 col-lg-4 bg-white border p-3">
        <h5>栏目 1</h5>
        <p>这是第一列内容，会在手机上占满宽度，平板上占一半，电脑上占 1/3。</p>
      </div>

      <!-- 第二列：手机 1 列，平板 6 列，电脑 4 列 -->
      <div class="col-sm-12 col-md-6 col-lg-4 bg-white border p-3">
        <h5>栏目 2</h5>
        <p>这是第二列内容，和第一列结构相同，只是内容不同。</p>
      </div>

      <!-- 第三列：手机 1 列，平板 12 列，电脑 4 列 -->
      <div class="col-sm-12 col-md-12 col-lg-4 bg-white border p-3">
        <h5>栏目 3</h5>
        <p>这是第三列内容，在手机和平板上占满宽度，电脑上占 1/3。</p>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-dark text-white text-center py-3">
    <div class="container">
      <p>© 2023 我的网站 - 响应式布局示例</p>
    </div>
  </footer>

  <!-- 引入 Bootstrap5 JS（交互功能需要） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码解释：¶

col-sm-12 col-md-6 col-lg-4：
col-sm-12：手机（sm 及以上）时，占 12 列（即屏幕宽度的 100%）。
col-md-6：平板（md 及以上）时，占 6 列（即屏幕宽度的 50%）。
col-lg-4：电脑（lg 及以上）时，占 4 列（即屏幕宽度的 33.3%）。
bg-white border p-3：bg-white 背景色为白色，border 加边框，p-3 内边距（padding）为 16px，这些都是 Bootstrap 自带的“快捷样式”，能快速美化内容。

五、常用小技巧：快速美化页面¶

除了网格系统，Bootstrap 还有很多辅助类，能帮你快速调整样式，比如：
- 文本居中：text-center（让文字居中）
- 背景色：bg-primary（蓝色）、bg-success（绿色）、bg-light（浅灰）等（Bootstrap 自带颜色库）
- 内边距/外边距：p-3（内边距 1rem）、m-3（外边距 1rem），数字越大间距越大（0-5）
- 卡片：card 类，把内容包装成卡片样式（更美观）

六、总结¶

Bootstrap5 响应式网格系统的核心是 “12 列布局 + 断点适配”，通过 col-<断点>-<占比> 类名就能轻松实现不同屏幕下的布局变化。现在你可以：
1. 复制上面的示例代码，在浏览器中打开，调整窗口大小，看看不同设备下的布局变化。
2. 尝试修改 col-md-6 为 col-md-4，看看列的宽度是否变化。
3. 给列添加 bg-primary 或 text-danger 等颜色类，体验 Bootstrap 的快捷样式。

刚开始可能觉得类名有点多，但多写几次就能记住。Bootstrap 最大的优势是“开箱即用”，不用重复写 CSS，专注于内容本身就好。接下来可以尝试用网格系统做更复杂的页面，比如导航栏、图片轮播等，慢慢熟悉它的其他功能~