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

最新推荐文章于 2024-07-25 16:56:40 发布

黄泽平

最新推荐文章于 2024-07-25 16:56:40 发布

阅读量6.8k

点赞数 9

分类专栏： bootstrap3 前端集合 Bootstrap入门系列及组件归纳应用文章标签： Bootstrap

本文链接：https://blog.csdn.net/zeping891103/article/details/79046560

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

bootstrap3

20 篇文章 2 订阅

订阅专栏

Bootstrap入门系列及组件归纳应用

20 篇文章 2 订阅

订阅专栏

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

导航条

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>

效果图：

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

<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>

效果图：

导航条还可以实现类似于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>

效果图：

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

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

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

<div class="container">
	<div style="width: 200px;">
		<ul class="breadcrumb">
			<li>
				<a href="#">首页</a>
			</li>
			<li>
				<a href="#">下载</a>
			</li>
			<li class="active">高速下载</li>
		</ul>
	</div>
</div>

效果图：

导航栏

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>

效果图：