折叠插件(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. web综合案例03

    web综合案例03 web综合案例03 web综合案例03 web综合案例03 ... 待复习

  2. 惠普台式机UEFI BIOS设置U盘启动

    开机按F9进入选中安装u盘启动软件的u盘,即可进入u盘启动选项,将于U盘安装系统操作一致 如:F9未找到U盘,可进行如下操作 1.开机时点击F10键进入BIOS更改选项:  更改 Advanced-- ...

  3. 成功安装tesserocr

    首先按照官网的操作,出现了下面的错误. 错误描述: x86_64-linux-gnu-gcc: error trying to exec 'cc1plus': execvp: 没有那个文件或目录 er ...

  4. linux下使用swapfile

    https://blog.argcv.com/articles/3248.c linux下至少有两种方法可以配置系统的swap.一种是直接格式化一个分区,用这个分区作为swap区.另一种是创建一个文件 ...

  5. USB转串口连接线与串口调试助手的使用

    ---作者吴疆,未经允许,严禁转载,违权必究--- ---欢迎指正,需要源码和文件可站内私信联系--- -----------点击此处链接至博客园原文----------- 功能说明:宇泰UT-890 ...

  6. qemu 出现Could not access KVM kernel module: No such file or directory failed to initialize KVM: No such file or directory

    使用qemu命令 qemu-system-x86_64 -hda image/ubuntu-test.img -cdrom ubuntu-16.04.2-server-amd64.iso -m 102 ...

  7. ajax无刷新评论示例

    下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...

  8. wcf问题集锦

    1.处理程序“svc-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供 ...

  9. nodejs 实践：express 最佳实践系列

    nodejs 实践:express 最佳实践系列 nodejs 实践:express 最佳实践(一) 项目结构 nodejs 实践:express 最佳实践(二) 中间件 nodejs 实践:expr ...

  10. unobtrusive验证,ajax局部加载后验证失效解决方法

    页面加载后运行此代码 $(function() {$.validator.unobtrusive.parse($("form")); }); 原因: 页面加载后unobtrusiv ...