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>
效果:
初始状态

点按钮之后:

bootsrap Collapse用法的更多相关文章
- Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法
iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...
- Pivot Table系列之展开/折叠用法 (Expand/Collapse)
1.遇到的问题: PivotTable中本来已经展开的维度的Hierarchy(层次结构),在切换切片器的数据集时,层次结构就折叠在一起了:没有按照之前的方式展开显示. 2.在做成PivotTable ...
- Bootsrap基本应用
Bootsrap 用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- C# Winform TreeView 的一些基本用法
下面是treeview的用法TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows .Forms"中的"TreeView& ...
- Bootstrap 折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...
- Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- CSS伪类对象before和after的用法
一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅 ...
- Python中AND-OR的用法
学习Python中的lambda函数的时候,才发现原来Python中的AND和OR还可以有一些别的用法.Python中的布尔逻辑计算的结果并非返回布尔值,而是返回它们相互之间的某一个.文章的部分例子来 ...
随机推荐
- 使用RetionalRose根据现有的java工程逆向生成类图
1.进入RetionalRose选择J2EE模板 2.在菜单栏选择tools->java/j2EE->reverse engineer 3.编辑路径Edit CLASSPATH选择要生成类 ...
- 学习笔记之Data Visualization
Data visualization - Wikipedia https://en.wikipedia.org/wiki/Data_visualization Data visualization o ...
- golang 反射应用(二)
golang反射应用(二) package test import ( "reflect" "testing" ) //定义适配器 func TestRefle ...
- 2018年1月 attribute VS prop 动画渲染
attribute和prop和UI存在单向/双向绑定关系,参考 https://m.aliyun.com/yunqi/articles/31499 渲染流程 重绘和重排 ? requestAnimat ...
- linux的cd、ls、chmod命令
cd ls ls:查看权限 chmod:修改权限
- Maven安装以及环境配置(Windows)
Maven是什么? Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期. 在 ...
- GRUB2 命令行使用笔记
在GRUB界面按C可进入命令行模式,学会命令行模式有助于玩转单机多OS. 磁盘描述规则: hd0,0 表示第1硬盘第1分区 help 显示帮助(内容会比这里全,此处只做几条常用命令介绍) cat 命令 ...
- python学习笔记-学习大纲
- 【Unix网络编程】chapter7套接字选项
7.1 概述 有很多方法来获取和设置影响套接字的选项: getsockopt和setsockopt函数 fcntl函数 ioctl函数 7.2 getsockopt和setsockopt函数 7.3 ...
- Java - 25 Java 包(package)
Java 包(package) 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间. 包的作用 1 把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2 如同文件夹一样,包 ...