bootstrap5实现模态框

要使用 Bootstrap 5 实现模态框，可以按照以下步骤进行：

1. 添加 Bootstrap 5 的 CSS 和 JS 文件到你的 HTML 页面中，可以通过 CDN 引入，也可以下载到本地引入。

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

<!-- 引入 Bootstrap 5 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

2. 在 HTML 中编写模态框的结构，可以参考以下示例代码：

<!-- 模态框的触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">打开模态框</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">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

3. 在模态框触发按钮中添加 `data-bs-toggle="modal"` 和 `data-bs-target="#exampleModal"` 属性，表示该按钮用于触发模态框的显示，并指定要显示的模态框的 ID。

4. 在模态框结构中添加 `class="modal fade"` 属性，表示该结构是一个模态框，并默认隐藏。同时，指定该模态框的 ID 和其他相关属性。

5. 在模态框结构中添加模态框的头部、主体和尾部，分别使用 `class="modal-header"`、`class="modal-body"` 和 `class="modal-footer"` 属性表示。可以在头部中添加模态框的标题和关闭按钮，主体中添加模态框的内容，尾部中添加操作按钮。

6. 最后，在模态框结构中添加 `data-bs-dismiss="modal"` 属性的按钮，可以在点击该按钮时关闭模态框。

通过以上步骤，就可以使用 Bootstrap 5 实现一个简单的模态框了。