Bootstrap弹框：轻松玩转各种弹框效果！

2023-06-24 13:35:26

Bootstrap 弹框：简化前端弹出框开发的福音

什么是 Bootstrap 弹框？

Bootstrap 弹框，也称为模态框，是 Bootstrap 框架中常用的组件，用于创建浮动的对话框，在页面上提供额外的信息或功能，同时阻止用户与页面其他部分进行交互。Bootstrap 弹框具有响应性、可定制性和易用性等优点。

Bootstrap 弹框的用法

要使用 Bootstrap 弹框，您需要引用 Bootstrap 库。然后，您可以使用 HTML 创建一个弹框，它包括一个模态窗口和一个触发按钮。

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>