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

Question

即看起来像: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 已经是 namespaced在 #gradient 命名空间中，这就是为什么它应该被称为 #gradient > .vertical()。