bootstrap 弹框

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。其中，Bootstrap弹框是一种常用的交互组件，用于在页面上显示一些提示、警告或者用户交互的内容。

Bootstrap弹框有两种类型：模态框（Modal）和警告框（Alert）。模态框是一种覆盖在页面上的弹出窗口，可以用来显示详细信息、表单、图片等内容。警告框则是一种简单的提示框，用于显示警告、成功、错误等信息。

使用Bootstrap弹框需要引入Bootstrap的CSS和JavaScript文件，并按照一定的HTML结构和属性来定义弹框的内容和行为。以下是一个简单的示例：

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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
        <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>

<!-- 警告框示例 -->
<div class="alert alert-success" role="alert">
  这是一个成功的警告框。
</div>

在上述示例中，模态框通过`data-toggle="modal"`和`data-target="#myModal"`来触发弹出，并使用`<div class="modal">`来定义模态框的结构。警告框则使用`<div class="alert">`来定义。