文档章节

bootstrap3手风琴

残风vs逝梦
 残风vs逝梦
发布于 2014/06/19 15:54
字数 331
阅读 12696
收藏 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)

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
Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

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

gbin1
2013/11/15
1K
0
jQuery手风琴插件--gridAccordion

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

dowebok
2013/06/20
1K
0
分享10个jQuery的标签页tabs和手风琴效果Accordion实现

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

gbin1
2012/02/07
3.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
5
0
现场看路演了!

HiBlock
昨天
16
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
9
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
19
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部