AI 助理
备案控制台
开发者社区 云计算 文章 正文

Bootstrap5 折叠2

2024-11-17 7
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 默认情况下，折叠内容是隐藏的，可通过添加 `.show` 类使其默认显示。以下示例展示了如何使用卡片组件实现简单的手风琴效果。通过设置 `data-bs-parent` 属性，确保在一个折叠选项显示时，其他选项自动隐藏。

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

实例


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

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

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

实例





选项一



#1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！









#2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！









#3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！



关键词：
Bootstrap折叠
游客ogeeqvh5vfa5q
目录
相关文章
游客ogeeqvh5vfa5q
|
5天前
|
前端开发
Bootstrap5 折叠1
Bootstrap5 折叠功能通过 `data-bs-toggle` 和 `data-bs-target` 属性轻松实现内容的显示与隐藏。
游客ogeeqvh5vfa5q
17 2
香甜可口草莓蛋糕
|
6月前
|
前端开发
Bootstrap 5 保姆级教程（九）：折叠 & 导航
Bootstrap 5 保姆级教程（九）：折叠 & 导航
香甜可口草莓蛋糕
65 0
汪末末
|
前端开发 JavaScript
Bootstrap JavaScript插件：折叠内容插件 (collapse.js)
Bootstrap 框架
汪末末
174 0
Bootstrap JavaScript插件：折叠内容插件 (collapse.js)
游客r6jquospshcmq
|
前端开发
开心档之 bootstrap 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
游客r6jquospshcmq
78 0
开心档之 bootstrap 折叠
游客ruqdfvh2iuyqc
|
前端开发
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
游客ruqdfvh2iuyqc
136 0
普门教育
|
前端开发
通过Bootstrap实现可折叠侧边导航菜单小Demo
可折叠分组侧边导航菜单
普门教育
388 0
通过Bootstrap实现可折叠侧边导航菜单小Demo
程序员大阳
|
前端开发
Bootstrap教程(25)--折叠面板、折叠面板导航
本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结
程序员大阳
526 0
Bootstrap教程(25)--折叠面板、折叠面板导航
程序员大阳
|
JavaScript 前端开发
Bootstrap教程(24)--折叠插件
本文目录 1. 概述 2. 通过a元素控制折叠 3. 通过JS控制折叠 4. 小结
程序员大阳
245 0
Bootstrap教程(24)--折叠插件
codingcoge
|
Web App开发
Bootstrap学习笔记--下拉菜单，折叠，菜单，标签，Pills
下拉菜单： 下拉菜单是比较常见的 直接看源码： .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单，请使用按钮或具有属性的类.
codingcoge
3240 0
aehyok
|
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。
aehyok
723 0