首页 Bootstrap5组件手册

1.基本固定格式
2.注意按钮与模态框的关联

=======================================
<div class="modal" id="motaikuang">
基础类：
.modal

组合类：
.fade      动画，弹出关闭

=======================================
<div class="modal-dialog">
基础类：
.modal-dialog

组合类：
.modal-dialog-centered     居中
.modal-dialog-scrollable   显示滚动条（内容过多）

组合类：（单选，模态框大小）
.modal-sm      小号
.modal-lg      大号
.modal-xl      特大号
.modal-fullscreen           全屏
.modal-fullscreen-sm-down   576px--以下全屏
.modal-fullscreen-md-down   768px--以下全屏
.modal-fullscreen-lg-down   992px--以下全屏
.modal-fullscreen-xl-down   1200px--以下全屏
.modal-fullscreen-xxl-down  1400px-=-以下全屏

<div class="modal" id="motaikuang">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header"> 
        <h4 class="modal-title">标题</h4>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- 模态框内容 -->
      <div class="modal-body">
      内容...
      </div>

      <!-- 模态框底部 --> 
      <div class="modal-footer"> 
        <button class="btn btn-primary" data-bs-dismiss="modal">确认</button>
      </div> 
    </div>
  </div>
</div>

<!--打开模态框-->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#motaikuang">模态框</button>