步骤 1 : 贴在顶部(不会消失)
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
padding-top:70px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<button class="btn btn-info">菜单1</button>
<button class="btn btn-success">菜单2</button>
<button class="btn btn-danger">菜单3</button>
</nav>
<div style="white-space:pre">
很多内容 ,下拉才看得见,下拉时,置顶菜单不消失
很多内容 ,下拉才看得见,下拉时,置顶菜单不消失
很多内容 ,下拉才看得见,下拉时,置顶菜单不消失
很多内容 ,下拉才看得见,下拉时,置顶菜单不消失
</div>
步骤 2 : 贴在顶部(会消失)
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
padding-bottom:70px;
}
</style>
<nav class="navbar navbar-default navbar-static-top">
<button class="btn btn-info">菜单1</button>
<button class="btn btn-success">菜单2</button>
<button class="btn btn-danger">菜单3</button>
</nav>
<div style="white-space:pre">
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
很多内容 ,下拉才看得见,下拉时,置顶菜单会消失
</div>
步骤 3 : 贴在底部 (不会消失)
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
body{
padding-bottom:70px;
}
</style>
<div style="white-space:pre">
拉动内容时,置底版权信息位置不变
拉动内容时,置底版权信息位置不变
拉动内容时,置底版权信息位置不变
拉动内容时,置底版权信息位置不变
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div style="text-align:center">
版权所有
</div>
</nav>