Bootstrap5 弹出框

Bootstrap5 弹出框

概述

Bootstrap 5 是一款流行的前端框架，它提供了一套响应式、移动设备优先的Web开发工具。其中，Bootstrap 5 弹出框组件（Modal）是一个非常实用的功能，可以帮助开发者轻松创建出美观、易用的弹出层。本文将详细介绍Bootstrap 5 弹出框的用法，包括基本结构、配置选项、响应式布局以及与JavaScript的交互。

基本结构

Bootstrap 5 弹出框的基本结构包括以下部分：

• .modal：表示整个弹出框容器。
• .modal-dialog：表示弹出框的对话框容器。
• .modal-content：表示弹出框的内容区域。
• .modal-header：表示弹出框的头部区域，通常包含关闭按钮和标题。
• .modal-body：表示弹出框的主体区域，用于放置内容。
• .modal-footer：表示弹出框的底部区域，通常包含按钮。

以下是一个简单的弹出框示例：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <button type="