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

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

具体代码如下所示：

data-target="#example-navbar-collapse">

切换导航

data-target="#example-navbar-collapse">

切换导航

菜鸟教程

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://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实现渐变顶部固定自适应导航栏，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。