Bootstrap 5 弹出框

Bootstrap 5 弹出框

引言

Bootstrap 5 是一个流行的前端框架，它提供了一套丰富的组件和工具，用于快速开发响应式和移动设备优先的网页。其中，弹出框（Modal）是 Bootstrap 5 的一个核心组件，用于创建对话框、弹出窗口或其他覆盖层，以显示内容并临时中断用户与页面的交互。本文将详细介绍 Bootstrap 5 弹出框的用法、配置选项以及最佳实践。

基本用法

在 Bootstrap 5 中创建一个基本的弹出框涉及以下几个步骤：

1. 添加触发按钮：首先，在页面中添加一个按钮，用于触发弹出框的显示。

   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
     打开弹出框
   </button>
   

2. 创建弹出框结构：接着，定义弹出框的 HTML 结构，包括一个 div 元素，并为其添加 modal 类。

   <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div clas