Bootstrap组件之导航条
.navbar——设置nav元素为导航条组件；
.navbar-default——指定导航条组件为默认主题；
.navbar-inverse——指定导航条组件为黑色主题；
.navbar-fixed-top——设置导航条组件固定在顶部；
.navbar-fixed-bottom——设置导航条组件固定在底部；
.container-fluid——设置宽度充满父元素，即为100%；
.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-toggle——设置button元素为导航条组件的切换钮；
.collapsed——设置button元素为在视口小于768px时才显示；
.navbar-brand——设置导航条组件内的品牌图标；
.collapse——设置div元素为视口大于768px时显示；
.navbar-collapse——设置div元素为导航条组件各列表项的父元素；
.navbar-nav——设置ul为导航条组件内的列表元素;
.navbar-left——设置导航条内元素向左对齐；
.navbar-right——设置导航条内元素向右对齐；
.navbar-form——为导航条组件内部的表单组件；
.navbar-btn——为导航条组件内部的按钮样式；
.navbar-text——为导航条组件内部的文本样式；
.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；
.breadcrumb——设置列表元素显示为路径导航组件；
<!DOCTYPE html>
<html lang="zh_CN">
<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>饭盒儿——发现身边不一样的世界</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
h1{
margin-top:80px;
margin-bottom: 80px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mytab" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fun Here</a>
</div>
<div class="collapse navbar-collapse" id="mytab">
<p class="navbar-text">发现身边不一样的世界</p>
<ul class="nav navbar-nav">
<li class="active" role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">新闻资讯</a></li>
<li role="presentation"><a href="#">关于我们</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<label class="sr-only"></label>
<input type="text" class="form-control" placeholder="搜索"/>
</div>
<button type="submit" class="btn btn-default navbar-btn">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li role="presentation"><a href="#">联系我们</a></li>
<li class="dropdown" role="presentation">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
产品分类
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">男装</a></li>
<li role="presentation"><a href="#" role="menuitem" tabindex="-1">女装</a></li>
</ul>
</li>
</ul>
<p class="navbar-text navbar-right"><a href="#" class="navbar-link">收藏</a>本网站</p>
</div>
</div>
</nav>
<script>
$(".nav a").click(function(e){
e.preventDefault();
$(this).tab("show");
})
</script>
<div class="container">
<h1>不疯魔不成活</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>不作死就不会死</h1>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<ol class="breadcrumb">
<li role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">新闻资讯</a></li>
<li role="presentation"><a href="#">关于我们</a></li>
</ol>
</nav>
</body>
</html>
来源http://www.mamicode.com/
