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
投稿
猜你喜欢
- 大家做网站,特别是自己写的代码,常常担心被一些黑客入侵服务器,从而导致网站代码被盗,给自己带来一些损失。那么我们怎么样做,就算黑客盗了你的代
- 前言21世纪是信息的世纪,综合国力的竞争在很大程度上是信息的竞争,更是信息利用率的竞争。近年来,随着“数字地球”和“数字国土”战略的提出和实
- 什么是合并多行字符串(连接字符串)呢,例如: SQL> desc test; Name Type Nullable Default C
- 双屏不是什么新鲜事,不过相信国内前端工程师还是用单屏的多,前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和AL
- 我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧我把class分为2种,布局class,风格class,布局class是骨架,风
- 我对这两种连接方式认识不够深,似乎朋友们对此也没有定论。请问哪一种更好呢?DSN是采用数据源的连接方式,其使用方法是: Conn.
- 1、二维数组声明方式是下面这样的:var images=new Array(); //先声明一维 for(var i=0;i<10;i
- 在VBScript中,有一个On Error Resume Next语句,它使脚本解释器忽略运行期错误并继续脚本代码的执行。接着该脚本可以检
- 如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegat
- 以下的文章主要是介绍SQL Server数据转换服务的4妙用之执行一些自动化的操作。在SQL Server数据库的实际操作管理中,数据库管理
- 打开VS2013 —> 工具 —> 选项 —> 环境 —> 字体和颜色 —> 纯文本(显示项中) —>
- asp正则表达式检测字符串是否是数字及字母。<% '函数:CheckString(strng) '
- 算法是计算机科学中一个重要的研究方向,是解决复杂问题的关键。在计算机世界中,算法无处不在。数据库是存储数据和执行大批量计算的场所,在数据库中
- 在Oracle 8i版本之前,使用internal用户来执行数据库的启动和关闭以及create database等操作;从8i版本以后,Or
- 如何制作关联的下拉菜单?看看代码:<form name=f1 METHOD="POST">
- up.htm'::::::: 此程序属扬子原创 ::::::::::::::::::':::::: 在sql2000,200
- 1.计算机语言的基本概念 计算机语言(Computer Language) 指用于人与计算机之间的通信。2.解释型和编译型语言的区别 编译型
- 在 MySQL下,在进行中文模糊检索时,经常会返回一些与之不相关的记录,如查找 "%a%" 时,返回的可能有中文字符,却
- uniapp页面跳转的几种方式一、uni.navigateTo定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBac
- “/xxxxx”应用程序中的服务器错误。 -------------------------------------------------