`

Bootstrap折叠内容

阅读更多
collapse-finish.html 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠内容</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"
	type="text/css">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
	<div class="container">
		<h1 class="page-header">折叠内容</h1>
		
		<div class="accordion" id="accordion1">
		  <div class="accordion-group">
			  <div class="accordion-heading">
			  	<a class="accordion-toggle" href="#collapse1" data-toggle="collapse" data-parent="#accordion1">显示折叠内容一</a>
			  </div>
			  <div class="collapse in" id="collapse1">
				  <div class="accordion-inner">
				  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
				  </div>
			  </div>
		</div>
		
		<div class="accordion-group">
		  <div class="accordion-heading">
		  <a class="accordion-toggle" href="#collapse2" data-toggle="collapse" data-parent="#accordion1">显示折叠内容二</a>
		  </div>
		  <div class="collapse" id="collapse2">
		  <div class="accordion-inner">
		  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
		  </div>
		  </div>
		</div>
		  
		<div class="accordion-group">
		  <div class="accordion-heading">
		  <a class="accordion-toggle" href="#collapse3" data-toggle="collapse" data-parent="#accordion1">显示折叠内容三</a>
		  </div>
		  <div class="collapse" id="collapse3">
		  <div class="accordion-inner">
		  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
		  </div>
		  </div>
		</div>
	</div>
	
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到：
| Bootstrap对话框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics