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

最新推荐文章于 2023-12-25 16:50:37 发布

涂家豪

最新推荐文章于 2023-12-25 16:50:37 发布

阅读量115

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/tujiahao1/article/details/94037611

版权

bootstrap 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

步骤 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>

涂家豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
看程序学bootstrap28-组件之顶部底部

步骤 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.c...
复制链接

扫一扫