twitter-bootstrap Twitter 的 Bootstrap 3 导航栏的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18944136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style of Twitter's Bootstrap 3 navbar
提问by Bass Jobsen
Howto change the styles of navbars in Twitter's Bootstrap 3 using Less or css? Using different styles as provide by the navbar-defaultand navbar-inverseclasses.
如何使用 Less 或 css 在 Twitter 的 Bootstrap 3 中更改导航栏的样式？使用navbar-default和navbar-inverse类提供的不同样式。
回答by Bass Jobsen
Just like buttons and panel a navbar will have two classes (see: https://github.com/twbs/bootstrap/issues/10332). The first class (.navbar) will set the structure. The second class will set the styling. By default there will be two classes for styling: .navbar-defaultand .navbar-inverse. To change the style of your navbar you have to change the styles of these styling classes. The best way to do this is using Less and recompile Bootstrap.
就像按钮和面板一样，导航栏将有两个类（请参阅：https: //github.com/twbs/bootstrap/issues/10332）。第一个类 ( .navbar) 将设置结构。第二个类将设置样式。默认情况下，将有两个样式类：.navbar-default和.navbar-inverse. 要更改导航栏的样式，您必须更改这些样式类的样式。最好的方法是使用 Less 并重新编译 Bootstrap。
Using Less
少用
The variables for .navbar-defaultand .navbar-inverseare set in variables.less and used by navbar.less. To define a custom navbar style you could modify the variable for .navbar-defaultor .navbar-inverseand reuse this classes. If you don't want to change the original code. Create an customnavbar.less file (don't forget ti import this in bootstrap.less) and copy the .navbar-defaultpart from navbar.less to this file. Rename and set the variables. B.e. see here: Change twitter bootstrap 3.0 navbar class background color in lessto set the background to blue.
为变量.navbar-default和.navbar-inverse在variables.less设置和navbar.less使用。要定义自定义导航栏样式，您可以修改.navbar-default或的变量并重.navbar-inverse用此类。如果您不想更改原始代码。创建一个 customnavbar.less 文件（不要忘记在 bootstrap.less 中导入它）并将.navbar-defaultnavbar.less 中的部分复制到这个文件中。重命名并设置变量。请参见此处：在 less 中更改 twitter bootstrap 3.0 导航栏类背景颜色以将背景设置为蓝色。
Using CSS
使用 CSS
Define your css just like .navbar-default. To change the style. B.e. for <nav class"navbar navbar-custom">and set background to blue;
像.navbar-default. 要改变风格。用于<nav class"navbar navbar-custom">并将背景设置为蓝色；
.navbar-custom { background-color: #0000FF;}
.navbar-custom { background-color: #0000FF;}
For more styles and easy styling see: http://twitterbootstrap3navbars.w3masters.nl/
有关更多样式和简单样式，请参阅：http: //twitterbootstrap3navbars.w3masters.nl/
