前端Wiki/CSS 框架/进阶/Bootstrap 常用组件

模态框与工具类

模态框（modal）展示了 Bootstrap「data 属性驱动」的交互模式：触发按钮上写 data-bs-toggle="modal" 和 data-bs-target="#myModal"，弹窗结构按 modal → modal-dialog → modal-content（header/body/footer）三层嵌套，关闭按钮写 data-bs-dismiss="modal"。全程零 JS。

工具类（utilities）是 Bootstrap 的另一大宝藏，高频三类：间距——规则是 {m|p}{方向}-{大小}，m=margin、p=padding，方向 t/b/s/e（上下左右）或空（四边）、x/y（水平/垂直），大小 0~5；显示与布局——d-flex d-none d-block；文本——text-center fw-bold text-muted。

一个实用组合：d-none d-md-block 表示「手机上隐藏、md 以上显示」，配合 d-block d-md-none 可以为不同屏幕准备不同内容。这些工具类记熟后，大量简单样式需求完全不用写 CSS。

本节要点modal 用 data-bs-toggle/target/dismiss 纯属性驱动；间距类 {m|p}{方向}-{0~5}，方向 t/b/s/e/x/y；d-none d-md-block 控制按屏幕显隐。

代码

<!-- 模态框：纯 data 属性驱动，零 JS -->
<button class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#myModal">
  打开弹窗
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认操作</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">确定要删除这条记录吗？</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button class="btn btn-danger">确认删除</button>
      </div>
    </div>
  </div>
</div>

<!-- 常用工具类速查 -->
<div class="p-4 mt-3 mx-auto">      内边距4 外上边距3 水平居中 </div>
<div class="d-flex gap-2">          弹性布局 + 间隙 </div>
<div class="text-center fw-bold">   居中 + 加粗 </div>
<div class="d-none d-md-block">     手机隐藏、md 以上显示 </div>

🔗 相关词条Bootstrap flex CSS JS

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读