Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
Bootstrap 4 折叠组件
折叠组件可用于实现内容的显示和隐藏
基本的折叠
Bootstrap 提供了 和 .collapse 实现折叠效果
属性则将折叠标题和折叠内容联系起来
<button >="collapse" >="#demo">折叠的标题</button>
<div id="demo" class="collapse">
要折叠的内容
</div>
可以使用 <a> 标签代替 <button>
<a href="#demo" >="collapse">折叠的标题</a>
<div id="demo" class="collapse">
折叠的内容
</div>
默认显示折叠内容
默认情况下折叠的内容是隐藏的，添加 .show 可以让内容默认显示
<a href="#demo" >="collapse">折叠的标题</a>
<div id="demo" class="collapse show">折叠的内容</div>