Bootstrap插件-collapse
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>声明式触发手风琴</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body {
padding: 10px;
margin: 10px
}</style>
</head>
<body>
<!--触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse,data-target="#折叠区标识符"-->
<div class="panel-group" id="myAccordion">
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!--定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)-->
<a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
</h4>
</div>
<!--在Bootstrap框架中,如果你想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse-->
<div class="panel-collapse collapse in" id="panel1"><!--in初始选定状态-->
<div class="panel-body">折叠区内容</div>
</div>
</div>
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!--为了把标题和内容区捆绑在一起,可以通过锚链接的方法,把标题区域和面板区连在一起-->
<a href="#panel2" data-toggle="collapse" data-target="#panel2" data-parent="#myAccordion">标题二</a>
<!--a标签可以省去data-target,因为href中已经声明,button就必须使用data-target自定义标签了-->
</h4>
</div>
<div class="panel-collapse collapse" id="panel2">
<div class="panel-body">折叠区内容</div>
</div>
</div>
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panel3" data-toggle="collapse" data-target="#panel3" data-parent="#myAccordion">标题三</a>
</h4>
</div>
<div class="panel-collapse collapse" id="panel3">
<div class="panel-body">折叠区内容</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap插件-collapse的更多相关文章
- Bootstrap 折叠(collapse)插件面板
折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
- bootstrap插件的一些常用属性介绍
1.下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
随机推荐
- HTML5新增的结构元素
HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...
- Luogu 2900 [USACO08MAR]土地征用Land Acquisition
斜率优化dp. 首先发现如果存在$x$和$y$使得$len(x) \geq len(y)$并且$wid(x) \geq wid(y)$,那么$y$直接不考虑就好了,因为在买$x$的时候就把$y$顺便带 ...
- 【机器学习】EM最大期望算法
EM, ExpectationMaximization Algorithm, 期望最大化算法.一种迭代算法,用于含有隐变量(hidden variable)的概率参数模型的最大似然估计或极大后验概率估 ...
- 阿里、腾讯热门面试题:聊聊Unix与Java的IO模型?(含详细解析)
众所周知 如果去百度.腾讯等一线大厂面试,一定会深入考候选人的基础技术功底,其中尤为关键和重视的就是IO相关的技术和知识. 而要搞明白IO相关的概念,首先就得弄清楚同步与异步,阻塞与非阻塞到底是什么意 ...
- Java——利用集合类实现简单斗地主发牌
import java.util.ArrayList; import java.util.Collections; import java.util.HashMap; import java.util ...
- 在Eclipse中使用Maven创建Web工程
在Eclipse中使用Maven创建Web工程 1.创建maven Project工程,使用maven-archetype-webapp 2.在pom.xml文件中,设置打包类型为war <pa ...
- java socket 网络通信 指定端口的监听 多线程 乱码
Java Socket编程 对于Java Socket编程而言,有两个概念,一个是ServerSocket,一个是Socket.服务端和客户端之间通过Socket建立连接,之后它们就可以进行通信了.首 ...
- thinkphp5.1页面页面模板及参数配置
success和error跳转的模板在thinkphp/tpl/dispatch_jump.tpl 配置参数在thinkphp\library\traits\controller\jump.php文件 ...
- df 参数说明
df -h 由 df 命令显示出的各列信息的含义分别是: Filesystem:表示该文件系统位于哪个分区,因此该列显示的是设备名称: 1K-blocks:此列表示文件系统的总大小,默认以 KB 为单 ...
- Django基础(3)----模型层-单表操作,多表创建
昨日内容回顾: 1. {% include '' %} 2. extend base.html: <html> ..... ..... ..... {% block content%} { ...