折叠插件(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. POJ1016 Numbers That Count

    题目来源:http://poj.org/problem?id=1016 题目大意: 对一个非负整数定义一种运算(inventory):数这个数中各个数字出现的次数,然后按顺序记录下来.比如“55531 ...

  2. day04 ---Linux安装Python3

    如何linux上安装python3 1.下载源代码,方式有2个, 1.在windows上下载,下载完成后,通过lrzsz工具,或者xftp工具,传输到linux服务器中 2.在linux中直接下载 c ...

  3. 1105 Spiral Matrix（25 分）

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  4. Django基础(3)----模型层-单表操作,多表创建

    昨日内容回顾: 1. {% include '' %} 2. extend base.html: <html> ..... ..... ..... {% block content%} { ...

  5. C/C++规范学习：

    一 关于浮点数: 1.1浮点数是否等于0判断:因为浮点数都有精度,不能拿浮点数直接和0.0f进行比较,而应该采用以下方法: if (f32Data == 0.0f) // 隐含错误的比较 #defin ...

  6. winform-Chrome-CefSharp库

    相关资源 教程地址:Winform下CefSharp的引用.配置.实例与报错排除 支持html5:http://www.html5tricks.com/demo/html5-css3-windmill ...

  7. JAVA中数组介绍

    一.数组: 数组指一组数据的集合,数组中的每个数据被称作元素. 二.数组定义: 数组类型[] 数组名 = new 数组类型[元素个数或数组长度]: (注意:等号前面的[]里面不能写任何东西) 也可以以 ...

  8. JVM（一）：Java内存区域与内存溢出异常

    一.运行时数据区 共分为5块: 程序计数器      (线程私有,当前线程所执行的字节码的行号指示器) Java虚拟机栈  (线程私有,证明周期与线程相同,描述的是Java方法执行的内存模型,每个方法 ...

  9. Counting blessings can actually increase happiness and health by reminding us of the good things in life.

    Counting blessings can actually increase happiness and health by reminding us of the good things in ...

  10. UEditor百度编辑器

    第一步:首先下载ueditor编译器,地址:http://ueditor.baidu.com/website/ 下载完解压之后就这个: 第二步:我会把文件名utf-8-jsp这个文件名改为uedito ...