bootstrap折叠

最新推荐文章于 2022-06-05 23:08:50 发布

taojYang

最新推荐文章于 2022-06-05 23:08:50 发布

阅读量135

点赞数

分类专栏： bootstrap 文章标签：折叠 bootstrap

本文链接：https://blog.csdn.net/weixin_43293451/article/details/92770213

版权

bootstrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">		

		div.d1{
   			padding-top:70px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	
	<div class="d1" style="width:800px;margin:10px"><!--折叠-->
		<a href="#html" class="btn btn-info" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample">html</a><!--链接,href-->
		<button class="btn btn-info" data-toggle="collapse" data-target="#css" aria-expanded="false" aria-controls="coolapseExample">css		
		</button><!--按钮data-target-->
		<div class="collapse" id="html">
			<div class="well">htmlhtmlhtmlhtml</div>
		</div>
		<div class="collapse" id="css">
			<div class="well">csscsscsscsscsscss</div>
		</div>
	</div>

	<div class="d2" style="width:800px;margin:10px"><!--折叠-->
		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingOne">
					<h4 class="panel-title">
						<a href="#collapseOne" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne">html</a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
					<div class="panel-body">
						htmlhtmlhtmlhtmlhtmlhtml
					</div>					
				</div>
			</div>
			<div class="pabel panel-default">
				<div class="panel-heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
						<a href="#collapseTwo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="collapseTwo">css</a>
					</h4>					
				</div>
				<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heandingTwo">
					<div class="panel-body">
						csscsscsscssscs
					</div>					
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingThree">
					<h4 class="panel-title">
						<a href="#collapseThree" class="collapsed" role="button" data-toggle="collapse" data-paren="#accordion" aria-expanded="fasle" aria-controls="collapseThree">js</a>
					</h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
					<div class="panel-body">
						jsjsjsjsjsjsjsjssjsjsjsjsjssjsjsjsjssjsjsjsjsj
					</div>
					
				</div>
			</div>
		</div>
	</div>
</body>
</html>