bootsrap Collapse用法

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

collapse用处还是挺多的。

使用方法先看看bootstrap官方文档：[https://v3.bootcss.com/javascript/\#collapse][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>

效果：

初始状态

![1078922-20181214144945322-1196736050.png][]

点按钮之后：

![1078922-20181214145012816-1295966567.png][]

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

[https_v3.bootcss.com_javascript_collapse]: https://v3.bootcss.com/javascript/#collapse
[1078922-20181214144945322-1196736050.png]: /images/20230601/08e90ceb730d405981df2739df09a31c.png
[1078922-20181214145012816-1295966567.png]: /images/20230601/3393576284ad42f4826ca5e83a87c6fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

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

相关阅读

相关 bootsrap表单构造器【代码】

果用户要搞一份表单然而用户不会手写代码，那这个拖拉生成代码不错 index页面 <!DOCTYPE html> <html> <head>...

比眉伴天荒/ 2024年04月17日 18:49/ 0 赞/ 40 阅读

相关 bootsrap Collapse用法

collapse用处还是挺多的。使用方法先看看bootstrap官方文档：[https://v3.bootcss.com/javascript/\collapse][htt

╰半夏微凉°/ 2023年06月02日 07:41/ 0 赞/ 6 阅读

相关 CSS-列表样式属性的用法，表格样式属性border-collapse的使用

CSS列表属性 list-style-type `list-style-type: disc;` 用于设置列表项的标记 <table> <thead>

傷城~/ 2023年06月01日 05:53/ 0 赞/ 14 阅读

相关 ElasticSearch：Collapse折叠搜索结果

Collapse简述使用collapse参数可以基于字段值去折叠搜索结果。对于某个字段值相同的文档，排序后将保留排在前面的文档，后面的相同字段值的文档将被折叠。

ゝ一纸荒年。/ 2022年10月15日 09:59/ 0 赞/ 242 阅读

相关 CSS的margin塌陷（collapse）

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html>

素颜马尾好姑娘i/ 2022年06月15日 22:49/ 0 赞/ 256 阅读

相关 Bootstrap 折叠（Collapse）插件

Bootstrap 折叠（Collapse）插件折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内

女爷i/ 2022年03月21日 13:55/ 0 赞/ 485 阅读

相关 validate&bootsrap回顾

bootstrap: css框架,html/css/js集于一身.ie 6/7/8兼容性有问题开发响应式页面,使用于不同的上网设备使用步骤: 1.导入boo

冷不防/ 2022年03月12日 06:28/ 0 赞/ 91 阅读

相关 bootsrap栅格布局和图标引入

> 栅格布局是什么？自带响应式？字体图标如何引入？统统在此告诉你！栅格布局（响应式）按行布局，每行最多12分配空间 ![20190310112708359.pn

朱雀/ 2022年03月10日 07:57/ 0 赞/ 203 阅读

相关 bootsrap类的操作

> bootsrap中，利用分装好的类名称可以快速的设置一些样式和属性，大大提升的效率，先了解一下如何实现基本的操作吧首先，引入bootstrap文件（在使用boot

淩亂°似流年/ 2022年03月10日 04:46/ 0 赞/ 54 阅读

相关 Hystrix Request Collapser实战

一代码位置 [https://github.com/cakin24/spring-cloud-code/tree/master/ch6-][https_github.com

野性酷女/ 2021年07月24日 18:44/ 0 赞/ 346 阅读