collapse用处还是挺多的。

使用方法先看看bootstrap官方文档:https://v3.bootcss.com/javascript/#collapse

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

翻译过来就是:

可以使用带 href 熟悉的 a 链接;或者带data-target属性的button,作为toggle。但是,两者都需要带data-toggle="collapse"属性 (href 和 data-target指向内容的id)

 

Demo:class="collapse" 表示初始状态为隐藏

<div>
    <button class="btn btn-primary" data-target="#demo" data-toggle="collapse">Toggle</button>
    <div id="demo" class="collapse">
        <h1>你个大头鬼呀!!</h1>
    </div>
 </div>

效果:

初始状态

点按钮之后:

 

posted on 2018-12-14 14:50  蛋尼  阅读(250)  评论(0编辑  收藏  举报