知识点
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
为了确保导航的可访问性
如果你在使用导航组件实现导航条功能，务必在<ul>的最外侧的逻辑父元素上添加role="navigation"属性，或者用一个<nav>元素包裹整个导航组件。不要将role属性添加到<ul>上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
在标签页上使用导航需要依赖 JavaScript 标签页插件，另外还要添加 role 和 ARIA 属性。
标签页
.nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs"><!--nav-pills，切换为胶囊式标签导航-->
<li role="presentation" class="active"><a href="#">Tab1</a></li>
<li role="presentation"><a href="#">Tab2</a></li>
<li role="presentation"><a href="#">Tab3</a></li>
</ul>
胶囊式导航可形成垂直排列的方式：
<ul class="nav nav-pills nav-stacked">
...
</ul>
两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式，如下图：
两端对齐nav-justified-触屏端
从 v9.1.2 版本开始，Safari 有一个bug：对于两端对齐的导航，水平改变浏览器大小将引起绘制错误。
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
禁用状态
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
带下拉菜单的标签导航
<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" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉标签
<span class="caret"></span>
</a><!--这里要注意使用a标签，如果使用的是button，样式会有差别-->
<ul class="dropdown-menu">
<li><a href="#">下拉标签1</a></li>
<li><a href="#">下拉标签2</a></li>
<li><a href="#">下拉标签3</a></li>
</ul>
</li>
</ul>
实践
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件-导航</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--标签式导航-->
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Tab1</a></li>
<li role="presentation"><a href="#">Tab2</a></li>
<li role="presentation"><a href="#">Tab3</a></li>
</ul>
<div class="line"></div>
<!--胶囊式标签式导航-->
<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>
<div class="line"></div>
<!--垂直排列的胶囊式标签式导航-->
<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>
<div class="line"></div>
<!--两端对齐的标签导航-->
<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>
<ul class="nav nav-pills 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>
<div class="line"></div>
<!--禁用状态-->
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation" class="disabled"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<!--带下拉菜单的标签页-->
<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" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉标签
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">下拉标签1</a></li>
<li><a href="#">下拉标签2</a></li>
<li><a href="#">下拉标签3</a></li>
</ul>
</li>
</ul>
<div class="line"></div>
<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" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉标签
<span class="caret"></span>
</a><!--这里要注意使用a标签，如果使用的是button，样式会有差别-->
<ul class="dropdown-menu">
<li><a href="#">下拉标签1</a></li>
<li><a href="#">下拉标签2</a></li>
<li><a href="#">下拉标签3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
网友评论