Question

我正在尝试更改引导导航栏的颜色，就像在此页面中一样 http://bootswatch.com/

他们在哪里设置了这种颜色？在我看来，他们实际上使用的是标准CSS

Answer 1

如果您检查该页面，您会发现此颜色位于.navbar-default级别。您可以在bootstrap.css中更改为background-color: #2c3e50，或者将您的css文件改为

.navbar-default {
    background-color: #2c3e50;
}

并在bootstrap.css

之后包含此文件

Answer 2

通过Dev Tools查看它，看起来他们在bootstrap.css文件中设置了以下规则：

.navbar-default {
  background-color: #2c3e50;
  border-color: transparent;
}

只需确保您的导航栏包含navbar-default类。

Answer 3

导航栏中的字体颜色

您可以查看以下代码

.navbar 
{
    background-image: -webkit-linear-gradient(#54b4eb, #2fa4e7 60%, #1d9ce5);
    background-image: -o-linear-gradient(#54b4eb, #2fa4e7 60%, #1d9ce5);
    background-image: linear-gradient(#54b4eb, #2fa4e7 60%, #1d9ce5);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',     
endColorstr='#ff1d9ce5', GradientType=0);
    border-bottom: 1px solid #178acc;
    filter: none;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

如果您在背景图像中看到navbar css，则会添加线性渐变值

此致中号

Answer 4

他们在bootstrap.css文件中设置它。它在网站上说通过替换现有的bootstrap.css来安装他们的产品，所以这是有道理的。一般情况下，我建议在您自己的css文件中覆盖引导功能或使用内联css，除非您有特定的理由这样做。

Answer 5

正如@ aw04指出的那样，样式来自他们的自定义boostrap.css文件，因此如果您不想使用主题，请从那里正确地进行。

但是，如果您只是不喜欢这种颜色，则需要创建一个使用.navbar-default类的导航栏，因为它具有所需的样式：

.navbar-default {
  background-color: #2c3e50;
  border-color: transparent;
}

例如，这里是 js fiddle example of creating similar navbar

bootstrap CSS：更改导航栏颜色

5 个答案: