|
<div class="container">
??????? <ul class="nav nav-pills nav-justified">
??????????? <li role="presentation"><a href="#">Home</a></li>
??????????? <li role="presentation" class="active"><a href="#">Profile</a></li>
??????????? <li role="presentation" class="disabled"><a href="#">Messages</a></li>
??????? </ul>
??????? <br><br><br><br>
??????? <ul class="nav nav-tabs">
??????????? <li role="presentation" class="active"><a href="#">按钮1</a></li>
??????????? <li role="presentation"><a href="#">按钮2</a></li>
??????????? <li role="presentation" class="dropdown">
??????????????? <a class="dropdown-toggle" data-toggle="dropdown" href="#">
??????????????????? 下拉菜单 <span class="caret"></span>
??????????????? </a>
??????????????? <ul class="dropdown-menu">
??????????????????? <li class="dropdown-header">吉林省</li>
??????????????????? <li><a href="#">长春市</a></li>
??????????????????? <li><a href="#">吉林市</a></li>
??????????????????? <li class="disabled"><a href="#">四平市</a></li>
??????????????????? <li class="dropdown-header">辽宁省</li>
??????????????????? <li><a href="#">沈阳市</a></li>
??????????????? </ul>
??????????? </li>
??????????? <li role="presentation"><a href="#">按钮3</a></li>
??????????? <li role="presentation"><a href="#">按钮4</a></li>
??????? </ul>
??? </div>
??? <script src="js/jquery-1.12.4.js"></script>
??? <script src="js/bootstrap.js"></script>
??? <script>
??????? $('.nav-tabs a').mouseover(function (e) {
??????????? e.preventDefault()
??????????? $(this).tab('show')
??????? })
??? </script>
</body>
</html>
<!--
??? .nav：导航的基础类
??? .nav-tabs：标签页的类，如果要使用胶囊式的标签页，可以将该类设置为.nav-pills
??? .active：激活
??? . nav-justified：使标签选项两端对齐
?-->
|