<!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的更多相关文章

  1. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  2. Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式

    Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...

  3. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  4. BootStrap插件

    站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...

  5. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  6. bootstrap插件的一些常用属性介绍

    1.下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle ...

  7. Bootstrap插件的使用

    昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...

  8. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  9. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

随机推荐

  1. Learning Python 001 第一个程序

    Python 第一个程序 我使用的开发工具是PyCharm软件.我们使用的是Python3.5 for windows . 如果你还没有安装PyCharm软件 和 Python3.5,请到这里来看如果 ...

  2. 【机器学习】关联规则分析(一):Apriori

    一.Apriori原理 Apriori是关联分析中较早的一种方法,主要用来挖掘那些频繁项集合,其思想是: 1.如果一个项目集合不是频繁集合,那么任何包含它的项目(超集)也一定不是频繁集. 2.如果一个 ...

  3. java类什么时候初始化?

    Java虚拟机规范中并没有进行强制玉树什么情况下需要开始类加载过程.但是对于初始化阶段,虚拟机规范则是严格规定了有且仅有5种情况必须立即对类进行“初始化”(而加载,验证,准备自然需要在此之前开始): ...

  4. 项目中gulp使用发生的错误及解决

    在项目开发中,执行gulp css来生成合成的css文件时,报如下错误 Error: Cannot find module 'browserslist' 解决方法: npm install brows ...

  5. Note: Differentially Private Access Patterns for Searchable Symmetric Encryption

    The Core Issues and Ideas of This Paper Problem Baseline Searchable Symmetric Encryption (SSE) could ...

  6. vue -- 插件的开发与使用

    开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element. 2.添加全局资源:指令/过滤器/过渡等,如 ...

  7. 洛谷P3870 [TJOI2009]开关

    题目描述 现有\(N(2 ≤ N ≤ 100000)\)盏灯排成一排,从左到右依次编号为:\(1,2,......,N\).然后依次执行\(M(1 ≤ M ≤ 100000)\)项操作,操作分为两种: ...

  8. Java基础笔记(十四)——面向对象(续)【构造方法和this关键字】

    一.构造函数的规则 1.构造方法是用来在对象实例化时初始化对象的成员变量的,以完成对象的初始化工作. 2.构造方法与类名相同且没有返回值(返回值也不能为void型).如:public 构造方法名( ) ...

  9. Jmeter 添加CSV Data set config 文件的相对路径及编码在Windows和Linux下的兼容性(转)

    简介: Jmeter实际上是不需要安装的,只需要有ApacheJMeter.jar.启动批处理文件(jmeter.bat或jmeter).配置文件(jmeter.properties.user.pro ...

  10. libaudit_plugin.so安装

    #上传audit到mysql的plugin目录vim /etc/my.cnfplugin-load=AUDIT=libaudit_plugin.soaudit_json_file=1audit_jso ...