用较少的变量覆盖导航栏渐变颜色答案

【问题标题】：Override navbar gradient colors with less variable用较少的变量覆盖导航栏渐变颜色
【发布时间】：2014-01-31 21:42:01
【问题描述】：

variables.less 中的哪些 LESS 变量负责导航栏背景渐变？

我只想通过使用 LESS 变量来自定义导航栏的渐变颜色。我想避免使用原始 CSS 来覆盖导航栏背景。

根据http://getbootstrap.com/customize/#navbar，没有与渐变相关的变量，仅自定义@navbar-default-bg 不足以用于渐变（由2 种或更多颜色定义）

这可能吗？

【问题讨论】：

【解决方案1】：

通过将darken 和/或lighten 函数应用于@navbar-default-bg 来制作额外的导航栏渐变颜色。因此，如果您需要渐变而不是 @navbar-default-bg 的阴影，那么除了“覆盖原始 CSS”之外别无他法。

【讨论】：

我使用 Bootstrap 3.3.6 的经验 - 只需删除主题即可。然后，您可以在此特定实例中利用 LESS 变量的强大功能。

【解决方案2】：

导航栏和下拉菜单的渐变在 theme.less 文件中，as of this writing the navbar specifically on line 107 在这个 mixin 中：

.navbar-default {
  #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
  border-radius: @navbar-border-radius;
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  .box-shadow(@shadow);

  .navbar-nav > .active > a {
    #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}

基本上，这些是关键变量：

导航栏正常：渐变的结束颜色=@navbar-default-bg
navbar inverse：渐变的结束颜色 = @navbar-inverse-bg
下拉正常链接：渐变的起始颜色 = @dropdown-link-hover-bg
下拉活动链接：渐变的起始颜色 = @dropdown-link-active-bg

【讨论】：