Twitter Bootstrap 3 导航栏的风格答案

【问题标题】：Style of Twitter's Bootstrap 3 navbarTwitter Bootstrap 3 导航栏的风格
【发布时间】：2013-09-27 10:58:21
【问题描述】：

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

【问题讨论】：

到目前为止您尝试过什么？你在问一个问题吗？你为什么要回答你自己的问题？我认为 Stack 可以帮助人们解决问题，而不是让他们访问您自己的网站或 Pub
@kougiland，见：meta.stackexchange.com/questions/17845/…
我不禁认为这看起来像是一个卖点的练习。回答你自己的问题很好，但是这个问题远没有建设性，并且重复了 Bootstrap 文档
@Bojangles Bootstrap 的文档没有告诉您如何设置导航栏的样式，请参阅：getbootstrap.com/components/#navbar。文档仅处理导航栏的结构。

标签： css twitter-bootstrap less twitter-bootstrap-3 navbar

【解决方案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/

【讨论】：