步骤1：引入 Bootstrap 5 CSS 文件
首先，你需要在你的HTML文件的 <head> 部分引入 Bootstrap 5 的CSS文件。可以通过以下方式从 CDN 引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap 5 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 5 教程</title>
</head>
<body>
<!-- 你的内容将在这里添加 -->
<!-- 引入 Bootstrap 5 JavaScript 插件（可选）-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
步骤2：使用 Bootstrap 5 组件
现在你已经引入了 Bootstrap 5 的CSS文件，你可以使用其提供的组件来构建页面。
导航栏（Navbar）
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></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>
卡片（Card）
<!-- 卡片 -->
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" 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>
表单（Form）
<!-- 表单 -->
<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>
<button type="submit" class="btn btn-primary">提交</button>
</form>
总结
这是一个简单的 Bootstrap 5 入门教程，演示了如何引入 Bootstrap 5 并使用其基本组件构建网页。你可以根据需要定制这些组件，并深入学习 Bootstrap 5 的其他功能和组件。在[Bootstrap官方文档](https://getbootstrap.com/docs/5.0/getting-started/introduction/)中，你可以找到更详细和全面的信息。
转载请注明出处：http://www.zyzy.cn/article/detail/12681/Bootstrap5