Question

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

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

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

这可能吗？

Answer 1

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

Answer 2

导航栏和下拉列表的渐变位于此混音中的theme.less文件as of this writing the navbar specifically on line 107中：

.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 正常：渐变的结束颜色= @navbar-default-bg
navbar 逆：渐变的结束颜色= @navbar-inverse-bg
下拉正常链接：渐变颜色= @dropdown-link-hover-bg
下拉有效链接：渐变颜色= @dropdown-link-active-bg

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

2 个答案: