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 折叠提供了两种方式来设置触发器:
- 使用
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>
- 直接在 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 页面。