Bootstrap实现渐变顶部固定自适应导航栏_网络技术

Bootstrap实现渐变顶部固定自适应导航栏

发布时间 - 2026-01-10 22:24:28 点击率：次

本文实例为大家分享了Bootstrap实现渐变顶部固定自适应导航栏的具体代码，供大家参考，具体内容如下

具体代码如下所示：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title></title> 
 <meta charset="utf-8" />
 <link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css" /> 
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
 <nav class="navbar navbar-fixed-top my-navbar" role="navigation"> 
 <div class="container-fluid"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">菜鸟教程</a> 
  </div> 
  <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">SVN</a></li> 
   <li><a href="#">Asp.Net</a></li> 
  </ul> 
  </div> 
 </div> 
 </nav> 
 <div class="bg"></div> 
 <script> 
 $(window).scroll(function () { 
  if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav"); 
  }else {$(".navbar-fixed-top").removeClass("top-nav");} 
 })</script> 
</body></html>

style.css

 html, body {width:100%;height:100%;} /*非常重要的样式让背景图片100%适应整个屏幕*/ 
 .bg {display: table;width: 100%;height: 100%;padding: 100px 0;text-align: center;color: #fff;background: url(http://www.xiandanke.cn/Image/intro-bg.jpg) no-repeat bottom center;background-color: #000;background-size: cover;} 
 .my-navbar {padding:20px 0;transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;} 
 .my-navbar a{background:transparent !important;color:#fff !important} 
 .my-navbar a:hover {color:#45bcf9 !important;background:transparent;outline:0} 
 .my-navbar a {transition: color 0.5s ease-in-out;}/*-webkit-transition ;-moz-transition*/ 
 .top-nav {padding:0;background:#000;} 
 button.navbar-toggle {background-color:#fbfbfb;}/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/ 
 button.navbar-toggle > span.icon-bar {background-color:#dedede}

真的只用了9行代码，原理挺简单的，但是要注意以下几点

1.html,body{width:100%;height:100%} ,必须写这个样式，才能让html中的子元素100%占满整个屏幕，也就是要实现背景图片占满100%的整个屏幕

2.bootstrap中的类 nav-fixed-top的意义在于固定导航栏在顶部

3.添加scroll 事件，在切换class的时候实现动态的效果

4.整个效果的实现原理是使用了transition 属性,transition属性的使用方法是：

以上所述是小编给大家介绍的Bootstrap实现渐变顶部固定自适应导航栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # 导航栏 # 详解bootstrap导航栏.nav与.navbar区别 # BootStrap学习笔记之nav导航栏和面包屑导航 # BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏） # 解决bootstrap导航栏navbar在IE8上存在缺陷的方法 # Bootstrap编写导航栏和登陆框 # Bootstrap3制作自己的导航栏 # Bootstrap导航栏各元素操作方法(表单、按钮、文本) # Bootstrap实现响应式导航栏效果 # bootstrap自定义样式之bootstrap实现侧边导航栏功能 # 小编 # 自适应 # 都是 # 占满 # 菜鸟 # 在此 # 要注意 # 能让 # 给大家 # 几点 # 所示 # 非常重要 # 大家分享 # 所述 # 给我留言 # 具体内容 # 感谢大家 # 疑问请 # 有任何 # 使用了

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Laravel实用技巧：简单判断不同请求类型

下一篇：AI时代软件工程师如何破局？未来必备技能全解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Laravel实用技巧：简单判断不同请求类型