您可以直接复制下面的代码，保存为 .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>
<!-- 1. 引入 Bootstrap 的 CSS 文件 (从 CDN) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选：添加自定义样式以增强效果 -->
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
}
.navbar {
margin-bottom: 20px;
}
.carousel-item img {
height: 400px;
object-fit: cover; /* 确保图片覆盖整个区域，不变形 */
}
.feature-box {
text-align: center;
margin-bottom: 30px;
}
.feature-icon {
font-size: 3rem;
color: #0d6efd; /* Bootstrap 的 primary 颜色 */
margin-bottom: 15px;
}
footer {
background-color: #f8f9fa;
padding: 20px 0;
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<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" 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>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- 轮播图 -->
<div id="heroCarousel" class="carousel slide mb-5" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x400.png?text=幻灯片+1" class="d-block w-100" alt="幻灯片 1">
<div class="carousel-caption d-none d-md-block">
<h5>欢迎来到我们的网站</h5>
<p>这里是第一个幻灯片的描述文字。</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x400.png?text=幻灯片+2" class="d-block w-100" alt="幻灯片 2">
<div class="carousel-caption d-none d-md-block">
<h5>探索我们的服务</h5>
<p>这里是第二个幻灯片的描述文字。</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1200x400.png?text=幻灯片+3" class="d-block w-100" alt="幻灯片 3">
<div class="carousel-caption d-none d-md-block">
<h5>与我们联系</h5>
<p>这里是第三个幻灯片的描述文字。</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- 主要内容区：使用 Bootstrap Grid System -->
<h2 class="text-center mb-4">我们的特色服务</h2>
<div class="row">
<!-- 在大屏幕上占3列 (12/4=3)，中等屏幕上占6列，小屏幕上占12列 -->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png?text=服务+图片" class="card-img-top" alt="服务图片">
<div class="card-body">
<h5 class="card-title">服务一</h5>
<p class="card-text">这是对第一个服务的详细描述，它可以在各种屏幕尺寸下良好地显示。</p>
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png?text=服务+图片" class="card-img-top" alt="服务图片">
<div class="card-body">
<h5 class="card-title">服务二</h5>
<p class="card-text">这是对第二个服务的详细描述，Bootstrap 的网格系统让布局变得非常简单。</p>
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<!-- 注意：在中等屏幕上，这个 div 会占满12列，形成单列布局 -->
<div class="card h-100">
<img src="https://via.placeholder.com/300x200.png?text=服务+图片" class="card-img-top" alt="服务图片">
<div class="card-body">
<h5 class="card-title">服务三</h5>
<p class="card-text">这是对第三个服务的详细描述，在手机上，所有服务卡片会自动堆叠显示。</p>
<a href="#" class="btn btn-primary">了解更多</a>
</div>
</div>
</div>
</div>
<!-- 另一种布局：特色展示 -->
<h2 class="text-center my-5">为什么选择我们？</h2>
<div class="row">
<div class="col-md-4 feature-box">
<div class="feature-icon">🚀</div>
<h4>快速高效</h4>
<p>我们致力于提供最快的服务，确保您的项目按时交付。</p>
</div>
<div class="col-md-4 feature-box">
<div class="feature-icon">💡</div>
<h4>创新设计</h4>
<p>拥有专业的设计团队，为您打造独一无二的用户体验。</p>
</div>
<div class="col-md-4 feature-box">
<div class="feature-icon">🛡️</div>
<h4>安全可靠</h4>
<p>采用业界领先的技术，保障您的数据和信息安全。</p>
</div>
</div>
<!-- 联系我们表单 -->
<h2 class="text-center my-5">联系我们</h2>
<div class="row justify-content-center">
<div class="col-lg-6">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">我们绝不会将您的邮箱分享给任何人。</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3">
<label for="exampleTextarea" class="form-label">留言内容</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">订阅我们的最新资讯</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</div> <!-- 结束 container -->
<!-- 页脚 -->
<footer class="text-center">
<div class="container">
<p>© 2025 我的网站. 保留所有权利.</p>
</div>
</footer>
<!-- 2. 引入 Bootstrap 的 JavaScript 文件 (从 CDN) -->
<!-- 必须在 jQuery 和 Popper.js 之后引入 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>
代码解析与关键响应式特性
核心响应式设置
<meta name="viewport" ...>: 这是实现响应式设计的关键，它告诉浏览器如何控制页面的尺寸和缩放。width=device-width确保页面宽度与设备屏幕宽度一致，initial-scale=1.0设置初始缩放比例为100%。
导航栏
navbar-expand-lg: 这个类表示导航栏在大屏幕上会展开显示所有链接，当屏幕尺寸小于lg(992px) 时，链接会隐藏,只显示汉堡菜单按钮。navbar-toggler: 这个按钮在小屏幕上出现，点击它会触发data-bs-target="#navbarNav"所指向的菜单区域的折叠/展开。ms-auto: 这是一个 Flexbox 辅助类，m是 margin，s是 start（左），auto表示自动将导航链接推到右侧。
轮播图
carousel-caption d-none d-md-block: 这是轮播图文字描述的响应式关键。d-none: 默认隐藏。d-md-block: 在中等屏幕及以上显示为块级元素。- 这意味着在手机等小屏幕上，图片上的文字描述会自动隐藏，以避免遮挡图片,提升视觉体验。
网格布局 - 最核心的响应式工具
container: 提供一个固定宽度的容器，并在不同屏幕尺寸下有最大宽度限制,内容居中。row: 代表一行，相当于一个 flex 容器。- *`col-`**: 这是列，是网格系统的核心。
col-lg-4: 在大屏幕上，该列占 12/4 = 3 列宽度。col-md-6: 在中等屏幕上，该列占 12/6 = 2 列宽度。col-sm-12: 在小屏幕上，该列占满 12 列,即独占一行。
- 响应式断点:
xs(Extra small, <576px): 默认行为，无需特别指定col-xs-*。sm(Small, ≥576px)md(Medium, ≥768px)lg(Large, ≥992px)xl(Extra large, ≥1200px)xxl(Extra extra large, ≥1400px)
- 示例布局:
- 在大屏幕上：
col-lg-4x 3 → 3列布局。 - 在中等屏幕上：
col-md-6x 2 +col-md-12→ 2列布局,第三个元素换行并占满宽度。 - 在小屏幕上：
col-sm-12x 3 → 3个元素垂直堆叠,形成单列布局。
- 在大屏幕上：
卡片
card: Bootstrap 的内容容器组件,非常灵活。h-100: 一个高度工具类，让卡片的高度与其父容器（.row）相同,确保所有卡片在视觉上高度一致。
表单
form-control: 为输入框、文本域等添加样式,并使其在移动设备上更易于触摸。form-label: 为标签添加适当的间距和样式。form-text: 用于添加输入框下方的辅助说明文本。
JavaScript 依赖
- Bootstrap 的组件（如轮播图、折叠导航、下拉菜单等）依赖于 JavaScript，必须引入 Bootstrap 的 JS 文件。
- 注意顺序: Bootstrap 的 JS 依赖于 Popper.js，所以加载顺序通常是：
popper.min.js->bootstrap.min.js。
如何使用和修改
- 复制代码: 将上面的完整代码复制到一个新的文本文件中。
- 保存文件: 将文件命名为
index.html或任何你喜欢的.html后缀名。 - 打开文件: 用 Chrome、Firefox 或 Edge 等现代浏览器打开这个文件。
- 测试响应式:
- 桌面端: 直接拖动浏览器窗口的边缘，改变窗口宽度，观察导航栏、网格布局和轮播图文字的变化。
- 移动端: 打开浏览器开发者工具（按 F12），点击左上角的手机/平板图标,模拟不同的设备尺寸。
这个示例为你提供了一个坚实的基础，你可以基于此添加更多内容和功能,构建出功能完善的响应式网站。
（图片来源网络，侵删）
