24. bootstrap组件#折叠菜单
原创
©著作权归作者所有:来自51CTO博客作者咸咸瑜瑜的原创作品,请联系作者获取转载授权,否则将追究法律责任
折叠菜单
首先要有按钮 按钮是 button 或 a标签都可以 主要加上 .btn 啊哈哈~
实例:
<!--下面是两个按钮 其中主要是 data-toggle 和 href
data-toggle 是bootstrap写好的一些底层交互 你自己加上对应的值即可
href 要对应id 即折叠交互的id(显示的内容) 并且 那里还要有.collapse
-->
<a href="#one" class="btn btn-success" data-toggle="collapse" >BUT 1</a>
<button href = "#one" class="btn btn-info" data-toggle="collapse" >BUT 2</button>
<!--
collapse: 折叠的意思 ,加上会隐藏
-->
<div class="collapse" id="one">
<div class="card card-body">
这是一个卡片 我是主体内容
</div>
</div>
其实这个在nav导航中微微说过 你自己知道 toggle 的使用 以及 href 对应id 即可了,很简单的.
我们还可以一个按钮控制两个: 【请看注释即可..】
<!--下面是两个按钮 其中主要是 data-toggle 和 href
data-toggle 是bootstrap写好的一些底层交互 你自己加上对应的值即可
href 要对应id 即折叠交互的id(显示的内容) 并且 那里还要有.collapse
-->
<a href="#t1" class="btn btn-success" data-toggle="collapse" >BUT 1</a>
<button href = "#t2" class="btn btn-info" data-toggle="collapse" >BUT 2</button>
<!--按钮3可以操作内容文本1 和内容文本2 相当于对他们切换(取反)那么就要:
按钮3 加上 data-target=".multi-collapse" 然后 被同时切换的主体加上 .multi-collapse
因为你看data-target的值 后面有个. 那就是Class 了 这都明明白白跟你说了...
-->
<button class="btn btn-danger" data-toggle="collapse" data-target=".multi-collapse" >BUT 3 </button>
<div class="row">
<!-- 如果想要按钮3能同时切换 内容文本1 和 内容文本2 的话 那么 都加上.multi-collapse -->
<div class="col bg-info multi-collapse collapse " id="t1" > 内容文本1 </div>
<div class="col bg-primary multi-collapse collapse " id="t2" > 内容文本2 </div>
</div>
最后 有一个手风琴的效果
手风琴的效果又分为 只显示一个【排斥】 可显示多个【不排除】 的样式:
看代码注释即可:
待续..
作者:咸瑜