Bootstrap实现渐变顶部固定自适应导航栏
作者：lijiao 发布时间：2023-08-23 00:52:40
标签：bootstrap,导航栏
本文实例为大家分享了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实现渐变顶部固定自适应导航栏，希望对大家有所帮助
0
投稿猜你喜欢
- 先导入模块：from django.core.paginator import Paginator, EmptyPage, PageNotA
在输入框里面预设一段提示文字，当焦点在输入框的时候清空这段文字，这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计：这种设计- 一、高级异常回顾异常相关的语句：try-except：用来捕获异常的通知try-finally：用来做一定要做的事reise：用来发生异常通
- python进行矩阵运算的方法：1、矩阵相乘>>>a1=mat([1,2]); >>>a2
- ImageGrab模块用于将当前屏幕的内容或者剪贴板上的内容拷贝到PIL图像内存。当前版本只支持windows系统。一、ImageGrab模
- var obj=document.getElementById("id");得到的是dom对象，对该对象进行操作的时候使
- 其实这个问题来源于笔者的横坐标太多了，然后生成的那个figure框框太小，导致坐标重叠，而输出的图片是需要批量保存的，总不能每次都拉长截图吧
- zip()的作用先看一下语法：zip(iter1 [,iter2 [...]]) —> zip objectPython的内置help
- Menu（菜单）组件用于实现顶级菜单、下拉菜单和弹出菜单。何时使用 Menu 组件？Menu 组件通常被用于实现应用程序上的各种菜单，由于该
- 在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页
- banner 设计会严重影响广告投放效果，在此建议相关设计人员，在设计FLASH BANNER的时候考虑到以下问题.1.
- 在计算机科学中，精确的小数计算是一个常见的问题，因为在计算机中使用二进制表示小数时，有些小数可能无法用二进制表示精确的十进制数。这导致了在计
- ajax缓存和编码问题不难解决，下面是解决方法。编码问题默认使用UTF-8，如果一旦发现对象找不到的情况，可能js中输入了中文，同时js的编
- UTC时间转换，最终得到的都是UTC时间。简单来说就是：时间戳（timestamp） 转换-> UTC显示时间（datetime），使
- 有时需要根据项目的实际需求向spider传递参数以控制spider的行为，比如说，根据用户提交的url来控制spider爬取的网站。在这种情
- 今天，在家试试django的model的设置，如何设置的联合主键，我经过查资料和实践，把结果记录如下：例如：class user(Model
- Python 操作 Excel常用工具数据处理是 Python 的一大应用场景，而 Excel 又是当前最流行的数据处理软件。因此用 Pyt
- 本文实例为大家分享了python批量处理图片的具体代码，供大家参考，具体内容如下公司的一个项目要求把所有4096x4096的图片全部转化成2
- Flask-RESTful是一个用于快速创建RESTful API接口的Flask扩展。使用Flask-RESTful可以很快速方便地创建一
- Oracle数据库各类控制语句的使用是本文我们主要要介绍的内容，包括一些逻辑控制语句、Case when的使用、While的使用以及For的
