Bootstrap 5 是一个开源的前端框架，它为开发响应式和现代化的网页提供了大量的组件和工具。相比 Bootstrap 4，Bootstrap 5 引入了一些新的特性和改进，最重要的变化之一是弃用了 jQuery，并完全转向原生 JavaScript。

下面是一个 Bootstrap 5 的基本教程，帮助你快速了解如何使用这个框架创建一个网页。

1. 引入 Bootstrap 5

首先，你需要在网页中引入 Bootstrap 5 的 CSS 和 JS 文件。你可以从 Bootstrap 官方 CDN 获取这些文件，也可以下载到本地使用。

引入 CDN（推荐方法）

<!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Bootstrap 5 JS 和 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

或者，你可以下载并托管本地文件：

2. 基本布局

Bootstrap 5 使用 网格系统（Grid System） 来创建响应式布局。网格系统的基础是 row 和 col 类，提供了12列布局，允许你控制每一列的宽度。

示例：基本的网格布局

<div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>

3. 导航栏（Navbar）

Bootstrap 5 提供了一个简洁的导航栏组件，它支持响应式设计并能在小屏幕上折叠。

示例：基础导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</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="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

4. 按钮（Button）

按钮组件非常常用，Bootstrap 5 提供了多种样式的按钮。

示例：按钮

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>

5. 卡片（Card）

卡片组件是 Bootstrap 中非常常用的一种 UI 元素，它用于展示内容，如图片、文本等。

示例：基本卡片

<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">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

6. 表单（Form）

Bootstrap 5 中，表单元素的样式有了一些变化，提供了更简洁和一致的界面。

示例：基础表单

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

7. 模态框（Modal）

Bootstrap 5 提供了一个易于使用的模态框组件，通常用于显示弹出窗口。

示例：模态框

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the content of the modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

8. 提示框（Alert）

Bootstrap 5 提供了不同风格的提示框，用于显示信息、警告、错误等。

示例：提示框

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

9. 图标（Icons）

Bootstrap 5 已经移除了自带的图标库，但它推荐使用 Font Awesome 或其他第三方图标库。

示例：使用 Font Awesome 图标

<i class="fas fa-heart"></i>
<i class="fas fa-camera"></i>

10. 响应式设计

Bootstrap 5 提供了非常强大的响应式设计支持。你可以使用不同的列类来控制在不同屏幕大小下的布局。例如：

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    Column 1
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    Column 2
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    Column 3
  </div>
</div>

11. 总结

Bootstrap 5 是一个功能强大的前端框架，支持响应式布局、丰富的组件和现代化的设计。它通过移除 jQuery、优化了 JavaScript 代码，使得开发者可以更加轻松地构建高质量的网页和应用。

你可以根据项目需求选择 Bootstrap 的组件，创建从简单的静态页面到复杂的动态页面。