使用bootstrap栅格系统制作选项卡(tab菜单实例)

作者(出处):百宝箱工作室发布时间:2018年4月2日 20:56:33查阅量:409

<!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>
		<style>
			.tabmenu{ 
				border: 1px solid #ddd;     /*设置内容展示块的边框样式*/
				border-top: none;	    /*取消内容展示块是上边框样式*/
				border-radius: 0 0 5px 5px; /*设置内容展示块的左下角和右下角为圆角*/
				padding: 100px;
			}
		</style>
	</head>
	<body>
        <!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-02
        	描述:制作选项卡
        	第1步:导航对应的所有内容展示块要放在一个class为tab-content的div里面。
        	第2步:每一个内容展示块都要加上名为tab-pane的class,默认被选中的导航和对应的内容展示块要加上active样式。
        	第3步:每一个导航的a标签都要添加data-toggle="tab"属性。
        	第4步:每一个内容展示块的div都要加上id,用于制作锚点链接。
        	第5步:每一个导航的a标签都要添加锚点链接,例如href="#menu1"
        	第6步:设置内容展示块的样式,即tabmenu的样式。
        -->
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<ul class="nav nav-tabs">
						<li><a href="#menu1" data-toggle="tab">HTML教学</a></li>
						<li class="active"><a href="#menu2" data-toggle="tab">CSS教学</a></li>
						<li><a href="#menu3" data-toggle="tab">JavaScript</a></li>
						<li><a href="#menu4" data-toggle="tab">美工设计</a></li>
					</ul>
					<div class="tab-content tabmenu">
						<div id="menu1" class="tab-pane">HTML教学内容展示</div>
						<div id="menu2" class="tab-pane active">CSS教学内容展示</div>
						<div id="menu3" class="tab-pane">JavaScript内容展示</div>
						<div id="menu4" class="tab-pane">美工设计内容展示</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-2099
点击这里给我发消息