5

在 html 中：

<div class="navbar navbar-default">

在 variable.less 文件中：

@navbar-default-bg: #f8f8f8;

将此十六进制颜色更改为其他颜色（即蓝色）后，您会注意到只有底部边缘颜色变为蓝色。因为类导航栏也有背景，所以它会阻止 @navbar-default-bg 颜色。

样本：

1.在html中：

<div class="navbar navbar-default">

在 variable.less 中：

@navbar-default-bg：蓝色；

输出：在此处输入图像描述

2.在html中：

<div class="navbar navbar-default">

在 variable.less 中：

@navbar-default-bg：蓝色；

在 custom.css 中：

.navbar{背景：蓝色}

输出：在此处输入图像描述

我知道，如果我制作一个自定义 css 文件并将其放入.navbar{background: blue}，它将导航栏颜色更改为我想要的颜色。

但我更喜欢编辑更少的文件。有什么办法吗？ 在您认为这是一个重复的问题之前，请先尝试一下！

4

2 回答 2

3

尝试从您的项目中删除默认的 bootstrap-theme.css 和 bootstrap-theme.min.css 文件，因为我认为它们会覆盖主 bootstrap.css 文件中的某些样式。

于 2013-10-31T12:17:41.477 回答
1

我认为你的问题仍然是重复的。我觉得你上面的结论是不对的。当我设置 @navbar-default-bg: blue;(in variables.less) 并重建 css (Bootstrap)。<div class="navbar navbar-default">会给我一个蓝色的导航栏，如：

在此处输入图像描述

该类.navbar不设置背景颜色，也不影响导航栏默认类的背景颜色。

目前，您总是需要向 .navbar（如 navbar-default、navbar-inverse 或 navbar-custom）类添加第二个类来设置导航栏的样式。另见：https ://github.com/twbs/bootstrap/issues/10332

设置@navbar-default-bg: blue;并重新编译引导程序后，.navbar-default 的 css 将如下所示：

.navbar-default {
  background-color: #0000ff;
  border-color: #0000de;
}

.navbar-default .navbar-brand {
  color: #777777;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #777777;
}

.navbar-default .navbar-nav > li > a {
  color: #777777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #dddddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dddddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #cccccc;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #0000de;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #0000de;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}

.navbar-default .navbar-link {
  color: #777777;
}

.navbar-default .navbar-link:hover {
  color: #333333;
}

注意blue将设置为#0000FF;

于 2013-09-19T19:53:11.717 回答