导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。
效果图
效果图
效果图
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。
改变修饰类能够改变样式。
标签页
注意 .nav-tabs 类依赖 .nav 基类
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</body>
</html>
效果图
胶囊式标签页
HTML 标记同样，但使用 .nav-pills 类：
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</body>
</html>
效果图
胶囊是标签页也是能够垂直方向堆叠排列的。
仅仅需加入 .nav-stacked 类。
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</body>
</html>
效果图
两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类能够非常easy的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上。导航链接呈现堆叠样式。
两端对齐的导航条导航链接已经被弃用了。
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</body>
</html>
效果图
禁用的链接
对不论什么导航组件（标签页、胶囊是标签页）。都能够加入 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
</ul>
</body>
</html>
效果图
加入下拉菜单
用一点点额外 HTML 代码并增加下拉菜单插件的 JavaScript 插件就可以。
带下拉菜单的标签页
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Profile</a></li>
</li>
</ul>
</body>
</html>
效果图
带下拉菜单的胶囊式标签页
代码例如以下
<!DOCTYPE html>
<html ng-app="UserInfoCtrl">
<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导航</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Profile</a></li>
</li>
</ul>
</body>
</html>
效果图
