下面我将从核心原理、具体步骤、代码示例、进阶技巧四个方面，详细为你讲解如何使用 Bootstrap 实现一个完美的 PC 和手机自适应网页。

bootstrap pc 手机网页
（图片来源网络，侵删）

核心原理：响应式设计的三大支柱

Bootstrap 的响应式设计主要依赖于以下三个核心技术：

  1. 视口

    • 作用：告诉浏览器如何控制页面的尺寸和缩放。
    • 代码：在 HTML 的 <head> 中添加一行 meta 标签。
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • 解释：
      • width=device-width：设置页面宽度为设备屏幕的宽度。
      • initial-scale=1.0：设置初始缩放比例为 1.0,即不缩放。

  2. 流式网格系统

    • 作用：Bootstrap 的核心，它将页面划分为 12 列的网格系统，在 PC 端，这些列并排显示；在手机端，这些列会自动堆叠（从一行变成一列）。
    • 原理：通过百分比定义列的宽度,而不是固定的像素值。
    • 类名：col-* 系列，col-md-4。

  3. 响应式工具类

    bootstrap pc 手机网页
    （图片来源网络，侵删）
    • 作用：在特定断点下显示或隐藏元素,或者改变元素的布局。
    • 原理：通过 d-* 类来控制元素的显示属性。
    • 常用类：
      • d-none：在所有屏幕尺寸下隐藏。
      • d-block：在所有屏幕尺寸下显示为块级元素。
      • d-md-none：在中等屏幕尺寸及以上时隐藏。
      • d-md-block：在中等屏幕尺寸及以上时显示为块级元素。

具体步骤：从零开始创建一个响应式页面

步骤 1：引入 Bootstrap

你可以选择两种方式引入 Bootstrap：

CDN（推荐新手） 直接将 Bootstrap 的 CSS 和 JS 文件链接放在你的 HTML 文件中，这是最快、最简单的方式。

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- (可选) Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<!-- 你的自定义 CSS (可选) -->
<link rel="stylesheet" href="style.css">

下载并本地引入

  1. 访问 Bootstrap 官网 下载最新版本。
  2. 解压文件，将 dist/css/bootstrap.min.css 和 dist/js/bootstrap.bundle.min.js 复制到你的项目文件夹中。
  3. 在 HTML 中通过相对路径引入它们。
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- 你的自定义 CSS (可选) -->
<link rel="stylesheet" href="style.css">

步骤 2：设置视口

在 <head> 标签内添加前面提到的 viewport meta 标签。

bootstrap pc 手机网页
（图片来源网络，侵删）
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的响应式网页</title>
    <!-- ... 其他引入 ... -->
</head>

步骤 3：使用容器、行和列搭建布局

这是使用 Bootstrap 网格系统的标准流程。

  • <div class="container">：一个固定宽度的容器，在 PC 端有左右内边距，在手机端会 100% 宽度。
  • <div class="row">：行，用于放置列,它会自动清除子元素的浮动。
  • <div class="col-*-*">：列。

col-*-* 的格式是 col-[断点]-[宽度]

  • 断点：决定这个样式在哪种屏幕尺寸下生效。
    • xs：超小屏幕 (手机, <576px) - 可以省略，直接写 col-6
    • sm：小屏幕 (平板, ≥576px)
    • md：中等屏幕 (小笔记本, ≥768px)
    • lg：大屏幕 (笔记本, ≥992px)
    • xl：超大屏幕 (大屏显示器, ≥1200px)
    • xxl：超大屏幕 (≥1400px)
  • 宽度：数字，范围是 1-12，表示占 12 列中的几列。

示例：一个经典的 PC 两栏、手机一栏布局

<div class="container">
  <div class="row">
    <!-- 
      在手机上 (默认 <576px), 这个 div 会占满 12 列 (col-12)。
      在中等屏幕及以上 (≥768px), 这个 div 会占 8 列 (col-md-8)。
    -->
    <div class="col-12 col-md-8">
      <h1>主要内容</h1>
      <p>在 PC 上，这部分内容会占据 8/12 的宽度，右侧会有侧边栏，在手机上，它会占满整个屏幕宽度。</p>
    </div>
    <!-- 
      在手机上 (默认 <576px), 这个 div 会占满 12 列 (col-12)。
      在中等屏幕及以上 (≥768px), 这个 div 会占 4 列 (col-md-4)。
    -->
    <div class="col-12 col-md-4">
      <h2>侧边栏</h2>
      <p>在 PC 上，这是侧边栏，在手机上，它会自动跑到主内容的下方。</p>
    </div>
  </div>
</div>

步骤 4：使用响应式组件和工具类

示例 1：导航栏

Bootstrap 的导航栏是响应式的典范，在 PC 上是水平菜单，在手机上会自动折叠成一个“汉堡”菜单。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">我的网站</a>
    <!-- 
      这是“汉堡”菜单按钮，只在手机端显示。
      navbar-toggler 控制这个按钮的行为。
    -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 
      这是折叠的菜单内容。
      当屏幕变小时，这个区域会被隐藏，点击汉堡按钮后展开。
    -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" 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>

示例 2：响应式图片

使用 img-fluid 类可以让图片自适应其父容器的宽度,防止图片溢出屏幕。

<img src="..." class="img-fluid" alt="响应式图片">

示例 3：响应式文本

使用 display-* 类来控制元素在不同屏幕下的显示方式。

<!-- 在 PC 上是并排的两个卡片，在手机上是一个在上一个在下 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 d-none d-md-block">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">PC 端专属内容</h5>
          <p class="card-text">这个内容只在 PC 端显示。</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">通用内容</h5>
          <p class="card-text">这个内容在 PC 和手机上都显示。</p>
        </div>
      </div>
    </div>
  </div>
</div>

完整代码示例

下面是一个完整的 HTML 文件，你可以直接复制保存为 .html 文件，然后在浏览器中打开,并尝试调整浏览器窗口大小来观察效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 响应式网页示例</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 一些自定义样式让效果更明显 */
        .hero-section {
            background-color: #f0f8ff; /* AliceBlue */
            padding: 60px 0;
            text-align: center;
        }
        .feature-box {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 1. 响应式导航栏 -->
    <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" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" 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>
    <!-- 2. 英雄区域 -->
    <div class="hero-section">
        <div class="container">
            <h1>欢迎来到我们的网站</h1>
            <p class="lead">这是一个使用 Bootstrap 5 构建的响应式网页，请尝试调整您的浏览器窗口大小！</p>
            <img src="https://via.placeholder.com/1200x400.png?text=响应式图片" alt="响应式图片占位符" class="img-fluid">
        </div>
    </div>
    <!-- 3. 主要内容区域 (PC 两栏，手机一栏) -->
    <div class="container my-5">
        <div class="row">
            <div class="col-lg-8">
                <h2>主要文章内容</h2>
                <p>这里是网站的主要内容，在 PC 端（大屏幕），这部分内容会占据 8/12 的宽度，右侧会有一个侧边栏，在手机端，它会自动占满整个屏幕的宽度，侧边栏内容会跑到它的下方。</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
            </div>
            <div class="col-lg-4">
                <h3>侧边栏</h3>
                <p>这是侧边栏，通常包含一些次要信息，比如广告、相关链接、作者简介等。</p>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">链接 1</a>
                    <a href="#" class="list-group-item list-group-item-action">链接 2</a>
                    <a href="#" class="list-group-item list-group-item-action">链接 3</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 4. 特性展示区 (PC 3栏，手机 1栏) -->
    <div class="container my-5">
        <h2 class="text-center mb-4">我们的特性</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="feature-box">
                    <h4>特性 1</h4>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box">
                    <h4>特性 2</h4>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box">
                    <h4>特性 3</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- 5. 页脚 -->
    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            <p>&copy; 2025 我的响应式网站. All rights reserved.</p>
        </div>
    </footer>
    <!-- 引入 Bootstrap 5 JS (包含 Popper.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

进阶技巧和最佳实践

  1. 移动优先

    • 理念：先为最小的屏幕（手机）设计样式，然后通过媒体查询或 Bootstrap 的断点类,逐步为更大的屏幕添加样式。
    • 优势：这能确保你的网站在移动设备上有良好的基础性能和用户体验，避免在移动设备上加载大量不必要的 PC 端样式。
    • 实践：在写 CSS 时，可以先写一个通用的样式（col-12），然后再用 md-、lg- 等类来覆盖 PC 端的样式，Bootstrap 的网格系统本身就是移动优先的。

  2. 使用自定义 CSS 覆盖

    • 当 Bootstrap 的默认样式不完全符合你的需求时，创建一个单独的 style.css 文件，并在 Bootstrap CSS 之后引入它。
    • 利用 CSS 的优先级规则，你可以轻松地覆盖 Bootstrap 的默认样式。.navbar-brand { font-size: 2rem; }。

  3. 测试，测试，再测试

    • 浏览器开发者工具：这是最重要的工具，使用 Chrome 或 Firefox 的开发者工具，可以模拟各种手机、平板和 PC 的屏幕尺寸,实时查看和调试你的网页。
    • 真机测试：最终一定要在真实的手机或平板上进行测试，因为模拟器和真实设备的渲染、性能和网络环境可能存在差异。

  4. 关注性能

    • 虽然 CDN 很方便，但对于生产环境，可以考虑只引入你需要的 Bootstrap 组件,以减小文件体积。
    • 压缩和优化你的图片资源。

通过以上步骤和技巧，你就可以利用 Bootstrap 轻松构建出在各种设备上都能完美显示的响应式网页了。