twitter-bootstrap 如何使用 LESS.js 向引导程序 3 中的导航栏添加渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23350216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a gradient to the navbar in bootstrap 3 using LESS.js
提问by InfinteScroll
ie looks like: http://twitterbootstrap3navbars.w3masters.nl/but without using raw css, I want to write this into my less files...
ie 看起来像：http: //twitterbootstrap3navbars.w3masters.nl/但不使用原始 css，我想把它写到我的 less 文件中......
In my less.variables I already tried this:
在我的 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;
In chrome the navbar just showed up black, I tried changeing it from background color to: just background, background-image etc (in the chrome developer tools that let you edit the css right on the page).
在 chrome 中，导航栏刚刚显示为黑色，我尝试将其从背景颜色更改为：仅背景、背景图像等（在 chrome 开发人员工具中，您可以直接在页面上编辑 css）。
Any ideas?
有任何想法吗？
回答by Bass Jobsen
You can do that by using the following Less code:
您可以使用以下 Less 代码来做到这一点：
@navbar-gradient-start-color: #004400;
@navbar-gradient-stop-color: #009900;
.navbar-default {
#gradient > .vertical( @navbar-gradient-start-color,@navbar-gradient-stop-color);
}
You should add this code at the end of the bootstrap.less (or navnbar.less) file. (better create a custom.less file and import that at the end of bootstrap.less)
您应该在 bootstrap.less（或 navnbar.less）文件的末尾添加此代码。（最好创建一个 custom.less 文件并在 bootstrap.less 的末尾导入）
Also see: http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/
另见：http: //bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/
The Less code above will output the following CSS code:
上面的 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);
}
Notice that the .vertical() mixin has been defined in the less/mixins/gradients.less file of Bootstrap's source files. This mixin has been namespacedin the #gradientnamespace and that's why it should be called as #gradient > .vertical().
请注意，.vertical() mixin 已在 Bootstrap 源文件的 less/mixins/gradients.less 文件中定义。这个 mixin 已经在命名空间中#gradient命名了，这就是为什么它应该被称为#gradient > .vertical().
回答by InfinteScroll
so here's what I rigged up. I added the following at line 380 in navbar.less, under the navbar default class
所以这就是我操纵的。我在 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);
I cut and past some of it from here: http://twitterbootstrap3navbars.w3masters.nl/
我从这里剪掉了一些：http: //twitterbootstrap3navbars.w3masters.nl/
回答by thom_nic
The reason is @navbar-default-bgis set to background-colorand as @StrikePricer pointed out, a gradient needs to be set as background-image.
原因是@navbar-default-bg设置为background-color，正如@StrikePricer 指出的那样，梯度需要设置为background-image。
Also it appears you're using the same color at all stops. So that might be why you're not seeing the gradient.
此外，您似乎在所有站点都使用相同的颜色。所以这可能就是你没有看到渐变的原因。
So a more complete answer (ignoring browser-prefixed fallbacks) would be:
因此，更完整的答案（忽略浏览器前缀的回退）将是：
// 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;
}
