bootsrap Collapse用法

╰半夏微凉° 2023-06-02 07:41 31阅读 0赞

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” 表示初始状态为隐藏

  1. <div>
  2.     <button class="btn btn-primary" data-target="#demo" data-toggle="collapse">Toggle</button>
  3.     <div id="demo" class="collapse">
  4.         <h1>你个大头鬼呀！！</h1>
  5.     </div>
  6.  </div>

效果：

初始状态

1078922-20181214144945322-1196736050.png

点按钮之后：

1078922-20181214145012816-1295966567.png

转载于:https://www.cnblogs.com/dannyyao/p/10119417.html

发表评论

表情：
评论列表 （有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读