注意的点：
1.设置body属性：position: relative;
2.设置body属性：data-target=’#导航条的id’
3.设置body属性：data-offset;来表示内容距顶部的高度范围
4.让导航的a标签来通过id确定应该显示的标题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/holder.js"></script>
<title>Bootstrap</title>
</head>
<style type="text/css">
*{
font-family: 微软雅黑;
}
body{
position: relative;
padding-top: 60px;
}
</style>
<body data-spy='scroll' data-target='#mynavbar' data-offset='200'>
<div class="container">
<!-- navbar begining -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar"> <!-- navbar-default 默认灰色； navbar-inverse :黑灰色-->
<div class="container">
<div class="navbar-header">
<!-- 标题 -->
<a href="#" class="navbar-brand">Brand</a><!-- 也可以换成logo图片 -->
<!-- 设置合并后的菜单按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed_navbar">
<span class="sr-only">Toggle navigation</span>
<!-- 三条横线 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 可折叠的菜单栏 -->
<div id="collapsed_navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#java">java</a></li>
<li><a href="#js">javascript</a></li>
<li><a href="#bs">bootstrap</a></li>
<li><a href="#vue">vue</a></li>
<li><a href="#jq">jquery</a></li>
</ul>
</div>
</div>
</nav>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<h2 id="java">java</h2>
</div>
</div>
<div class="panel-body">
<img src="holder.js/1100x500">
<p>java is good!</p>
</div>
<div class="panel-heading">
<div class="panel-title">
<h2 id="js">javascript</h2>
</div>
</div>
<div class="panel-body">
<img src="holder.js/1100x500">
<p>javascript is good!</p>
</div>
<div class="panel-heading">
<div class="panel-title">
<h2 id="bs">bootstrap</h2>
</div>
</div>
<div class="panel-body">
<img src="holder.js/1100x500">
<p>bootstrap is good!</p>
</div>
<div class="panel-heading">
<div class="panel-title">
<h2 id="vue">vue</h2>
</div>
</div>
<div class="panel-body">
<img src="holder.js/1100x500">
<p>vue is good!</p>
</div>
<div class="panel-heading">
<div class="panel-title">
<h2 id="jq">jquery</h2>
</div>
</div>
<div class="panel-body">
<img src="holder.js/1100x500">
<p>jquery is good!</p>
</div>
</div>
</div>
</body>
</html>
