Bootstrap5 折叠

Bootstrap5 折叠技术文档

概述

Bootstrap5 折叠（Collapse）组件是一种非常实用的可折叠（可展开/收起）面板，当用户点击一个按钮或链接时，将其它内容切换隐藏或显示。该组件的主要目的是在垂直空间有限的情况下，通过折叠来显示更多的内容，提供更好的用户体验。

基本用法

折叠组件由三个部分组成：触发器（Trigger）、目标对象（Target）和容器（Container）。其中触发器和目标对象是必须的，容器是可选的。下面是一个简单的折叠示例：

<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"。
  • 目标对象也使用了 collapse 类来表示它是一个可折叠的内容区域。
  • 容器中包含一个 card 类，用于创建更好看的内容模块。

触发器（Trigger）

触发器是用户与页面交互的元素，通常是一个按钮或链接。Bootstrap5 折叠提供了两种方式来设置触发器：

  1. 使用 data-bs-toggle="collapse" 在触发器元素中定义折叠行为。
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
  触发器按钮
</button>
  1. 直接在 JavaScript 代码中调用 collapse() 函数开启折叠效果。
var myCollapse = new bootstrap.Collapse(document.getElementById('myCollapseExample'), {
  toggle: false
});
myCollapse.hide(); // 合并
myCollapse.show(); // 展开

其中，toggle 选项用于指定初始化是否折叠，默认为 true。show() 和 hide() 方法用于手动展开和关闭折叠效果。

目标对象（Target）

目标对象是一个可折叠的元素，通常是一个面板、容器或列表。Bootstrap5 折叠需要在目标对象元素上设置 id 属性，如以下示例：

<div id="collapseExample2" class="collapse">
  <div class="card card-body">
    一些示例文本
  </div>
</div>

同时，也可以设置以下属性：

  • data-bs-parent：指定容器的选择器，允许一次性折叠多个目标对象。
  • aria-labelledby 和 aria-describedby：分别指定触发器的 id 和目标对象的 id，用于增强可访问性。

容器（Container）

容器是可选的，它是目标对象的父元素，用于重载或覆盖 Bootstrap5 的默认样式，以实现自定义的设计目的。在容器元素上添加 .collapse 类将标记它为折叠容器。

选项

Bootstrap5 折叠组件提供了以下选项：

选项名 类型 默认值 描述
toggle Boolean true 指定初始状态是否折叠
parent String|Element null 指定容器元素
target String|Element null 指定目标对象元素
autoClose Boolean true 表示给父容器设置监听，折叠所有同级元素时是否自动关闭

事件

Bootstrap5 折叠组件提供了以下事件：

事件名 描述
show.bs.collapse 在展开目标对象之前触发
shown.bs.collapse 在展开目标对象之后触发
hide.bs.collapse 在折叠目标对象之前触发
hidden.bs.collapse 在折叠目标对象之后触发

事件可以通过 JavaScript 代码监听，例如：

var myCollapse = new bootstrap.Collapse(document.getElementById('myCollapseExample'))

myCollapse.addEventListener('show.bs.collapse', function () {
  console.log('目标对象展开之前')
})
myCollapse.addEventListener('shown.bs.collapse', function () {
  console.log('目标对象展开之后')
})
myCollapse.addEventListener('hide.bs.collapse', function () {
  console.log('目标对象折叠之前')
})
myCollapse.addEventListener('hidden.bs.collapse', function () {
  console.log('目标对象折叠之后')
})

结语

Bootstrap5 折叠组件拥有广泛的应用场景，能够很好地优化 Web 页面的用户体验。只要您熟练使用 Bootstrap5 折叠，就能够创建出极具活力、美观大方的 Web 页面。

Bootstrap5 徽章（Badges） Bootstrap5 按钮