<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-折叠内容_07</title>
<!--有时无法使用可以像如下直接使用链接导入第三方库-->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</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>
</div>
</body>
</html>
bootstrap-折叠内容_07
猜你喜欢
转载自blog.csdn.net/qq_31935419/article/details/81224892
今日推荐
周排行