如何使用 LESS.js 在 bootstrap 3 中向导航栏添加渐变

Question

ie 看起来像：http://twitterbootstrap3navbars.w3masters.nl/ 但不使用原始 css，我想将其写入我的 less 文件中......

在我的 less.variables 中我已经尝试过这个：

@navbar-gradient:   linear-gradient(top, @navbar-default-pre-color 0%, @navbar-default-pre-color 50%, @navbar-default-pre-color 51%, @navbar-default-pre-color 100%);

@navbar-default-bg:                @navbar-gradient;

在 chrome 中，导航栏刚刚显示为黑色，我尝试将其从背景颜色更改为：仅背景、背景图像等（在 chrome 开发人员工具中，您可以直接在页面上编辑 css）。

有什么想法吗？

Answer 1

您可以使用以下 Less 代码来做到这一点：

@navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
.navbar-default {
#gradient > .vertical( @navbar-gradient-start-color,@navbar-gradient-stop-color);
}

您应该将此代码添加到 bootstrap.less（或 navnbar.less）文件的末尾。 （最好创建一个 custom.less 文件并在 bootstrap.less 的末尾导入）

另见：http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/

上面的 Less 代码会输出如下 CSS 代码：

.navbar-default {
  background-image: -webkit-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: -o-linear-gradient(top, #004400 0%, #009900 100%);
  background-image: linear-gradient(to bottom, #004400 0%, #009900 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff004400', endColorstr='#ff009900', GradientType=0);
}

请注意，.vertical() mixin 已在 Bootstrap 源文件的 less/mixins/gradients.less 文件中定义。这个mixin在#gradient命名空间中是namespaced，这就是为什么它应该被称为#gradient > .vertical()。

Answer 2

这就是我设置的。我在 navbar.less 的第 380 行添加了以下内容，在 navbar 默认类下

background-color: @navbar-default-bg;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(lighten(@navbar-default-bg,30%)), to(@navbar-default-bg));
  background-image: -webkit-linear-gradient(top, lighten(@navbar-default-bg,30%), 0%, @navbar-default-bg, 100%);
  background-image: -moz-linear-gradient(top, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-image: linear-gradient(to bottom, lighten(@navbar-default-bg,30%) 0%, @navbar-default-bg 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten(@navbar-default-bg,30%), endColorstr=@navbar-default-bg, GradientType=0);

我从这里删减了一些内容：http://twitterbootstrap3navbars.w3masters.nl/

Answer 3

原因是@navbar-default-bg 设置为background-color，正如@StrikePricer 指出的那样，需要将渐变设置为background-image。

此外，您似乎在所有站点都使用相同的颜色。所以这可能就是你没有看到渐变的原因。

因此，更完整的答案（忽略浏览器前缀的后备）将是：

// defined in variables.css:
@navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
@navbar-gradient: linear-gradient(to bottom, @navbar-gradient-start-color 0%, @navbar-gradient-stop-color 100%);

// in your main definitions/ overrides:
.navbar {
  background-image: @navbar-gradient; 
}