这篇文章主要为大家详细介绍了bootstrap手风琴折叠示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了bootstrap手风琴的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>xxx</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt ie 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body style="margin: 200px;">
<!--基本实例-->
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">
bootstrap
</button>
<p class="collapse" id="content">
<!--<p class="collapse fade in" id="content">-->
<p class="well">
bootstrap 是 twitter 推出的一个用于前端开发的开源工具包。它由
twitter 的设计师 mark otto 和 jacob thornton 合作开发,是一个 css/html 框架。目
前,bootstrap 最新版本为 3.0 。
</p>
</p>
<br>
<br>
<br>
<!--1、折叠部分设置一个id
2、在被点击的连接处引入<a href="#collapseone" rel="external nofollow" rel="external nofollow" rel="external nofollow"
3、还是在被点击的连接处加入 date-toggle="collapse"
4、写完之后第一次不正常，所以需要在折叠部分写上
class=“collapse”（表示一开始隐藏）或者 “collapse in”（表示一开始展开）
-->
<!--<p class="panel-group"><!–大容器–>
<p class="panel panel-default"><!–这个表示第一个整块儿的–>
<p class="panel-heading"><!–第一部分，被点击部分–>
<h4 class="panel-title">
<a href="#collapseone" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse">1号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapseone"><!–第二部分，折叠部分–>
<p class="panel-body">
1号内容
</p>
</p>
</p>
<p class="panel panel-default"><!–这个表示第一个整块儿的–>
<p class="panel-heading"><!–第一部分，被点击部分–>
<h4 class="panel-title">
<a href="#collapsetwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapsetwo"><!–第二部分，折叠部分–>
<p class="panel-body">
2号内容
</p>
</p>
</p>
<p class="panel panel-default"><!–这个表示第一个整块儿的–>
<p class="panel-heading"><!–第一部分，被点击部分–>
<h4 class="panel-title">
<a href="#collapsethree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapsethree"><!–第二部分，折叠部分–>
<p class="panel-body">
3号内容
</p>
</p>
</p>
</p>-->
<br>
<br>
<br>
<br>
<!--点击某一展开，其他的都自动折叠
1、给大容器加一个id id="accordion"
2、给每一个被点击链接加上一个 data-parent="#accordion"
-->
<p class="panel-group" id="accordion"><!--大容器-->
<p class="panel panel-default"><!--这个表示第一个整块儿的-->
<p class="panel-heading"><!--第一部分，被点击部分-->
<h4 class="panel-title">
<a href="#collapseone" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">1号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapseone"><!--第二部分，折叠部分-->
<p class="panel-body">
1号内容
</p>
</p>
</p>
<p class="panel panel-default"><!--这个表示第一个整块儿的-->
<p class="panel-heading"><!--第一部分，被点击部分-->
<h4 class="panel-title">
<a href="#collapsetwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">2号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapsetwo"><!--第二部分，折叠部分-->
<p class="panel-body">
2号内容
</p>
</p>
</p>
<p class="panel panel-default"><!--这个表示第一个整块儿的-->
<p class="panel-heading"><!--第一部分，被点击部分-->
<h4 class="panel-title">
<a href="#collapsethree" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">3号连接</a>
</h4>
</p>
<p class="panel-collapse collapse" id="collapsethree"><!--第二部分，折叠部分-->
<p class="panel-body">
3号内容
</p>
</p>
</p>
</p>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
【相关推荐】
1. javacript免费视频教程
2. bootstrap模态框远程实例详解
3. angularjs实现$http.post和$http.get请求的代码详解
4. layer弹窗插件的使用教程
5. js开发用到百度地图的代码整理
以上就是bootstrap手风琴折叠的教程详解的详细内容。