Twitter的Bootstrap 3导航栏的风格

Question

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

Answer 1

就像按钮和面板一样，导航栏将有两个类（请参阅：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。改变风格。是。对于<nav class"navbar navbar-custom">并将背景设置为蓝色;

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

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