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

您可以使用折叠插件

1、创建可折叠的分组或折叠的面板

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：折叠插件(collapse)面板</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="panel-group"id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne"data-toggle="collapse"data-parent="#accordion">
点击我进行展开，再次点击我进行折叠，第一部分。
</a>
</h4>
</div>
<div class="panel-collapse collapse in"id="collapseOne">
<div class="panel-body">
彭博社最新调查显示，63%的被调查者认为，如果原油价格跌至30美元每桶，那么俄罗斯经济将恶化，并威胁到俄罗斯金融系统。大多数经济学家认为，原油价格低迷是俄罗斯明年面临最大的风险，俄罗斯还没有做好准备来渡过下一次原油市场危机。对27位分析师的调查结果显示，俄罗斯在2016年面临的其他危机包括地缘政治危机、银行业和卢布所承受的压力。
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseSecond"data-toggle="collapse"data-parent="#accordion">
点击我进行展开，再次点击我进行折叠，第二部分。
</a>
</h4>
</div>
<div id="collapseSecond" class="panel-collapse collapse">
<div class="panel-body">
俄罗斯副财长马克西姆·奥列什金(Maxim Oreshkin)在11月25日表示，俄罗斯刚刚适应将近40美元一桶的原油价格，原油价格下滑到30美元一桶会恶化形势，但这是不太可能发生的。如果2016-2018原油价格仍会处于低于40美元的紧张状态中，俄罗斯经济将在明年下滑5%或更多。俄罗斯央行预计，受此影响俄罗斯物价可能会上涨7%至9%，这会带来通货膨胀的风险，也会加剧金融稳定的风险。
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree"data-toggle="collapse"data-parent="#accordion">
点击我进行展开，再次点击进行折叠，第三部份。
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
瑞典银行在立陶宛维尔纽斯的首席经济学家尼瑞尔斯-马修里斯(Nerijus Maciulis)表示：“原油价格的第二次下跌和资本外流的风险将让俄罗斯衰退的经济雪上加霜。下一个受打击的对象就是银行资产负债表，不良贷款将会大量增加并加剧公共基金消耗。”
</div>
</div>
</div>
</div>
</div>
</body>
</html>

  1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
  2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。
  3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

Bootstrap 折叠(collapse)插件面板的更多相关文章

  1. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  2. Bootstrap 折叠(collapse) 初见

    以下代码来自bootstrap中文网 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  3. bootstrap 折叠collapse失效

    手动点击折叠,然后调用折叠全部以后,在手动点击折叠项,折叠失效. 方法,折叠项是通过添加或删除".in"来实现,实现如下 $(".collapse.in").c ...

  4. BootStrap中的collapse插件堆叠效果

    通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...

  5. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  8. bootstrap导入JavaScript插件

    Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...

  9. Bootstrap 的 Collapse

    一.简介 Collapse 插件为 HTML 标签提供折叠.展开行为,依赖 transition.js(bootstrap.js 文件中已包含). 二.实现机制 实现 Collapse 效果需要: 一 ...

随机推荐

  1. 洛谷P3582 [POI2015]KIN

    题目描述 共有\(m\)部电影,编号为\(1--m\),第\(i\)部电影的好看值为\(w[i]\).在\(n\)天之中(从\(1~n\)编号)每天会放映一部电影,第\(i\)天放映的是第\(f[i] ...

  2. 洛谷P2812校园网络【Network of Schools加强版】

    题目背景 浙江省的几所\(OI\)强校的神犇发明了一种人工智能,可以\(AC\)任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被\(♂\)掏\(♂\)空,他 ...

  3. CentOS6.5安装MySQL5.7(也适合其他版本安装)

     1.查看是否已经安装过mysql或其依赖,若已装过要先将其删除,否则第4步使用yum安装时会报错: 方法一:yum list installed | grep mysql 方法二:rpm -qa | ...

  4. (转)TComboBox patch for Delphi 7

    unit D7ComboBoxStringsGetPatch; // The patch fixes TCustomComboBoxStrings.Get method . interface {$I ...

  5. PHP var_export

    var_export可以将一个数组转为一个字符串 不同于var_dump,var_export并不会输出数据的类型以及字符大小等,只会简单把数组的key跟value拼接成一个字符串 <?php ...

  6. java编程如何实现多条2017-08-08 22:10:00.0这样的时间数据，相差多少天？（隔24小时为相差1天，否则为0天）

    不多说,直接上干货! 这是yyyy-MM-dd HH:mm:ss.S     GetIntervalDays.java package zhouls.bigdata.DataFeatureSelect ...

  7. Hadoop实战：用Hadoop处理Excel通话记录

    项目需求 有博主与家庭成员之间的通话记录一份,存储在Excel文件中,如下面的数据集所示.我们需要基于这份数据,统计每个月每个家庭成员给自己打电话的次数,并按月份输出到不同文件夹. 数据集 下面是部分 ...

  8. 【密码学】SSL双向认证以及证书的制作和使用

    客户端认证服务器: 正规的做法是:到国际知名的证书颁发机构,如VeriSign申请一本服务器证书,比如支付宝的首页,点击小锁的图标,可以看到支付宝是通过VeriSign认证颁发的服务器证书: 我们用的 ...

  9. MySQL导入大sql 文件大小限制问题的解决

    解决过程如下: 1.由于mysql能解析sql的压缩文件,因此将200M压缩后为5M. 2.默认情况下:MySQL导入文件大小有限制的,最大为2M,所以当文件很大时候,直接无法导入,可修改php.in ...

  10. linux 解决 gvfsd-smb-browse CPU 100%占用

    原文地址:https://bugzilla.redhat.com/show_bug.cgi?id=1303300 1: sudo vim /etc/samba/smb.conf 2:定位到[globa ...