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>

效果:

初始状态

点按钮之后:

bootsrap Collapse用法的更多相关文章

  1. Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法

    iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...

  2. Pivot Table系列之展开/折叠用法 (Expand/Collapse)

    1.遇到的问题: PivotTable中本来已经展开的维度的Hierarchy(层次结构),在切换切片器的数据集时,层次结构就折叠在一起了:没有按照之前的方式展开显示. 2.在做成PivotTable ...

  3. Bootsrap基本应用

    Bootsrap 用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. C# Winform TreeView 的一些基本用法

    下面是treeview的用法TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows .Forms"中的"TreeView& ...

  5. Bootstrap 折叠(Collapse)插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...

  6. Extjs Window用法详解

    今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...

  7. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  8. CSS伪类对象before和after的用法

    一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅 ...

  9. Python中AND-OR的用法

    学习Python中的lambda函数的时候,才发现原来Python中的AND和OR还可以有一些别的用法.Python中的布尔逻辑计算的结果并非返回布尔值,而是返回它们相互之间的某一个.文章的部分例子来 ...

随机推荐

  1. 【mysql】mysql表分区、索引的性能测试

    概述 mysql分区表概述:google搜索一下: RANGE COLUMNS partitioning 主要测试mysql分区表的性能: load 500w 条记录:大约在10min左右: batc ...

  2. 客户端负载均衡Feign之一:申明式服务调用Feign入门示例

    Spring Cloud提供了Ribbon和Feign作为客户端的负载均衡. 前面使用了Ribbon做客户端负载均衡,使用Hystrix做容错保护,这两者被作为基础工具类框架被广泛地应用在各个微服务的 ...

  3. NIO框架之MINA源码解析(四):粘包与断包处理及编码与解码

    1.粘包与段包 粘包:指TCP协议中,发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾.造成的可能原因: 发送端需要等缓冲区满才发送出去,造成粘包 接收 ...

  4. bundle adjustment原理(1)

    那些光束平差的工具,比如SBA.SSBA之类的虽然好,然而例子和教程都不够多且不够详细,让初学者难以上手. 要传入的参数虽然有解释,然而却也不是十分清楚其含义,具体要怎么生成,生成为什么形式. 我在折 ...

  5. HDOJ 2003 求绝对值

    #include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...

  6. Kowala协议:一组分布式,自我调节,资产跟踪特性的加密货币(二)

    对于稳定币来言,设计过程中会遇到很多细节的问题,今天来讲述下有关通证设计过程中的一些问题. 1.计算手续费 计算费是交易费的一部分,转移给kUSD矿工,并由以下公式决定: 其gasUsed(t) 是用 ...

  7. [UE4]Set Skeletal Mesh,在蓝图中设置骨骼模型

  8. [UE4]AWP狙击枪开镜

    一.使用一张PNG图片,中间是透明的,其他部分是纯黑色.创建一个UserWidget.作为AWP的开镜后的准心.AWP默认状态下是没有准心的. 二.右键开镜.把第一步创建的UserWidget创建出来 ...

  9. Composer 安装时要求输入授权用户名密码

    composer require "overtrue/laravel-socialite:~2.0" Authentication required (packagist.phpc ...

  10. Service Worker初体验

    http://web.jobbole.com/84792/ http://imweb.io/topic/56592b8a823633e31839fc01