标题:
Bootstrap 5 折叠
[打印本页]
作者:
vicky.yu
时间:
2022-6-13 09:19
标题:
Bootstrap 5 折叠
基础的折叠
当您想要隐藏和显示大量内容时,可折叠组件非常有用:
实例
<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse">
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
亲自试一试
例子解释
.collapse 类指示可折叠元素(在我们的例子中为 <div>);通过单击按钮,可显示或隐藏的内容。
如需控制(显示/隐藏)可折叠内容,请将 data-bs-toggle="collapse" 属性添加到 <a> 或 <button> 元素。然后添加 data-bs-target="#id" 属性来连接按钮和可折叠内容(<div id="demo">)。
注释:对于 <a> 元素,您可以使用 href 属性代替 data-bs-target 属性:
实例
<a href="#demo" data-bs-toggle="collapse">春日</a>
<div id="demo" class="collapse">
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
亲自试一试
默认情况下,可折叠内容是隐藏的。但是,您可以添加 .show 类来默认显示内容:
实例
<div id="demo" class="collapse show">
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
亲自试一试
Accordion(手风琴)
下例通过对 card 组件进行扩展,显示一个简单的手风琴。
注释:使用 data-bs-parent 属性确保当显示可折叠项目之一时,会关闭指定父项下的所有可折叠元素。
实例
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
可折叠组项目 #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
<h3>春日</h3>
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
可折叠组项目 #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<h3>初夏绝句</h3>
<p>纷纷红紫已成尘,布谷声中夏令新。</p>
<p>夹路桑麻行不尽,始知身是太平人。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
可折叠组项目 #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<h3>山行</h3>
<p>远上寒山石径斜,白云生处有人家。</p>
<p>停车坐爱枫林晚,霜叶红于二月花。</p>
</div>
</div>
</div>
</div>
亲自试一试
BS5 下拉菜单
BS5 导航
JavaScript 测验
W3School 简体中文版提供的内容仅用于培训和测试,不保证内
欢迎光临 赛捷软件论坛 (http://sagesoft.cn/bbs/)
Powered by Discuz! 7.2