文档章节

bootstrap3手风琴

残风vs逝梦
 残风vs逝梦
发布于 2014/06/19 15:54
字数 331
阅读 12709
收藏 11

 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逝梦
粉丝 53
博文 118
码字总数 71921
作品 0
武汉
高级程序员
私信 提问
加载中

评论(1)

jQuery手风琴插件--gridAccordion

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

dowebok
2013/06/20
1K
0
david/jshow for bootstrap

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

david
2014/01/21
0
0
Bootstrap2和3的区别与选择

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

6pker
2014/12/27
0
0
分享10个jQuery的标签页tabs和手风琴效果Accordion实现

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

gbin1
2012/02/07
3.3K
1
Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

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

gbin1
2013/11/15
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

node.js学习笔记之koa框架和简单爬虫练习

Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用,可以免除重复繁琐的回调...

前端小攻略
3分钟前
0
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
25分钟前
1
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
38分钟前
13
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
50分钟前
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
59分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部