响应式前端框架Bootstrap系列（9）导航条与导航栏

客官°小女子只卖身不卖艺 2021-09-14 14:12 672阅读 0赞

导航条，是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外，还可能有搜索、登录和注册等功能块，常位于网页中的最顶部。

## 导航条 ##

bs提供的导航条有两种：标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示，胶囊式用.nav .nav-pills表示，用active表示选中。当胶囊式导航条加上nav-stacked样式，则显示为垂直布局。若需要导航条两端对齐时，可添加样式nav-justified即可。演示代码：

<div class="container">
    	<p>标签式导航条</p>
    	<ul class="nav nav-tabs">
    		<li class="active">
    			<a>首页</a>
    		</li>
    		<li>
    			<a>API</a>
    		</li>
    		<li>
    			<a>文档</a>
    		</li>
    		<li>
    			<a>下载</a>
    		</li>
    		<li>
    			<a>帮助</a>
    		</li>
    	</ul>
    	<br />
    	<p>胶囊式的导航条</p>
    	<ul class="nav nav-pills">
    		<li class="active">
    			<a>首页</a>
    		</li>
    		<li>
    			<a>API</a>
    		</li>
    		<li>
    			<a>文档</a>
    		</li>
    		<li>
    			<a>下载</a>
    		</li>
    		<li>
    			<a>帮助</a>
    		</li>
    	</ul>
    	<br />
    	<p>垂直式胶囊式的导航条</p>
    	<ul class="nav nav-pills nav-stacked">
    		<li class="active">
    			<a>首页</a>
    		</li>
    		<li>
    			<a>API</a>
    		</li>
    		<li>
    			<a>文档</a>
    		</li>
    		<li>
    			<a>下载</a>
    		</li>
    		<li>
    			<a>帮助</a>
    		</li>
    	</ul>
    </div>

效果图：

![SouthEast][]

下面是一段带下拉列的导航条演示代码：

<div class="container" style="height: 1000px;">
    	<p>带下拉列式胶囊式的导航条</p>
    	<ul class="nav nav-pills">
    		<li>
    			<a>首页</a>
    		</li>
    		<li>
    			<a>API</a>
    		</li>
    		<li>
    			<a>文档</a>
    		</li>
    		<li class="dropdown active">
    			<a class="dropdown-toggle" data-toggle="dropdown">
    				下载
    				<span class="caret"></span>
    			</a>
    			<ul class="dropdown-menu">
    				<li>
    					<a>本地下载</a>
    				</li>
    				<li>
    					<a>高速下载</a>
    				</li>
    			</ul>
    		</li>
    		<li>
    			<a>帮助</a>
    		</li>
    	</ul>
    </div>

效果图：

![SouthEast 1][]  
导航条还可以实现类似于route功能的效果，演示代码：

<body>
    	<div class="container">
    		<ul id="myTab" class="nav nav-tabs">
    			<li class="active">
    				<a data-toggle="tab" href="#m1">首页</a>
    			</li>
    			<li>
    				<a data-toggle="tab" href="#m2">API</a>
    			</li>
    			<li class="dropdown">
    				<a class="dropdown-toggle" data-toggle="dropdown">
    					下载
    					<span class="caret"></span>
    				</a>
    				<ul class="dropdown-menu">
    					<li>
    						<a data-toggle="tab" href="#m3_1">本地下载</a>
    					</li>
    					<li>
    						<a data-toggle="tab" href="#m3_2">高速下载</a>
    					</li>
    				</ul>
    			</li>
    		</ul>
    		<div class="tab-content">
    			<div id="m1" class="tab-pane fade in active">
    				<h3>首页</h3>
    			</div>
    			<div id="m2" class="tab-pane fade">
    				<h3>API</h3>
    			</div>
    			<div id="m3_1" class="tab-pane fade">
    				<h3>本地下载</h3>
    			</div>
    			<div id="m3_2" class="tab-pane fade">
    				<h3>高速下载</h3>
    			</div>
    		</div>
    	</div>
    </body>
    <script>
    	$(function() {
    		$('#myTab a:last').tab('show');
    		$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    			console.log(e.target); // 激活的标签页
    			console.log(e.relatedTarget); // 前一个激活的标签页
    		});
    		$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    			console.log(e.target); // 激活的标签页
    			console.log(e.relatedTarget); // 前一个激活的标签页
    		});
    	})
    </script>

效果图：

![SouthEast 2][]  
（注）show.bs.tab，该事件在标签页显示时触发，但是必须在新标签页被显示之前。

（注）shown.bs.tab，该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。

bs还提供了一种面包屑导航，类似于“主页面/副页面/内容”的显示方式，使用breadcrumb样式即可，演示代码：

效果图：

![SouthEast 3][]

## 导航栏 ##

bs提供的导航栏，通常把元素包含在<nav>标签内，导航栏的相关样式有：

.navbar .navbar-default：放置在<nav>标签，表示默认导航栏  
.navbar-header和.navbar-brand：用于定义网站标题  
.nav .navbar-nav：表示菜单条  
.navbar-left和.navbar-right：表示左右对齐   
.navbar-fixed-top：固定在顶部  
.navbar-fixed-bottom：固定在底部  
.navbar-inverse：反色导航栏

下面以模拟阿里云官网首页导航栏为例，演示代码：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Bootstrap 导航栏</title>
    		<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
    		<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
    		<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script>
    		<style type="text/css">
    			.header {
    				background-color: #19205D;
    			}
    			
    			.navbar-part1 {
    				transition: background-color .25s linear;
    				background-color: rgba(255, 255, 255, 0);
    			}
    			
    			.navbar-part1 .logo {
    				font-family: "黑体";
    				font-size: 22px;
    				color: white;
    				text-decoration: none;
    			}
    			
    			.navbar-part1 .navbar-part1-language {
    				background-color: #000000;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="header">
    			<nav class="navbar navbar-default navbar-inverse navbar-part1">
    				<div class="container-fluid">
    					<div class="navbar-header">
    						<div class="navbar-brand">
    							<a href="javascript:(0);" class="logo">标题</a>
    						</div>
    					</div>
    					<ul class="nav navbar-nav navbar-right navbar-part1-menu">
    						<li class="dropdown">
    							<a class="dropdown-toggle" data-toggle="dropdown">
    								<span class="glyphicon glyphicon-globe"></span> 中国站
    								<span class="caret"></span>
    							</a>
    							<ul class="dropdown-menu navbar-part1-language">
    								<li>
    									<a>中国站</a>
    								</li>
    								<li>
    									<a>International - English</a>
    								</li>
    								<li>
    									<a>繁体中文</a>
    								</li>
    								<li>
    									<a>日本サイト</a>
    								</li>
    							</ul>
    						</li>
    						<li>
    							<a href="javascript:(0);">控制台</a>
    						</li>
    						<li>
    							<a href="javascript:(0);">文档</a>
    						</li>
    						<li>
    							<a href="javascript:(0);">备案</a>
    						</li>
    						<li>
    							<a href="javascript:(0);">邮箱</a>
    						</li>
    						<li>
    							<a href="javascript:(0);"><span class="glyphicon glyphicon-log-in"></span> 登录</a>
    						</li>
    					</ul>
    					<form class="navbar-form navbar-right">
    						<div class="form-group">
    							<input type="text" class="form-control" placeholder="搜索" />
    						</div>
    						<a href="javascript:(0);" class="btn btn-info btn-md">
    							<span class="glyphicon glyphicon-search"></span>
    						</a>
    					</form>
    				</div>
    			</nav>
    		</div>
    	</body>
    	<script>
    		//总导航
    		$(".header").hover(function() {
    			$(".navbar-part1").css("background-color", "#373D41");
    			$(".navbar-part2").css("background-color", "#373D41");
    		}, function() {
    			$(".navbar-part1").css("background-color", "rgba(255,255,255,0)");
    			$(".navbar-part2").css("background-color", "rgba(255,255,255,0)");
    		});
    
    		// navbar-part1(导航1)
    		$("nav").css("margin-bottom", "0px");
    		$(".navbar-part1 ul li a").css("color", "white");
    		$(".navbar-part1-menu>li").hover(function() {
    			$(this).find(">a").css("color", "#00C1DE");
    		}, function() {
    			$(this).find(">a").css("color", "white");
    		});
    		$(".navbar-part1-language>li").hover(function() {
    			$(this).find(">a").css("color", "#00C1DE");
    			$(this).find(">a").css("background-color", "rgba(255,255,255,0)");
    		}, function() {
    			$(this).find(">a").css("color", "white")
    		});
    		$(".dropdown").css("cursor", "pointer");
    		$(".dropdown").click(function(e) {
    			var target = e.target;
    			if($(target).attr("data-toggle") != undefined) {
    				e.preventDefault();
    				e.stopPropagation();
    			}
    		});
    		$('.dropdown').mouseover(function() {
    			$(this).addClass('open');
    		}).mouseout(function() {
    			$(this).removeClass('open');
    		});
    	</script>
    
    </html>

效果图：

![SouthEast 4][]

[SouthEast]: /images/20210813/a8bbf662a1924001a85aecf016e473a6.png
[SouthEast 1]: /images/20210813/03933dea48184bf68c6198d75d4435b8.png
[SouthEast 2]: /images/20210813/6bca295fc3634d02b286e62b46db1a3c.png
[SouthEast 3]: /images/20210813/6528392d3bb7462eba07dc2e8201937b.png
[SouthEast 4]: /images/20210813/407602c26d424cf2896041fc6d276b6b.png