示例 1：最简单的 Bootstrap 页面
这个例子展示了如何引入 Bootstrap 并创建一个最基础的页面，包含导航栏、内容区和页脚。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 1. 设置字符集和视口 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 2. 引入 Bootstrap CSS (使用 CDN) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
我的第一个 Bootstrap 页面</title>
</head>
<body>
<!-- 导航栏 -->
<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">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" 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>
<!-- 主要内容区 -->
<main class="container mt-5">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">你好，Bootstrap！</h1>
<p class="col-md-8 fs-4">这是一个使用 Bootstrap 5 构建的简单示例页面，它展示了响应式布局、组件和实用工具类的强大功能。</p>
<button class="btn btn-primary btn-lg" type="button">了解更多</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>标题一</h2>
<p>这是一些示例文本，用于填充内容区域，Bootstrap 的栅格系统让布局变得非常简单。</p>
<p><a class="btn btn-secondary" href="#">查看详情 »</a></p>
</div>
<div class="col-md-4">
<h2>标题二</h2>
<p>另一列内容，通过调整列数，页面可以完美地适应不同尺寸的屏幕。</p>
<p><a class="btn btn-secondary" href="#">查看详情 »</a></p>
</div>
<div class="col-md-4">
<h2>标题三</h2>
<p>最后一列，这就是 Bootstrap 响应式设计的魅力所在。</p>
<p><a class="btn btn-secondary" href="#">查看详情 »</a></p>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="mt-5 py-3 bg-dark text-white text-center">
<div class="container">
<span>© 2025 我的网站. 保留所有权利.</span>
</div>
</footer>
<!-- 3. 引入 Bootstrap JS (需要 Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
示例 2：功能更丰富的响应式布局页面
这个例子包含了更多常见的 Bootstrap 组件，如轮播图、卡片、模态框和表单，非常适合作为一个产品展示或企业官网的首页。
<!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 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">
<style>
/* 自定义一些样式 */
.carousel-item img {
object-fit: cover;
height: 400px;
}
.feature-icon {
font-size: 2.5rem;
color: #0d6efd;
}
</style>
</head>
<body>
<!-- 固定在顶部的导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><i class="bi bi-shop"></i> 精品商城</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<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>
<li class="nav-item ms-3">
<a class="btn btn-outline-light" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">登录</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 轮播图 -->
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1200x400/6c757d/ffffff?text=幻灯片+1" class="d-block w-100" alt="...">
<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/28a745/ffffff?text=幻灯片+2" class="d-block w-100" alt="...">
<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/dc3545/ffffff?text=幻灯片+3" class="d-block w-100" alt="...">
<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"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 主要内容 -->
<div class="container my-5">
<!-- 特色功能 -->
<div class="row text-center py-5">
<div class="col-md-4">
<i class="bi bi-truck feature-icon"></i>
<h3>免费配送</h3>
<p>订单满额即可享受免费配送服务。</p>
</div>
<div class="col-md-4">
<i class="bi bi-shield-check feature-icon"></i>
<h3>安全支付</h3>
<p>我们采用最先进的加密技术保障您的支付安全。</p>
</div>
<div class="col-md-4">
<i class="bi bi-arrow-clockwise feature-icon"></i>
<h3>轻松退换</h3>
<p>30天内无理由退换货，让您购物无忧。</p>
</div>
</div>
<!-- 产品卡片 -->
<h2 class="text-center mb-4">热门产品</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<img src="https://via.placeholder.com/400x300/0dcaf0/000000?text=产品A" class="card-img-top" alt="产品A">
<div class="card-body">
<h5 class="card-title">产品名称 A</h5>
<p class="card-text">这是一段关于产品A的简要描述，突出了它的主要特点和优势。</p>
</div>
<div class="card-footer bg-transparent">
<a href="#" class="btn btn-primary w-100">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="https://via.placeholder.com/400x300/ffc107/000000?text=产品B" class="card-img-top" alt="产品B">
<div class="card-body">
<h5 class="card-title">产品名称 B</h5>
<p class="card-text">这是一段关于产品B的简要描述，突出了它的主要特点和优势。</p>
</div>
<div class="card-footer bg-transparent">
<a href="#" class="btn btn-primary w-100">查看详情</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<img src="https://via.placeholder.com/400x300/198754/ffffff?text=产品C" class="card-img-top" alt="产品C">
<div class="card-body">
<h5 class="card-title">产品名称 C</h5>
<p class="card-text">这是一段关于产品C的简要描述，突出了它的主要特点和优势。</p>
</div>
<div class="card-footer bg-transparent">
<a href="#" class="btn btn-primary w-100">查看详情</a>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-dark text-white py-4">
<div class="container text-center">
<p>© 2025 精品商城. All Rights Reserved.</p>
</div>
</footer>
<!-- 登录模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">用户登录</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<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 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 w-100">登录</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
如何使用这些代码
- 创建文件：在你的电脑上创建一个新的文本文件。
- 复制粘贴：将你喜欢的示例代码全部复制并粘贴到这个新文件中。
- 保存文件：将文件重命名，
index.html或my-page.html。确保文件扩展名是.html。 - 打开浏览器：找到你保存的文件，用任意现代浏览器（如 Chrome, Firefox, Edge）打开它。
你就可以看到一个由 Bootstrap 驱动的、功能完整的网页了！
代码关键点解析
-
HTML5 文档结构：
<!DOCTYPE html>：声明这是一个 HTML5 文档。<html lang="zh-CN">：根元素，并指定语言为中文。
-
<head>部分：
（图片来源网络，侵删）<meta charset="UTF-8">：确保浏览器能正确显示中文字符。<meta name="viewport" ...>：至关重要！ 这行代码告诉浏览器如何控制页面的尺寸和缩放，是实现响应式设计的基础。<link href="...bootstrap.min.css">：通过 CDN (Content Delivery Network) 引入 Bootstrap 的核心样式文件，这是最简单快捷的方式。<script src="...bootstrap.bundle.min.js">：引入 Bootstrap 的 JavaScript 文件，它包含了 Bootstrap 的所有交互组件（如导航栏折叠、轮播图、模态框等）和其依赖的 Popper.js 库。
-
<body>部分：- 组件：代码中使用了大量的 Bootstrap 类名来构建页面，
navbar,container,row,col,carousel,card,modal等，这些类名定义了组件的样式和行为。 - 栅格系统：
row和col-*-*(如col-md-4) 是 Bootstrap 栅格系统的核心，它将页面划分为12列，md代表中等屏幕（如平板），col-md-4表示在中等屏幕上占4列（即1/3宽度），在小屏幕上，它会自动堆叠。 - 响应式工具类：
mt-5(margin-top),text-center等是 Bootstrap 的实用工具类，用于快速添加样式，无需编写自定义 CSS。
- 组件：代码中使用了大量的 Bootstrap 类名来构建页面，
开始你的 Bootstrap 之旅
- 官方文档是你的最佳朋友：Bootstrap 官方文档 提供了所有组件、类和工具的详细说明、示例和代码片段。
- 从模仿开始：像上面的例子一样，复制代码，修改内容，看看会发生什么。
- 逐步学习：先掌握栅格系统和几个核心组件（如导航栏、卡片），然后再尝试更复杂的组件（如轮播图、模态框）。
（图片来源网络，侵删）
