bootstrap5 响应式示例

使用 bootstrap5 实现一个 responsive 布局

Bootstrap 5 提供了强大的响应式布局系统，基于 Flexbox 和 响应式断点（Breakpoints），可以轻松创建适应不同设备屏幕的网页布局。

以下是几个常用的 Bootstrap 5 响应式示例，涵盖网格系统、导航栏、图片、表单等。

✅ 示例 1：响应式网格布局（Grid）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap 5 响应式网格示例</title>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <h2>响应式网格布局</h2>
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
      <div class="p-3 bg-primary text-white text-center">列 1</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
      <div class="p-3 bg-secondary text-white text-center">列 2</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 mb-3">
      <div class="p-3 bg-success text-white text-center">列 3</div>
    </div>
  </div>
</div>

</body>
</html>

📌 说明：
- col-sm-12：在小屏（<576px）上占满整行。
- col-md-6：在中屏（≥768px）上每行 2 列。
- col-lg-4：在大屏（≥992px）上每行 3 列。

✅ 示例 2：响应式导航栏（Navbar）

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <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 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="#">服务</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

📌 说明：
- navbar-expand-lg：在 lg（≥992px）及以上屏幕展开，更小屏幕折叠为汉堡菜单。
- 使用 data-bs-toggle 和 data-bs-target 实现折叠功能。

✅ 示例 3：响应式图片

<img src="https://via.placeholder.com/800x400" class="img-fluid" alt="响应式图片">

📌 img-fluid 类使图片在容器中缩放，保持宽高比，适配不同屏幕。

✅ 示例 4：响应式表单

<form class="container mt-4">
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName" class="form-label">名字</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName" class="form-label">姓氏</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

📌 在小屏幕上，两列自动堆叠为上下排列。

✅ 示例 5：隐藏/显示（响应式工具类）

<div class="d-none d-md-block">
  只在中屏及以上显示
</div>

<div class="d-block d-md-none">
  只在小屏显示
</div>

📌 使用 d-none d-md-block 等工具类控制元素在不同断点的显示。

📏 Bootstrap 5 断点一览

| 断点 | 类前缀 | 屏幕宽度 |
|------|--------|----------|
| 超小 (xs) | - | <576px（默认） |
| 小 (sm) | sm- | ≥576px |
| 中 (md) | md- | ≥768px |
| 大 (lg) | lg- | ≥992px |
| 超大 (xl) | xl- | ≥1200px |
| 超超大 (xxl) | xxl- | ≥1400px |

✅ 完整可运行示例（组合版）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap 5 响应式完整示例</title>
  <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 navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">响应式网站</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <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>
      </ul>
    </div>
  </div>
</nav>

<!-- 响应式内容 -->
<div class="container mt-4">
  <h1>欢迎访问</h1>
  <p class="d-none d-md-block">这是中屏及以上才显示的提示。</p>
  <p class="d-block d-md-none">这是手机端显示的提示。</p>

  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="p-3 bg-light border text-center">项目 1</div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="p-3 bg-light border text-center">项目 2</div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 mb-3">
      <div class="p-3 bg-light border text-center">项目 3</div>
    </div>
  </div>

  <img src="https://dummyimage.com/1200x400" class="img-fluid rounded mb-4" alt="Banner">

  <form>
    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label">姓名</label>
        <input type="text" class="form-control">
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">邮箱</label>
        <input type="email" class="form-control">
      </div>
    </div>
    <button class="btn btn-success">提交</button>
  </form>
</div>

<!-- 引入 Bootstrap JS（含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

✅ 总结

Bootstrap 5 的响应式能力主要依赖：
- container / container-fluid
- row 和 col-*
- 响应式断点类（sm, md, lg 等）
- 工具类（d-none, img-fluid, text-center 等）
- 可折叠组件（如导航栏）

你可以根据实际需求组合使用这些功能，快速构建美观且响应式的网页。

如需进一步定制，可参考官方文档：https://getbootstrap.com/docs/5.3/