您的位置：首页 > Web前端 > BootStrap

看程序学bootstrap28-组件之 顶部底部

2019-06-28 19:31 1251 查看

步骤 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航