【前端】Bootstrap：JavaScript 组件与插件

Bootstrap 不仅提供了强大的 CSS 工具和组件，还内置了丰富的 JavaScript 组件和插件。这些 JavaScript 组件能够增强网页的交互性，让开发者在不编写大量 JavaScript 代码的情况下快速实现各种动态效果。Bootstrap 的 JavaScript 组件基于 jQuery（Bootstrap 5 版本中已经移除了对 jQuery 的依赖），通过数据属性或 JavaScript API 调用来初始化和控制组件。

本文将详细介绍 Bootstrap 的常用 JavaScript 组件与插件，包括：模态框（Modal）、工具提示（Tooltip）、弹出框（Popover）、滚动监听（Scrollspy）、折叠（Collapse）、轮播（Carousel）等。

模态框组件（Modal）

**模态框（Modal）**是一个经典的用户界面元素，常用于显示重要信息、确认操作或收集用户输入。Bootstrap 提供了强大且易用的模态框组件，允许开发者创建一个可弹出的对话框，覆盖页面的其余部分并获得用户的注意。

模态框可以通过触发器（如按钮）打开，并且可以通过 JavaScript API 手动触发。

基本结构

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        这是模态框的内容。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

• data-bs-toggle="modal"：标记触发模态框的元素。
• data-bs-target="#exampleModal"：指定要触发的模态框的 ID。
• aria-hidden="true"：确保屏幕阅读器不读取隐藏的模态框。

通过 JavaScript API 打开和关闭模态框

可以使用 JavaScript API 手动控制模态框的打开和关闭：

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show();  // 打开模态框
myModal.hide();  // 关闭模态框

进阶功能

• 动画效果：默认情况下，模态框带有淡入淡出的动画效果，你可以通过移除 .fade 类取消动画效果。
• 模态框大小：通过添加 .modal-lg 或 .modal-sm 类来控制模态框的大小。
• 垂直居中：通过 .modal-dialog-centered 类使模态框垂直居中显示。

工具提示组件（Tooltip）

**工具提示（Tooltip）**是当用户将鼠标悬停在元素上时，显示的一个小提示信息。Bootstrap 的工具提示组件可以通过 JavaScript 或数据属性初始化，并且支持不同方向的提示弹出位置。

工具提示可以通过 data-bs-toggle="tooltip" 属性来自动初始化。

基本结构

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="这是一个工具提示">
  悬停显示工具提示
</button>

• data-bs-toggle="tooltip"：启用工具提示功能。
• data-bs-placement="top"：控制工具提示显示的位置（如：top、bottom、left、right）。

通过 JavaScript API 初始化工具提示

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

进阶功能

• 延时显示：可以为工具提示设置显示和隐藏的延迟时间。
• 触发方式：可以指定工具提示通过悬停、点击或焦点等方式触发。
• 自定义内容：工具提示的内容可以通过 title 属性动态修改，也可以在 JavaScript 中设置。

弹出框组件（Popover）

**弹出框（Popover）**与工具提示类似，但功能更加丰富。除了提示文字外，弹出框可以包含标题和更多内容，用于提示更详细的信息。

和工具提示一样，弹出框也可以通过 data-bs-toggle="popover" 属性自动初始化。

基本结构

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="这是弹出框内容">
  点击显示弹出框
</button>

• data-bs-toggle="popover"：启用弹出框功能。
• data-bs-content="..."：设置弹出框的内容。

通过 JavaScript API 初始化弹出框

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

进阶功能

• 标题：可以通过 title 属性或 data-bs-title 设置弹出框的标题。
• 自定义模板：可以自定义弹出框的 HTML 结构和样式。
• 触发方式：同样支持悬停、点击或焦点等方式触发。

滚动监听组件（Scrollspy）

**滚动监听（Scrollspy）**用于监视页面的滚动位置，并自动更新导航栏中的激活状态。这在单页面应用或长网页中尤为实用，可以帮助用户知道当前所在的位置。

首先，需要有一个固定的导航栏，滚动监听的目标是一个滚动区域（如 body 或 div）。

基本结构

<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">滚动监听</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#section1">部分 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">部分 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">部分 3</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" class="scrollspy-example">
  <h4 id="section1">部分 1</h4>
  <p>部分 1 的内容...</p>
  <h4 id="section2">部分 2</h4>
  <p>部分 2 的内容...</p>
  <h4 id="section3">部分 3</h4>
  <p>部分 3 的内容...</p>
</div>

• data-bs-spy="scroll"：启用滚动监听功能。
• data-bs-target="#navbar-example"：指定监听的导航目标。

通过 JavaScript API 初始化

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

进阶功能

• 偏移量：可以通过 data-bs-offset 属性设置偏移量，使得导航项提前或延后激活。
• 手动更新：当 DOM 结构发生变化时，可以使用 scrollSpy.refresh() 来手动更新。

折叠组件（Collapse）

**折叠（Collapse）**组件用于创建可以展开和收起的内容块，常用于隐藏一些初始状态下不必要显示的内容，提升页面的整洁性和用户体验。

折叠组件通常与按钮一起使用，点击按钮后，指定的内容区域会展开或折叠。

基本结构

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  点击展开/收起内容
</button>

<div class="collapse" id="collapseExample">
  <div class="

card card-body">
    这是折叠组件的内容。
  </div>
</div>

• data-bs-toggle="collapse"：启用折叠功能。
• data-bs-target="#collapseExample"：指定要折叠的目标内容区域。

通过 JavaScript API 控制

var collapseElement = document.getElementById('collapseExample')
var collapse = new bootstrap.Collapse(collapseElement)
collapse.show();  // 展开内容
collapse.hide();  // 收起内容

进阶功能

• 折叠多块内容：可以使用 accordion 结构折叠多个内容块，保证同一时间只有一个块是展开的。
• 动画效果：折叠组件带有默认的动画效果。

轮播组件（Carousel）

**轮播（Carousel）**组件用于在一个区域内循环显示一组图片或内容，通常带有自动播放、左右滑动的功能，是展示多个内容或图像的最佳选择之一。

轮播组件通常包含一个轮播区域，内部包含多个幻灯片（slides）和左右导航箭头。

基本结构

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
</div>

• data-bs-ride="carousel"：启用自动播放轮播功能。
• data-bs-slide="prev" / data-bs-slide="next"：控制前一张或下一张幻灯片。

通过 JavaScript API 控制

var myCarousel = document.getElementById('carouselExample')
var carousel = new bootstrap.Carousel(myCarousel)
carousel.next();  // 显示下一张幻灯片
carousel.prev();  // 显示上一张幻灯片
carousel.pause(); // 暂停自动播放
carousel.cycle(); // 开始自动播放

进阶功能

• 指示器（Indicators）：可以在轮播下方添加指示器来展示当前显示的幻灯片。
• 自动播放设置：通过 interval 属性或选项设置自动播放间隔时间。

总结

Bootstrap 的 JavaScript 组件为网页开发提供了强大的交互功能，从模态框、工具提示、弹出框到折叠、滚动监听、轮播，所有这些组件都可以通过简单的 HTML 结构和数据属性实现，并且可以通过 JavaScript API 进行更细粒度的控制。熟练掌握这些组件，能够帮助开发者创建功能强大且用户体验良好的网页。