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

最新推荐文章于 2024-06-04 08:58:47 发布

涂家豪

最新推荐文章于 2024-06-04 08:58:47 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/tujiahao1/article/details/94037611

bootstrap 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现网页顶部菜单在滚动时不消失的效果，以及底部版权信息的固定显示。通过不同的nav class属性，展示了三种场景：顶部菜单始终可见、顶部菜单在滚动时隐藏以及底部版权信息的位置不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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