Twitter的Bootstrap 3导航栏样式

Question

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

- Bass Jobsen

---

你到目前为止尝试了什么？你在问问题吗？为什么要回答自己的问题？我认为 Stack 帮助人们解决问题，而不是让他们访问你自己的网站或用于宣传。 - Gildas.Tambo

@kougiland，参见：http://meta.stackexchange.com/questions/17845/etiquette-for-answering-your-own-question - Bass Jobsen

我不禁认为这看起来像是在刻意追求积分。回答自己的问题是可以的，但这个问题与建设性相去甚远，并且重复了 Bootstrap 文档。 - Bojangles

@Bojangles Bootstrap的文档没有告诉你如何样式化导航栏，请参见：http://getbootstrap.com/components/#navbar。文档仅处理导航栏的结构。 - Bass Jobsen

Answer 1

与按钮和面板一样，导航栏将有两个类（参见：https://github.com/twbs/bootstrap/issues/10332）。第一个类 (.navbar) 设置结构。第二个类设置样式。默认情况下，会有两个样式类: .navbar-default 和 .navbar-inverse。要更改您的导航栏样式，必须更改这些样式类的样式。做到这一点的最好方法是使用 Less 并重新编译 Bootstrap。

使用Less

.navbar-default 和 .navbar-inverse 的变量在 variables.less 中设置，并由 navbar.less 使用。要定义自定义导航栏样式，可以修改 .navbar-default 或 .navbar-inverse 的变量，并重用这些类。如果你不想改变原始代码。创建一个 customnavbar.less 文件（不要忘记在 bootstrap.less 中引入此文件）并将 navbar.less 中的 .navbar-default 部分复制到此文件中。重命名并设置变量。例如：在这里看到如何将背景设置为蓝色：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/。

- Bass Jobsen