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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
Javascript玩转继承(三)
May 08 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
javascript学习小结之prototype
Dec 03 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
移动端手指放大缩小插件与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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Django 请求Request的具体使用方法
2019/11/11 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
十二生肖观后感
2015/06/12 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python