折叠插件(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. 查询缓存及索引：MySQL系列之九

    一.MySQL的架构 连接器 连接池,安全认证.线程池.连接限制.检查内存.缓存 SQL接口 DML.DDL SQL解析器,对SQL语句的权限检查.解析为二进制程序 优化器,优化访问路径 缓存cach ...

  2. AT2348 HonestOrUnkind

    传送门 显然\(a>b\)的情况下才有解 考虑先找出一个诚实的人,然后剩下的都可以在\(n\)次以内问出来了 发现如果一个人说另一个人是说谎的那么这两个人必有一个是说谎的,由于诚实的人严格多于不 ...

  3. ubuntu 14.04安装octave，及其使用

    从库安装: sudo apt-add-repository ppa:octave/stable sudo apt-get update sudo apt-get install octave 使用:以 ...

  4. Jmeter ExcelDataPreProcessor

    Jmeter的预处理器主要是用来在采样器(sample)被执行之前做一些额外的工作,比如参数化等等. 本文写一个例子来说明如何增加一个预处理器,需求如下:我们想在执行采样器前读取Excel文件中的数据 ...

  5. Python网络爬虫(一)

    Urllib发送请求 基本用法 基本的用法就是调用request库, class urllib.request.Request(url, data=None, headers={}, origin_r ...

  6. 024 Swap Nodes in Pairs 交换相邻结点

    给定一个链表,对每两个相邻的结点作交换并返回头节点.例如:给定 1->2->3->4,你应该返回 2->1->4->3.你的算法应该只使用额外的常数空间.不要修改列 ...

  7. UnityError AnimationEvent 'NewEvent' has no receiver! Are you missing a component?

  8. Spark Mllib里的分层抽样（使用map作为分层抽样的数据标记）

    不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计

  9. 【PKI】PKI-中的几种证书的区别

    CA根证书:CA根证书是整个PKI系统的根证书. 管理根证书:根CA,二级CA,KMC都有管理根证书,用来在系统部署时签发本级的超级管理员和审计管理员. 站点证书:CA.RA要和用户走SSL通讯,需要 ...

  10. CentOS安装MySQL，（常规安装方式MySQL无法远程连接）

    转载自:https://blog.csdn.net/z13615480737/article/details/78906598 CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ...