在bootstrap栅格系统中使用折叠菜单(单个菜单案例)

作者(出处):百宝箱工作室发布时间:2018年4月15日 18:28:57查阅量:202

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-15
        	描述:单个折叠菜单
        	
        	1.给要点击的标签添加一个data-toggle="collapse"属性,并且给该标签添加
        	一个data-target="#coll"属性,该属性值要与内容区域的id或class的值相同
        	
        	2.给对应的内容区域添加一个id或class,与要点击的标签的data-target的值相同。
        	
        	注意:1.内容区域不能有padding值,可以在内容区域外增加一个父级元素,把id写在父级标签内。
        	     2.内容区域的父级元素增加class="in"解决了第一次点击时,收缩后立即展开的问题。
        -->
		<div class="container">
			<div class="row col-lg-4" style="margin-top: 50px;">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h2 class="panel-title"><a href="#" data-toggle="collapse" data-target="#coll" >百宝箱IT微课堂项目教学(点击看看)</a></h2>
					</div>
					<!--增加class="in"解决了第一次点击时,收缩后立即展开的问题-->
					<div id="coll" class="in">
						<div class="panel-body">
							<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息