css3 – Twitter的Bootstrap 3导航栏的样式

前端之家收集整理的这篇文章主要介绍了css3 – Twitter的Bootstrap 3导航栏的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用Less或css在Twitter的Bootstrap 3中更改导航栏的样式?使用navbar-default和navbar-inverse类提供的不同样式.

解决方法

就像按钮和面板一样,导航栏将有两个类(参见: https://github.com/twbs/bootstrap/issues/10332).第一个类(.navbar)将设置结构.第二类将设置样式.默认情况下,将有两个样式类:.navbar-default和.navbar-inverse.要更改导航栏的样式,您必须更改这些样式类的样式.执行此操作的最佳方法是使用Less并重新编译Bootstrap.

使用更少

.navbar-default和.navbar-inverse的变量在variables.less中设置并由navbar.less使用.要定义自定义导航栏样式,您可以修改.navbar-default或.navbar-inverse的变量并重用此类.如果您不想更改原始代码.创建一个customnavbar.less文件(不要忘记在bootstrap.less中导入这个)并将.navbar-default部分从navbar.less复制到此文件.重命名并设置变量.是.见这里:Change twitter bootstrap 3.0 navbar class background color in less将背景设置为蓝色.

使用CSS

像.navbar-default一样定义你的css.改变风格.是. for< nav class“navbar navbar-custom”>并将背景设置为蓝色;

.navbar-custom {background-color:#0000FF;}

如需更多款式和款式,请参阅:http://twitterbootstrap3navbars.w3masters.nl/

猜你在找的CSS相关文章