6.1 JavaScript 组件与交互

## 6.1 JavaScript 组件与交互 --- ## 6. Bootstrap 高级主题 (Advanced Topics) - 6.1 JavaScript 组件与交互 ### 为什么选择 Bootstrap JavaScript 组件？ 在前端开发中，JavaScript 交互是提升用户体验的关键。Bootstrap 提供的 JavaScript 组件具有以下优势： * **易用性:** Bootstrap 组件的设计理念是简洁易用，通过简单的 HTML 结构和少量的数据属性，即可快速启用复杂的交互功能。 * **一致性:** Bootstrap 组件的样式和行为与整个框架保持一致，确保了网页整体风格的统一性。 * **响应式:** Bootstrap 组件在设计时考虑了响应式布局，能够在不同设备和屏幕尺寸下良好运行。 * **可定制性:** 虽然 Bootstrap 提供了默认样式，但同时也允许开发者通过 CSS 和 JavaScript 对组件进行高度定制，满足不同的设计需求。 * **社区支持:** Bootstrap 拥有庞大的开发者社区，遇到问题时可以快速找到解决方案和支持。 ### Bootstrap JavaScript 组件概览 Bootstrap 6 提供了丰富的 JavaScript 组件，主要可以分为以下几类： * **模态框 (Modals):** 用于显示弹出对话框，常用于提示信息、表单提交、警告等场景。 * **下拉菜单 (Dropdowns):** 用于创建可折叠的菜单列表，常见于导航栏、按钮组等。 * **折叠 (Collapse):** 用于显示和隐藏内容区域，例如手风琴效果、导航菜单的展开与收起。 * **轮播图 (Carousel):** 用于展示图片或内容轮播，常用于首页 Banner、产品展示等。 * **标签页 (Tabs) & 导航栏 (Navs):** 用于组织和切换内容区域，提供清晰的内容结构。 * **提示工具 (Tooltips) & 弹出框 (Popovers):** 用于在用户交互时显示提示信息或详细内容。 * **滚动监听 (Scrollspy):** 自动更新导航栏，根据用户滚动的位置高亮显示当前导航项。 * **Toast 消息 (Toasts):** 用于显示短暂的、非模态的通知消息。 * **Offcanvas 侧边栏:** 用于创建可滑出的侧边栏，常用于移动端导航或附加内容展示。 接下来，我们将逐一深入探讨这些组件，并通过代码示例和详细解释，帮助您理解和应用它们。 ### 1. 模态框 (Modals) 模态框组件用于创建弹出对话框，阻止用户与页面其他部分交互，直到模态框关闭。 **代码实践:** ```html Bootstrap 模态框示例 ``` **内容详解:** * **触发器按钮:** `data-bs-toggle="modal"` 和 `data-bs-target="#exampleModal"` 属性将按钮与模态框关联起来。点击按钮会触发模态框的显示。 * **模态框容器:** `.modal` 类是模态框的基础容器。 * `.fade` 类添加淡入淡出动画效果。 * `id="exampleModal"` 是模态框的唯一标识符，与触发器按钮的 `data-bs-target` 属性对应。 * `tabindex="-1"` 防止模态框在页面加载时获得焦点。 * `aria-labelledby="exampleModalLabel"` 和 `aria-hidden="true"` 是为提升可访问性而添加的 ARIA 属性。 * **模态框对话框:** `.modal-dialog` 类用于设置模态框的对话框样式，例如居中显示。 * `.modal-dialog-centered` 类可以使模态框在垂直方向居中显示。 * `.modal-dialog-scrollable` 类可以使模态框内容超出时可以滚动。 * **模态框内容:** `.modal-content` 类包含模态框的头部、主体和底部。 * `.modal-header` 包含模态框标题和关闭按钮。 * `.modal-title` 定义模态框标题。 * `.btn-close` 是关闭按钮，`data-bs-dismiss="modal"` 属性用于关闭模态框。 * `.modal-body` 是模态框的主体内容区域。 * `.modal-footer` 是模态框底部区域，通常放置操作按钮。 **Mermaid 图示:** ```mermaid graph TD A[触发按钮 (data-bs-toggle="modal")] --> B(模态框容器 (.modal)); B --> C(模态框对话框 (.modal-dialog)); C --> D(模态框内容 (.modal-content)); D --> E(模态框头部 (.modal-header)); D --> F(模态框主体 (.modal-body)); D --> G(模态框底部 (.modal-footer)); E --> H[模态框标题 (.modal-title)]; E --> I[关闭按钮 (.btn-close)]; I --> B(关闭模态框); G --> J[关闭按钮 (data-bs-dismiss="modal")]; J --> B(关闭模态框); ``` **JavaScript API:** 您也可以使用 JavaScript 代码来控制模态框的显示和隐藏，以及监听模态框的事件。 ```javascript var myModal = new bootstrap.Modal(document.getElementById('exampleModal')); // 显示模态框 myModal.show(); // 隐藏模态框 myModal.hide(); // 监听模态框显示事件 $('#exampleModal').on('show.bs.modal', function (event) { // ... 执行模态框显示前的操作 }); // 监听模态框隐藏事件 $('#exampleModal').on('hidden.bs.modal', function (event) { // ... 执行模态框隐藏后的操作 }); ``` ### 2. 下拉菜单 (Dropdowns) 下拉菜单组件用于创建可折叠的菜单列表，常用于导航栏、按钮组等。 **代码实践:** ```html Bootstrap 下拉菜单示例 ``` **内容详解:** * **下拉菜单容器:** `.dropdown` 类是下拉菜单的容器。 * **触发按钮:** `.dropdown-toggle` 类应用于触发下拉菜单显示的按钮。 * `data-bs-toggle="dropdown"` 属性指示这是一个下拉菜单触发器。 * `aria-expanded="false"` 和 `aria-labelledby="dropdownMenuButton1"` 是为提升可访问性而添加的 ARIA 属性。 * **下拉菜单列表:** `.dropdown-menu` 类是下拉菜单的列表容器。 * `aria-labelledby="dropdownMenuButton1"` 与触发按钮的 `id` 关联，提升可访问性。 * **菜单项:** `.dropdown-item` 类应用于下拉菜单的每个菜单项。 * **分隔线:** `.dropdown-divider` 类用于在菜单项之间添加分隔线。 **Mermaid 图示:** ```mermaid graph TD A[下拉菜单容器 (.dropdown)] --> B{触发按钮 (.dropdown-toggle)}; B -- 点击 --> C[下拉菜单列表 (.dropdown-menu)]; C --> D[菜单项 (.dropdown-item) 1]; C --> E[菜单项 (.dropdown-item) 2]; C --> F[菜单项 (.dropdown-item) 3]; C --> G[分隔线 (.dropdown-divider)]; C --> H[菜单项 (.dropdown-item) 4]; C -- 再次点击/点击外部 --> B; B -- 再次点击/点击外部 --> A; ``` **JavaScript API:** 与模态框类似，您也可以使用 JavaScript 代码控制下拉菜单的行为和监听事件。 ```javascript var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new bootstrap.Dropdown(dropdownToggleEl) }) // 监听下拉菜单显示事件 $('.dropdown').on('show.bs.dropdown', function () { // ... 执行下拉菜单显示前的操作 }); // 监听下拉菜单隐藏事件 $('.dropdown').on('hidden.bs.dropdown', function () { // ... 执行下拉菜单隐藏后的操作 }); ``` ### 3. 折叠 (Collapse) 折叠组件用于显示和隐藏内容区域，常用于手风琴效果、导航菜单的展开与收起等。 **代码实践:** ```html Bootstrap 折叠示例 ``` **内容详解:** * **触发按钮:** `data-bs-toggle="collapse"` 和 `data-bs-target="#collapseExample"` 属性将按钮与可折叠区域关联。 * `aria-expanded="false"` 指示初始状态是折叠的。 * `aria-controls="collapseExample"` 关联触发器与可折叠区域，提升可访问性。 * **可折叠区域:** `.collapse` 类是可折叠内容的基础容器。 * `id="collapseExample"` 是可折叠区域的唯一标识符，与触发按钮的 `data-bs-target` 属性对应。 * `.show` 类可以使内容默认显示。 * **内容容器:** 通常在 `.collapse` 内部使用 `.card` 或其他容器来包裹实际内容，以便添加样式。 **Mermaid 图示:** ```mermaid graph TD A[触发按钮 (data-bs-toggle="collapse")] --> B(可折叠区域 (.collapse)); B --> C(内容容器 (.card/.card-body)); A -- 点击 --> B; B -- 再次点击 --> A; ``` **手风琴效果:** Bootstrap 折叠组件可以轻松实现手风琴效果，只需要将多个折叠组件放在同一个父容器中，并使用相同 `data-bs-parent` 属性关联触发器和可折叠区域。 ```html ``` **JavaScript API:** ```javascript var collapseElementList = [].slice.call(document.querySelectorAll('.collapse')) var collapseList = collapseElementList.map(function (collapseEl) { return new bootstrap.Collapse(collapseEl) }) // 监听折叠显示事件 $('#collapseExample').on('show.bs.collapse', function () { // ... 执行折叠显示前的操作 }); // 监听折叠隐藏事件 $('#collapseExample').on('hidden.bs.collapse', function () { // ... 执行折叠隐藏后的操作 }); ``` ### 4. 轮播图 (Carousel) 轮播图组件用于展示图片或内容轮播，常用于首页 Banner、产品展示等。 **代码实践:** ```html Bootstrap 轮播图示例 ``` **内容详解:** * **轮播图容器:** `.carousel` 类是轮播图的基础容器。 * `id="carouselExampleIndicators"` 是轮播图的唯一标识符。 * `.slide` 类添加滑动动画效果。 * `data-bs-ride="carousel"` 属性使轮播图在页面加载时自动开始播放。 * **轮播指示器:** `.carousel-indicators` 容器用于显示轮播图的指示器。 * `` 元素作为指示器，`data-bs-target` 和 `data-bs-slide-to` 属性用于控制切换到指定幻灯片。 * `.active` 类指示当前激活的幻灯片。 * **轮播内容:** `.carousel-inner` 容器包含轮播的幻灯片。 * `.carousel-item` 类是每个幻灯片的容器。 * `.active` 类指示当前显示的幻灯片。 * `` 元素或其他 HTML 内容作为幻灯片内容，`.d-block w-100` 类确保图片宽度占满容器。 * **轮播控制按钮:** `.carousel-control-prev` 和 `.carousel-control-next` 类分别用于创建上一个和下一个按钮。 * `data-bs-target` 和 `data-bs-slide` 属性控制幻灯片切换方向。 * `.carousel-control-prev-icon` 和 `.carousel-control-next-icon` 是控制按钮的图标。 * `.visually-hidden` 类为控制按钮添加屏幕阅读器文本，提升可访问性。 **Mermaid 图示:** ```mermaid graph TD A[轮播图容器 (.carousel)] --> B(轮播指示器 (.carousel-indicators)); A --> C(轮播内容 (.carousel-inner)); A --> D[上一页按钮 (.carousel-control-prev)]; A --> E[下一页按钮 (.carousel-control-next)]; C --> F[幻灯片 1 (.carousel-item active)]; C --> G[幻灯片 2 (.carousel-item)]; C --> H[幻灯片 3 (.carousel-item)]; B --> I[指示器按钮 1]; B --> J[指示器按钮 2]; B --> K[指示器按钮 3]; D -- 点击 --> C(切换到上一张幻灯片); E -- 点击 --> C(切换到下一张幻灯片); I -- 点击 --> C(切换到幻灯片 1); J -- 点击 --> C(切换到幻灯片 2); K -- 点击 --> C(切换到幻灯片 3); ``` **JavaScript API:** ```javascript var carouselElement = document.querySelector('#carouselExampleIndicators') var carousel = new bootstrap.Carousel(carouselElement, { interval: 2000, // 轮播间隔时间 (毫秒) wrap: true, // 是否循环播放 pause: 'hover' // 鼠标悬停时暂停轮播 }) // 手动控制轮播图 carousel.next(); // 下一张 carousel.prev(); // 上一张 carousel.to(2); // 切换到指定索引的幻灯片 (从 0 开始) carousel.pause(); // 暂停轮播 carousel.cycle(); // 恢复轮播 // 监听轮播图事件 $('#carouselExampleIndicators').on('slide.bs.carousel', function (event) { // ... 幻灯片切换前的操作 }); $('#carouselExampleIndicators').on('slid.bs.carousel', function (event) { // ... 幻灯片切换后的操作 }); ``` ### 5. 标签页 (Tabs) & 导航栏 (Navs) 标签页和导航栏组件用于组织和切换内容区域，提供清晰的内容结构。它们基于相同的底层组件构建，可以通过不同的类名和属性进行配置。 **代码实践 - 标签页:** ```html Bootstrap 标签页示例 首页

个人资料

联系方式

``` **内容详解:** * **导航栏容器:** `.nav` 类是导航栏的基础容器。 * `.nav-tabs` 类指定使用标签页样式。 * `id="myTab"` 是导航栏的唯一标识符。 * `role="tablist"` 指示这是一个标签页列表，提升可访问性。 * **导航项:** `.nav-item` 类是导航项容器。 * `role="presentation"` 指示导航项仅用于展示，提升可访问性。 * **导航链接/按钮:** `.nav-link` 类应用于导航链接或按钮。 * `.active` 类指示当前激活的标签页。 * `id="home-tab"` 是导航链接的唯一标识符。 * `data-bs-toggle="tab"` 属性指示这是一个标签页触发器。 * `data-bs-target="#home"` 属性关联导航链接与内容区域。 * `type="button"` 确保按钮行为。 * `role="tab"` 指示这是一个标签页，提升可访问性。 * `aria-controls="home"` 和 `aria-selected="true"` 是为提升可访问性而添加的 ARIA 属性。 * **标签页内容容器:** `.tab-content` 类是标签页内容区域的容器。 * `id="myTabContent"` 与导航栏容器的 `id` 关联。 * **标签页内容:** `.tab-pane` 类是每个标签页内容的容器。 * `.fade` 类添加淡入淡出动画效果. * `.show` 和 `.active` 类使初始标签页内容显示。 * `id="home"` 是标签页内容的唯一标识符，与导航链接的 `data-bs-target` 属性对应。 * `role="tabpanel"` 指示这是一个标签页内容面板，提升可访问性。 * `aria-labelledby="home-tab"` 与导航链接的 `id` 关联，提升可访问性。 **Mermaid 图示:** ```mermaid graph TD A[导航栏容器 (.nav .nav-tabs)] --> B[导航项 (.nav-item) - 首页]; A --> C[导航项 (.nav-item) - 个人资料]; A --> D[导航项 (.nav-item) - 联系方式]; E[标签页内容容器 (.tab-content)] --> F[标签页内容 (.tab-pane) - 首页]; E --> G[标签页内容 (.tab-pane) - 个人资料]; E --> H[标签页内容 (.tab-pane) - 联系方式]; B --> F(关联标签页内容); C --> G(关联标签页内容); D --> H(关联标签页内容); B -- 点击 --> F(显示首页内容); C -- 点击 --> G(显示个人资料内容); D -- 点击 --> H(显示联系方式内容); ``` **JavaScript API:** ```javascript var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button')) triggerTabList.forEach(function (triggerEl) { var tabTrigger = new bootstrap.Tab(triggerEl) triggerEl.addEventListener('show.bs.tab', function (event) { // ... 标签页显示前的操作 }) triggerEl.addEventListener('shown.bs.tab', function (event) { // ... 标签页显示后的操作 }) }) ``` ### 6. 提示工具 (Tooltips) & 弹出框 (Popovers) 提示工具和弹出框组件用于在用户交互时显示提示信息或详细内容。提示工具通常显示简单的文本提示，而弹出框可以显示更丰富的内容，例如 HTML 结构。