具体代码如下所示:
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
style.css
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实现渐变顶部固定自适应导航栏。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。