固定导航栏
Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的 位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为 随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像 素的内边距（padding），内边距的值可以根据您的需要进行设置。
固定到顶部
如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。
固定到底部
如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。
静态的顶部
如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距（padding）。
navbar-inverse样式：设置黑底白字样式的导航栏
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">
</head>
<body style="padding:50px;">
<h2>8. 固定到顶部的导航栏</h2>
<!-- navbar-fixed-top样式：设置固定顶部导航栏 -->
<div class="container" style="padding:40px">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"> 固定到顶部的导航栏</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="my-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">.NET</a>
</li>
<li><a href="#">PHP</a>
</li>
<li><a href="#">HTML5</a>
</li>
<li><a href="#">Java</a>
</li>
</ul>
</div>
</nav>
</div>
<h2>9. 固定到底部的导航栏</h2>
<!-- navbar-fixed-bottom样式：设置固定底部导航栏 -->
<div class="container" style="padding:40px">
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">固定到底部的导航栏</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav1" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="my-nav1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">.NET</a>
</li>
<li><a href="#">PHP</a>
</li>
<li><a href="#">HTML5</a>
</li>
<li><a href="#">Java</a>
</li>
</ul>
</div>
</nav>
</div>
<h2>10. 静态固定到顶部的导航栏</h2>
<!-- navbar-static-top样式：设置静态导航栏 -->
<div class="container" style="padding:40px">
<nav class="navbar navbar-default navbar-static-top " role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">静态固定到顶部的导航栏</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">.NET</a>
</li>
<li><a href="#">PHP</a>
</li>
<li><a href="#">HTML5</a>
</li>
<li><a href="#">Java</a>
</li>
</ul>
</div>
</nav>
</div>
<h2>11. 设置黑底白字样式的导航栏</h2>
<!-- navbar-inverse样式：设置黑底白字样式的导航栏 -->
<div class="container" style="padding:40px">
<nav class="navbar navbar-default navbar-inverse " role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">黑底白字导航栏</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">.NET</a>
</li>
<li><a href="#">PHP</a>
</li>
<li><a href="#">HTML5</a>
</li>
<li><a href="#">Java</a>
</li>
</ul>
</div>
</nav>
</div>
<h2>12. 面包屑导航栏</h2>
<!-- breadcrumb样式：设置面包屑导航栏 -->
<ol class="breadcrumb">
<li><a href="#">程序设计</a></li>
<li><a href="#">Java语言</a></li>
<li><a href="#">JSP</a></li>
</ol>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>显示效果：
页面缩小后：
