折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
如果您想要单独引用该插件的功能，那么您需要引用 collapse.js，或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
一、用法
下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：

您可以通过以下两种方式使用折叠（Collapse）插件：

通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：
$('.collapse').collapse()

二、实例

通过点击可以折叠内容。
//基本实例

?

1 2 3 4 5 6 7 8 9 10 11

<button class="btn btn-primary" data-toggle="collapse" data-target="#content">  Bootstrap </button>   <div class="collapse" id="content">  <div class="well">   Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 以上是由福州网站建设的小编为你分享了"Bootstrap之折叠和展开（Collapse）教程"文章，如果你在这方面有什么问题，随时联系我们 上一篇：使用font-awesome小图标 下一篇：Bootstrap之折叠和展开（Collapse）教程 返回栏目列表 与php技术有关的文章 微信支付对接说明 php采集微信公众号文章源代码 可用 2022 2023 关于open_basedir restriction in effect的错误解决方案 SQL多表连接查询（详细实例,内连接，外连接，左连接，右连接...） 微信开发中被动回复连续回复多条信息怎么实现 likeshop 后台路径admin更改方法 git更新远程仓库代码到本地 ecshop淘宝单品和店铺评论采集插件 SQL左右连接中的on and和on where的区别 js文件中引用其他js文件 bootstrap中col-md-offset、col-md-push和col-md-pull的含义理解，用法解析 chatgpt用SEO原创内容怎么样 如果您有什么问题，欢迎咨询我们客服！ 点击QQ咨询 资讯中心 福州网站建设 php技术 站长新闻 公司新闻 联系方式 地址：福建省福州市海通广场2号楼 电话：18558752805 关于福建荣升信息技术有限公司 福州网站建设、福州网站设计、福州小程序制作，福州网站设计哪家公司最好、有哪些靠谱?福建荣升信息技术有限公司通过对策略、创意和行业发展的深度洞察，帮助客户锁定目标用户。我们以专业福州网站制作公司的视角，对客户进行良性引导，帮客户完成网站建设规划，并提供网站架设、网站制作报价收费明细。我们为福州提供高端品牌网站建设制作,公司门户网站开发,服务。福州企业网站搭建\福州网站制作要多少钱，请咨询我们公司我们一定会给你一个优惠的报价以及做出你满意的网站、小程序、系统！ Copyright © 2017-2022  www.xl779.com福州网站制作 福州小程序制作福州网站建设 闽ICP备16037694号-2 福州网站建设 福州小程序 福州网站制作 福州手机网站 福州网站设计 福州企业网站 QQ咨询 QQ在线咨询真诚为您提供专业解答服务 售前技术 售后技术 咨询热线 18558752805 全天候技术服务热线 添加微信 微信便捷交流 返回顶部