7. JS 组件：弹窗与轮播

这是什么：JS 组件 = Bootstrap 自带的交互件——点一下弹层、自动播图、点开菜单。v5 全部用原生 JavaScript 重写，不再需要 jQuery。

为什么用：弹窗要遮罩、要锁滚动、要点外面关闭、要无障碍焦点管理——自己写几十行还容易漏。Bootstrap 把行为封成插件，声明式的 data-bs-* 属性就能触发，入门阶段可以一行 JS 都不写。

如何用：本章前提是你的页面引入了 bootstrap.bundle.min.js（第 2 章那行）。以下每个示例都是「完整可运行页面」，贴进在线运行场即可。

7.1 Modal 弹窗：触发器 + 弹层两段式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modal 示例</title>
  <link href="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <!-- ① 触发器：只要 data-bs-toggle + data-bs-target 指向弹层 id -->
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tipModal">
      打开提示
    </button>
  </div>

  <!-- ② 弹层：固定骨架 modal > dialog > content -->
  <div class="modal fade" id="tipModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">学习提醒</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
        </div>
        <div class="modal-body">
          <p>今天也要写 10 行代码哦。</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">知道了</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

记忆三句话：触发器挂 data-bs-toggle="modal" + data-bs-target="#id"；弹层骨架 modal > modal-dialog > modal-content；关闭按钮只需要 data-bs-dismiss="modal"。modal-lg / modal-xl 调宽度，modal-dialog-centered 垂直居中。

7.2 Carousel 轮播：三张图自动播

<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="https://picsum.photos/id/1015/900/340" class="d-block w-100" alt="山"></div>
    <div class="carousel-item"><img src="https://picsum.photos/id/1016/900/340" class="d-block w-100" alt="水"></div>
    <div class="carousel-item"><img src="https://picsum.photos/id/1018/900/340" class="d-block w-100" alt="林"></div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

骨架：carousel 壳（要 id）→ carousel-inner 里放 carousel-item（第一张要 active）→ 指示器和左右箭头都用 data-bs-target 指回壳的 id。data-bs-ride="carousel" 开自动播，carousel-fade 换淡入淡出。图片来自占位图服务 picsum.photos，换你自己的图就是换 src。

7.3 Dropdown 下拉菜单

<div class="dropdown m-4">
  <button class="btn btn-outline-primary" data-bs-toggle="dropdown">选择教程</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/frontend/html/index.html">HTML</a></li>
    <li><a class="dropdown-item" href="/frontend/css/index.html">CSS</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item disabled">Bootstrap（本教程）</a></li>
  </ul>
</div>

还是那对组合：开关按钮 data-bs-toggle="dropdown"，菜单是 dropdown-menu，外层 dropdown 定位。dropup / dropend 改弹出方向。

7.4 Collapse 折叠面板（含导航栏汉堡）

<div class="m-4">
  <button class="btn btn-link p-0" data-bs-toggle="collapse" data-bs-target="#sec1">
    ▸ 本章小结（点展开）
  </button>
  <div class="collapse" id="sec1">
    <div class="p-3 mt-2 border rounded bg-light">
      Bootstrap 4 的导航栏汉堡菜单就靠这套 collapse 机制——第 4 章的骨架里，
      toggler 按钮和菜单容器已经是同样的 data 属性组合了。
    </div>
  </div>
</div>

第 4 章导航栏的收起展开、这里的小结折叠，是同一个 Collapse 插件。认一个机制，两处都会改。

7.5 进阶一行：用 JS 编程控制

data 属性是「静态接线」，动态场景（比如 AJAX 拿到数据后再弹窗）可以直接调 API：

const tip = new bootstrap.Modal(document.getElementById('tipModal'));
tip.show();   // hide() 关闭；toggle() 切换

引入 bundle 后全局多一个 bootstrap 对象，每个组件都是它的构造器。另外所有组件都会在对应元素上派发事件（shown.bs.modal、slide.bs.carousel……），addEventListener 即可挂钩子。

和 jQuery 版对照：当年 Bootstrap 4 要 $('#tipModal').modal('show')，靠 jQuery 的选择器和插件挂载；v5 原生写法 new bootstrap.Modal(el).show()，少一个库、心智反而更直白。

7.6 小结

四大交互全靠 data-bs-toggle + data-bs-target 接线，零 JS 起步
Modal 三段骨架、Carousel 的 active、Dropdown 的外壳、Collapse 通吃导航栏
动态控制：new bootstrap.Modal(el).show()；事件钩子 .on 换 addEventListener
前提只有一个：引入 bootstrap.bundle.min.js

组件、栅格、工具类、交互全部就位。最后一章综合实战：把 CSS 教程里手写的个人主页，用 Bootstrap 重做一遍。