折叠插件(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. EIGRP-4-调整接口度量参数来影响路径选择

    从EIGRP度量参数的讨论中可以看出.能够手动配置的EIGRP度量参数只有带宽和延迟. 通过使用bandwidth命令强迫EGIRP使用或不使用某条特定路径.看起来是一个很有吸引力的做法.不过这个问题 ...

  2. LeetCode初级算法(树篇)

    目录 二叉树的最大深度 验证二叉搜索树 对称二叉树 二叉树的层次遍历 将有序数组转换为二叉搜索树 二叉树的最大深度 二叉树,所以可以考虑用递归来做.由于根节点已经算过了,所以需要加上1:每次返回都是以 ...

  3. tcpdump安装配置及抓包分析

    http://blog.csdn.net/e421083458/article/details/23963189 cpdump安装配置及抓包分析 预装软件:[plain] view plain cop ...

  4. jQuery图片组展示插件----Galleria使用简介

    1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...

  5. java(itext) 一个很简单的PDF表格生成工具

    先上个效果图 因为做的项目涉及到数据预测,其中有大量打印业务来支撑实体店的运营,因为注重的是数据,要求简洁,清晰,所以写了个很简单也很实用的工具类. 如果需要编写样式或者插入背景,都可以查阅itex官 ...

  6. html5 知识总结

    Meta基础知识:  H5页面窗口自动调整到设备宽度,并禁止用户缩放页面    //一.HTML页面结构<meta name="viewport" content=" ...

  7. java集合杂谈

    一:java集合框架如下图所示: 大致说明:看上面的框架图,先抓住它的主干,即Collection和Map. 1.Collection是一个接口,是高度抽象出来的集合,它包含了集合的基本操作和属性.C ...

  8. C++中构造函数的写法

    class Circle { public: Circle(float r); private: float radius; }; Circle::Circle(float r) { radius = ...

  9. 关于win10上安装.Net Framework3.5的解决办法

    1.首先下载. NET Framework 3.5的安装包,格式为cba格式; 2.将下载下来的NetFx3.cab 放进 C:\Windows 目录下; 3.打开控制面板->程序->启动 ...

  10. Cocos2d-x v3.1 核心类Director,Scene,Layer和Sprite（六）

    Cocos2d-x v3.1 核心类Director,Scene,Layer和Sprite(六) Scene就像一个舞台一样在上面会摆放各种的元素,有的是固定的比如说布景,道具都是固定不动的,但有的元 ...