Question

即看起来像：http://twitterbootstrap3navbars.w3masters.nl/但是没有使用原始css，我想把它写入我的少文件...

在我的少数变量中，我已经尝试过这个：

@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

您可以使用以下少量代码：

@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行添加了以下内容

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; 
}

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

3 个答案: