如何使用 Less 或 css 在 Twitter 的 Bootstrap 3 中更改导航栏的样式？使用navbar-default和navbar-inverse类提供的不同样式。
问问题
16850 次
1 回答
10
就像按钮和面板一样，导航栏将有两个类（参见：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 复制到此文件。重命名并设置变量。请参见此处：将twitter bootstrap 3.0 导航栏类背景颜色更改为 less以将背景设置为蓝色。
使用 CSS
定义你的 css 就像.navbar-default. 要改变风格。为<nav class"navbar navbar-custom">并将背景设置为蓝色；
.navbar-custom { background-color: #0000FF;}
有关更多样式和简单样式，请参见：http: //twitterbootstrap3navbars.w3masters.nl/
于 2013-09-22T13:06:08.880 回答