bootstrap栅格系统的导航菜单/导航条及其样式详解

作者(出处):百宝箱工作室发布时间:2018年4月3日 22:12:39查阅量:339

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body style="padding: 50px 0; height: 1200px;">
        <!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-03
        	描述:导航条及其样式详解
        	navbar是导航条的基本样式
        	nav与navbar-nav是导航菜单的固定样式组合
        	默认导航菜单用navbar-default样式
        	黑色导航菜单用navbar-inverse样式
        	直角导航菜单用navbar-static-top样式
        	导航菜单固定在底部用navbar-fixed-bottom样式
        	导航菜单固定在顶部用navbar-fixed-bottom样式
        	导航条前面增加logo图标或文字LOGO用navbar-header样式
        	导航条左对齐用navbar-left样式
        	导航条右对齐用navbar-right样式
        	导航里有额外的超链接要给超链接添加navbar-text和navbar-link样式
        	导航里有额外的一行文字需要给文字添加navbar-text样式
        	导航条里只有一个按钮,给按钮添加navbar-btn样式即可
        	导航条里有form表单,需要给form添加navbar-form样式,若要在一行显示表单的内容添加navbar-left样式
        	实战中的导航条应该要做成这样:把container样式所在的div放在nav标签里面。
        -->
		<div class="container">
			<!--1.默认导航菜单用navbar-default样式-->
			<nav class="navbar navbar-default">
				<ul class="nav navbar-nav">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
					<li>
						<a href="#">ASP.NET程序设计与教学</a>
					</li>
					<li>
						<a href="#">C语言教学</a>
					</li>
					<li>
						<a href="#">Office办公软件教学</a>
					</li>
					<li>
						<a href="#">数据库设计与教学</a>
					</li>
				</ul>
			</nav>
			<!--2.黑色导航菜单用navbar-inverse样式-->
			<nav class="navbar navbar-inverse">
				<ul class="nav navbar-nav">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
					<li>
						<a href="#">ASP.NET程序设计与教学</a>
					</li>
					<li>
						<a href="#">C语言教学</a>
					</li>
					<li>
						<a href="#">Office办公软件教学</a>
					</li>
					<li>
						<a href="#">数据库设计与教学</a>
					</li>
				</ul>
			</nav>
			<!--3.直角导航菜单用navbar-static-top样式-->
			<nav class="navbar navbar-inverse navbar-static-top">
				<ul class="nav navbar-nav">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
					<li>
						<a href="#">ASP.NET程序设计与教学</a>
					</li>
					<li>
						<a href="#">C语言教学</a>
					</li>
					<li>
						<a href="#">Office办公软件教学</a>
					</li>
					<li>
						<a href="#">数据库设计与教学</a>
					</li>
				</ul>
			</nav>
			<!--4.导航菜单固定在底部用navbar-fixed-bottom样式-->
			<nav class="navbar navbar-inverse navbar-static-top navbar-fixed-bottom">
				<ul class="nav navbar-nav">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
					<li>
						<a href="#">ASP.NET程序设计与教学</a>
					</li>
					<li>
						<a href="#">C语言教学</a>
					</li>
					<li>
						<a href="#">Office办公软件教学</a>
					</li>
					<li>
						<a href="#">数据库设计与教学</a>
					</li>
				</ul>
			</nav>
			<!--5.导航菜单固定在顶部用navbar-fixed-bottom样式-->
			<nav class="navbar navbar-inverse navbar-static-top navbar-fixed-top">
				<ul class="nav navbar-nav">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
					<li>
						<a href="#">ASP.NET程序设计与教学</a>
					</li>
					<li>
						<a href="#">C语言教学</a>
					</li>
					<li>
						<a href="#">Office办公软件教学</a>
					</li>
					<li>
						<a href="#">数据库设计与教学</a>
					</li>
				</ul>
			</nav>
			<!--6.直角导航菜单用navbar-static-top样式-->
			<nav class="navbar navbar-inverse navbar-static-top">
				<!--导航条前面增加logo图标或文字LOGO用navbar-header样式-->
				<div class="navbar-header col-lg-2">
					<a href="#"><img class="img-responsive" src="http://www.baibaox.com/images/logo3.jpg" alt="logo" /></a>
				</div>
				<!--导航条左对齐用navbar-left样式-->
				<ul class="nav navbar-nav navbar-left">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
					<li>
						<a href="#">平面设计与制作</a>
					</li>
					<li>
						<a href="#">C#.NET程序设计教学</a>
					</li>
				</ul>
				<!--导航条右对齐用navbar-right样式-->
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">注册帐号</a>
					</li>
					<li>
						<a href="#">登录系统</a>
					</li>
					</li>
				</ul>
			</nav>
			<!--7.有链接与文字的导航条-->
			<nav class="navbar navbar-inverse navbar-static-top">
				<!--导航条前面增加logo图标或文字LOGO用navbar-header样式-->
				<div class="navbar-header col-lg-2">
					<a href="#"><img class="img-responsive" src="http://www.baibaox.com/images/logo3.jpg" alt="logo" /></a>
				</div>
				<!--导航条左对齐用navbar-left样式-->
				<ul class="nav navbar-nav navbar-left">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
				</ul>
				<!--导航里有链接要给链接添加navbar-text和navbar-link样式-->
				<a class="navbar-text navbar-link" href="#">photoshop</a>
				<!--导航里有文字需要给文字添加navbar-text样式-->
				<p class="navbar-text">百宝箱工作室微课堂教学欢迎您QQ 425680248</p>
				<!--导航条右对齐用navbar-right样式-->
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">注册帐号</a>
					</li>
					<li>
						<a href="#">登录系统</a>
					</li>
					</li>
				</ul>
			</nav>
			<!--8.有表单的导航条-->
			<nav class="navbar navbar-inverse navbar-static-top">
				<!--导航条前面增加logo图标用navbar-header样式-->
				<div class="navbar-header col-lg-2">
					<a href="#"><img class="img-responsive" src="http://www.baibaox.com/images/logo3.jpg" alt="logo" /></a>
				</div>
				<!--导航条左对齐用navbar-left样式-->
				<ul class="nav navbar-nav navbar-left">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
				</ul>
				<!--如果导航条里只有一个按钮,添加navbar-btn样式即可-->
				<button type="button" class="btn btn-default navbar-btn">站外搜索</button>
				<!--如果导航条里有form表单,需要给form添加navbar-form样式,要在一行显示表单的内容添加navbar-left样式-->
				<form action="#" class="navbar-form navbar-left">
					<input type="text" class="form-control" />
					<button class="btn btn-default">站内搜索</button>
				</form>
				<!--导航条右对齐用navbar-right样式-->
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">注册帐号</a>
					</li>
					<li>
						<a href="#">登录系统</a>
					</li>
					</li>
				</ul>
			</nav>
		</div>
		<!--9.实战中导航条应该要做成这样:把container样式所在的div放在nav标签里面-->
		<nav class="navbar navbar-inverse navbar-static-top">
			<div class="container">
				<!--导航条前面增加logo图标用navbar-header样式-->
				<div class="navbar-header col-lg-2">
					<a href="#"><img class="img-responsive" src="http://www.baibaox.com/images/logo3.jpg" alt="logo" /></a>
				</div>
				<!--导航条左对齐用navbar-left样式-->
				<ul class="nav navbar-nav navbar-left">
					<li>
						<a href="#">网页设计与制作</a>
					</li>
					<li class="active">
						<a href="#">网站建设与维护</a>
					</li>
				</ul>
				<!--如果导航条里只有一个按钮,添加navbar-btn样式即可-->
				<button type="button" class="btn btn-default navbar-btn">站外搜索</button>
				<!--如果导航条里有form表单,需要给form添加navbar-form样式,要在一行显示表单的内容添加navbar-left样式-->
				<form action="#" class="navbar-form navbar-left">
					<input type="text" class="form-control" />
					<button class="btn btn-default">站内搜索</button>
				</form>
				<!--导航条右对齐用navbar-right样式-->
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">注册帐号</a>
					</li>
					<li>
						<a href="#">登录系统</a>
					</li>
					</li>
				</ul>
			</div>
		</nav>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息