只这样设置时发现没什么变化，后来想到应该是boostrap给导航栏添加了背景色而覆盖掉了最外层的背景色，后来我给此层div加了更高的高度后发现确实如此。
那么就直接给里面一层加背景色吧：
.bg-color div.navbar.navbar-default{ background: #0C0; }
结果如下：
第一步已经成功，如果我们想给可折叠的状态改变一下样式，比如把文字居中显示怎么办？
由于boostrap使用媒体查询使得网页在一定尺寸时改变样式，那么我们现在是想在可折叠的状态时使文本居中，那么我们就以毒攻毒，也使用媒体查询的方式我们也可以简单粗暴的直接设置其居中（也就是没有下面的@media(max-width:768px)约束条件）。
.bg-color{ background: #0C0; } .bg-color div.navbar.navbar-default{ background: inherit; } @media(max-width:768px){ div.navbar.navbar-default{ text-align: center; } .navbar-header>.navbar-toggle{ float:none; } }
这是简单粗暴的方法（可以发现只是去掉了媒体查询的部分）
.bg-color{ background: #0C0; } .bg-color div.navbar.navbar-default{ background: inherit; } div.navbar.navbar-default{ text-align: center; } .navbar-header>.navbar-toggle{ float:none; }
由于水平居中时那个menu标志有一点碍眼，所以我就把它去掉了：
<div role="navigation"> <div> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button> </div> <div> <ul> <li><a href="https://www.jb51.net/index.html">Home</a></li> <li><a href="https://www.jb51.net/about.html" data-hover="About"> About</a></li> <li><a href="https://www.jb51.net/news.html" data-hover="News">News</a></li> <li><a href="https://www.jb51.net/portfolio.html" data-hover="Portfolio">Portfolio</a></li> <li><a href="https://www.jb51.net/codes.html" data-hover="Codes">Codes</a></li> <li><a href="https://www.jb51.net/contact.html" data-hover="Contact">Contact</a></li> </ul> </div> </div>
效果如下：
至此我们已经完成了导航栏的简单样式改造，如果需要更多，更丰富的样式，我们还可以继续改造。比如给导航栏的链接添加一些hover效果，或再给文本添加响应式样式（可以利用媒体查询实现诸如font-size，color，font-family等等效果的变化），甚至再添加一些动画效果，本节先告一段落，等待后续吧！
以上所述是小编给大家介绍的BooStrap对导航条的改造实践小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: