Bootstrap5 折叠2

简介: 默认情况下,折叠内容是隐藏的,可通过添加 `.show` 类使其默认显示。以下示例展示了如何使用卡片组件实现简单的手风琴效果。通过设置 `data-bs-parent` 属性,确保在一个折叠选项显示时,其他选项自动隐藏。

默认情况下折叠的内容是隐藏的,你可以添加 .show 类让内容默认显示:

实例


这里是一些测试的内容。。。

尝试一下 »
以下实例通过扩展卡片组件来显示简单的手风琴。

注意: 使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。

实例






#1 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!







#2 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!







#3 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!



相关文章
|
1月前
|
前端开发
Bootstrap5 折叠1
Bootstrap5 折叠功能通过 `data-bs-toggle` 和 `data-bs-target` 属性轻松实现内容的显示与隐藏。
|
7月前
|
前端开发
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap 5 保姆级教程(九):折叠 & 导航
|
前端开发
开心档之 bootstrap 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
开心档之 bootstrap 折叠
|
前端开发
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
|
前端开发
|
前端开发
Bootstrap教程(25)--折叠面板、折叠面板导航
本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结
539 0
Bootstrap教程(25)--折叠面板、折叠面板导航
|
JavaScript 前端开发
Bootstrap教程(24)--折叠插件
本文目录 1. 概述 2. 通过a元素控制折叠 3. 通过JS控制折叠 4. 小结
272 0
Bootstrap教程(24)--折叠插件
|
Web App开发
Bootstrap学习笔记--下拉菜单,折叠,菜单,标签,Pills
下拉菜单: 下拉菜单是比较常见的 直接看源码: .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单,请使用按钮或具有属性的类.
3251 0
|
JavaScript 前端开发
Bootstrap3.0学习第二十五轮(JavaScript插件——折叠)
详情请查看http://aehyok.com/Blog/Detail/31.html   个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
729 0