bootsrap Collapse用法

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>

效果：

初始状态

点按钮之后：