bootstrap手风琴折叠示例代码分享


Posted in Javascript onMay 22, 2017

本文实例为大家分享了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> 
<div class="collapse" id="content"> 
<!--<div class="collapse fade in" id="content">--> 
 <div class="well"> 
 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 
 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 
 前,Bootstrap 最新版本为 3.0 。 
 </div> 
</div> 
<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”(表示一开始展开) 
 --> 
<!--<div class="panel-group"><!?大容器?> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div 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> 
 </div> 
 <div class="panel-collapse collapse" id="collapseOne"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  1号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div class="panel-heading"><!?第一部分,被点击部分?> 
  <h4 class="panel-title"> 
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseTwo"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  2号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div class="panel-heading"><!?第一部分,被点击部分?> 
  <h4 class="panel-title"> 
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseThree"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  3号内容 
  </div> 
 </div> 
 </div> 
 
</div>--> 
<br> 
<br> 
<br> 
<br> 
<!--点击某一展开,其他的都自动折叠 
 1、给大容器加一个id id="accordion" 
 2、给每一个被点击链接加上一个 data-parent="#accordion" 
--> 
<div class="panel-group" id="accordion"><!--大容器--> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div 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> 
 </div> 
 <div class="panel-collapse collapse" id="collapseOne"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  1号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div 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> 
 </div> 
 <div class="panel-collapse collapse" id="collapseTwo"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  2号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div 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> 
 </div> 
 <div class="panel-collapse collapse" id="collapseThree"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  3号内容 
  </div> 
 </div> 
 </div> 
 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
移动端手指放大缩小插件与js源码
May 22 #Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 #Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 #Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
You might like
php学习笔记之基础知识
2014/11/08 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django框架封装外部函数示例
2019/05/28 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
审计局2014法制宣传日活动总结
2014/11/01 职场文书
早恋主题班会
2015/08/14 职场文书
初中生物教学随笔
2015/08/15 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis