Twitter的Bootstrap 3导航栏的风格

Question

如何使用Less或css在Twitter的Bootstrap 3中更改导航栏的样式？使用navbar-default和navbar-inverse类提供的不同样式.

Answer 1

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

少用

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

使用CSS

定义你的CSS就像.navbar-default.改变风格.为<nav class"navbar navbar-custom">蓝色设置背景;

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

有关更多样式和简单样式,请参阅:http://twitterbootstrap3navbars.w3masters.nl/