文档章节

bootstrap3手风琴

残风vs逝梦
 残风vs逝梦
发布于 2014/06/19 15:54
字数 331
阅读 12650
收藏 11
点赞 1
评论 1

 bootstrap3手风琴:

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div style="width: 200px;">
			<div class="panel-group" id="accordion2">
			<div class="panel-heading">
				<strong style="font-size: 30px;">论坛分类</strong>
			</div>
				<div class="panel panel-default">
					<div class="panel-heading" data-toggle="collapse"
						data-parent="#accordion2" href="#collapseOne">
						<a class="accordion-toggle">Java</a>
					</div>
					<div id="collapseOne" class="panel-collapse collapse"
						style="height: 0px;">
						<div class="panel-body">
							<ul class="nav nav-pills nav-stacked">
								<li><a href="#">Java基础</a></li>
								<li><a href="#">Java面向对象</a></li>
								<li><a href="#">Java核心API</a></li>
								<li><a href="#">JavaEE</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading" data-toggle="collapse"
						data-parent="#accordion2" href="#collapseTwo">
						<a class="accordion-toggle">数据库</a>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse"
						style="height: 0px;">
						<div class="panel-body">
							<ul class="nav nav-pills nav-stacked">
								<li><a href="#">SQL基础</a></li>
								<li><a href="#">Oracle</a></li>
								<li><a href="#">MySQL</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading" data-toggle="collapse"
						data-parent="#accordion2" href="#collapseThree">
						<a class="accordion-toggle">技术前沿</a>
					</div>
					<div id="collapseThree" class="panel-collapse in"
						style="height: 0px;">
						<div class="panel-body">
							<ul class="nav nav-pills nav-stacked">
								<li><a href="#">NoSQL</a></li>
								<li><a href="#">Hadoop</a></li>
								<li><a href="#">WebService</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
注意: 手风琴是否打开受class="panel-collapse in" style="height:0px;" 隐藏
class="panel-collapse in" style="height:auto;" 打开

效果:


© 著作权归作者所有

共有 人打赏支持
残风vs逝梦
粉丝 49
博文 116
码字总数 71921
作品 0
武汉
高级程序员
加载中

评论(1)

david/jshow for bootstrap

#jshow for bootstrap jshow for bootstrap 是一款适合于后台管理的bootstrap插件,能够更好的使用bootstrap的Modal组件,方便你的开发和使用。 欢迎大家访问:http://runjs.cn/detail/tmzc...

david ⋅ 2014/01/21 ⋅ 0

jQuery手风琴插件--gridAccordion

gridAccordion 是一个基于 jQuery 的手风琴插件,它制作出的手风琴效果非常酷,这个手风琴是“网”状的,可以垂直和水平伸缩。它可以指定区域内水平显示多少个对象,可以设置自动播放。同时可...

dowebok ⋅ 2013/06/20 ⋅ 0

Bootstrap2和3的区别与选择

相信大家对Bootstrap都已经不陌生了,这个在网站建设领域赫赫有名的前端开发框架可谓是受到了全球前端工程师的推崇。 不过自从推出了Bootstrap3版本以来,国内很多朋友都在Boostrap2和3的选择...

6pker ⋅ 2014/12/27 ⋅ 0

Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

在线演示 如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3和jQuery来生成一个类似移动设备app的w...

gbin1 ⋅ 2013/11/15 ⋅ 0

分享10个jQuery的标签页tabs和手风琴效果Accordion实现

日期:2012/02/06 来源:GBin1.com 手风琴效果和标签页效果很类似。主要的区别在于显示和隐藏的方式不同。这里我们精心收集了10个标签页和手风琴效果的实现,希望大家喜欢! 1. Yetii – Ye...

gbin1 ⋅ 2012/02/07 ⋅ 1

1、 Bootstrap Dialog 使用

1、光是bootstrap.min.css 和bootstrap.min.js 还不够。因为Dialog 属于插件。还需要引入bootstrap-dialog.js 和bootstrap-dialog.css https://github.com/nakupanda/bootstrap3-dialog 这里......

我爱祥子 ⋅ 2016/07/13 ⋅ 0

分享8款精美的jQuery图片播放插件

本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究。废话不多说了,直接上这些插件。 1、3D轮播相册 这款3D相册插件利用了H...

wei-spring ⋅ 2014/04/18 ⋅ 0

Bootstrap 3 排版

导航栏 导航栏默认有圆角边框,设置导航.navbar-fixed-top可以去掉边框。 图一无圆角(放大看) 图二有圆角(放大看) 为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签...

ariesli ⋅ 2015/01/16 ⋅ 0

如何修改bootstra的属性可让手风琴能打开多个

用bootstrap做了一个手风琴,不过该手风琴打开第二个窗口时第一个窗口会收起来,请问改变什么属性会同时显示多个窗口

土豆蹦蹦 ⋅ 2014/04/25 ⋅ 0

jQuery图文tab手风琴切换焦点图特效

jQuery图文tab手风琴切换焦点图特效 效果描述: 多种扇形手风琴tab图片切换效果 使用方法: 1、将head中的样式引入到你的网页中 2、将body里的代码部分拷贝到你需要的地方即可 效果预览:htt...

wybo521 ⋅ 2016/01/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 昨天 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 昨天 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 昨天 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 昨天 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 昨天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 昨天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部