导航元素所涉及样式：
nav-tabs样式：呈现表格导航或标签（Tab页）样式
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
nav-stacked样式：水平导航设置为堆叠(垂直)效果
disabled样式：呈现禁用的导航菜单样式,在li标签中使用
active样式：呈现点击激活的样式，在li标签中使用
data-toggle="dropdown"属性：绑定下拉菜单
dropup样式：呈现上弹效果菜单
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--1.表格导航或标签（Tab页）
nav-tabs样式：呈现表格导航或标签（Tab页）样式
active样式：呈现激活样式的li标签
-->
<h2>1.表格导航或标签（Tab页）</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--2.基本的胶囊式导航菜单
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
active样式：呈现激活样式的li标签
-->
<h2>2.基本的胶囊式导航菜单</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--3.垂直的胶囊式导航菜单
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
nav-stacked样式：水平导航设置为堆叠(垂直)效果
active样式：呈现激活样式的li标签
-->
<h2>3.垂直的胶囊式导航菜单</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--4.两端对齐的导航菜单
nav-tabs样式：呈现表格导航或标签（Tab页）样式
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
nav-justified样式：呈现两端对齐的导航菜单样式
active样式：呈现激活样式的li标签
-->
<h2>4.两端对齐的导航菜单</h2>
<h5>两端对齐：表格导航或标签（Tab页）</h5>
<div class="container" style="padding:40px">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<h5>两端对齐：胶囊式导航菜单</h5>
<div class="container" style="padding:40px">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--5.禁用的导航菜单
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
nav-justified样式：呈现两端对齐的导航菜单样式
disabled样式：呈现禁用的导航菜单样式,只能在li中使用
active样式：呈现激活样式的li标签
-->
<h2>5.禁用的导航菜单</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a>
</li>
<li class="disabled"><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--6.具有下拉菜单的标签导航
nav-tabs样式：呈现表格导航或标签（Tab页）样式
active样式：呈现激活样式的li标签
disabled样式：呈现禁用的导航菜单样式,只能在li中使用
data-toggle="dropdown"属性：绑定下拉菜单
-->
<h2>6.具有下拉菜单的标签导航</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-tabs ">
<li class="active"><a href="#">Home</a>
</li>
<li class="disabled"><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">Sevlet</a></li>
<li class="divider"></li>
<li><a href="#">SSH</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<!--7.具有上弹菜单的胶囊式导航
nav-pills样式：呈现胶囊式导航菜单（Tab页）样式
disabled样式：呈现禁用的导航菜单样式,只能在li中使用
active样式：呈现激活样式的li标签
data-toggle="dropdown"属性：绑定下拉菜单
dropup样式：呈现上弹效果菜单
-->
<h2>7.具有上弹菜单的胶囊式导航</h2>
<div class="container" style="padding:40px">
<ul class="nav nav-pills ">
<li class="active"><a href="#">Home</a>
</li>
<li class="disabled"><a href="#">Java</a>
</li>
<li><a href="#">Dnet</a>
</li>
<li class="dropdown dropup">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">Sevlet</a></li>
<li class="divider"></li>
<li><a href="#">SSH</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
</li>
</ul>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>显示效果：
