如何使用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/