<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>带有下拉菜单的导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">WEB标准</a></li>
<li role="presentation"><a href="#">HTML</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
CSS <span class="caret"></span>
</a>
<!--aria-expanded展开状态，默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。-->
<ul class="dropdown-menu">
<li><a href="#">语法规则</a></li>
<li><a href="#">选择器</a></li>
</ul>
</li>
</ul>
<br />
<br />
<br />
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">WEB标准</a></li>
<li role="presentation"><a href="#">HTML</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
CSS <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">语法规则</a></li>
<li><a href="#">选择器</a></li>
</ul>
</li>
</ul>
</body>
</html>
HBuilder
在线客服
