如何设置Twitter Bootstrap的预先设置样式(例如设置背景颜色)

Question

如何在使用Bootstrap的"预先"自动完成时为下拉列表中的活动项目设置自定义背景颜色？

一个小问题,但一个让我感到沮丧几个小时的问题!

我通过bootstrap-sass gem在Rails 3.2应用程序中使用Twitter Bootstrap.

我认为这是由下拉菜单样式控制的,但是

$dropdownLinkBackgroundHover: $customColor;

不起作用.

我也尝试了一种更具体的方法

.typeahead .active > a, .typeahead .active > a:hover { background-color: $customColor; }

但这似乎也不起作用.

我在俯瞰什么？或者我的修复工作是否有效,问题出在其他地方？

Answer 1

首先,看起来:hover状态不是用于typeahead,而只是.active一个,如javascript插件(github上的2.2.2)所示

因此,如果你更改颜色变量,它必须是$dropdownLinkColorActive变量(它将覆盖所有下拉列表,无论是否来自typeahead).

其次,小动作是背景不仅被设定background-color,这是一个回退,而是通过background-image从所看到少调用到少混入 -显示在底部的代码.

如果您只想为typeahead的下拉菜单设置新颜色,则必须使用选择器覆盖颜色(至少目前为止)..typeahead +.dropdown-menu .active > a

现场演示(jsfiddle)

以下是您必须覆盖的内容:

.typeahead + .dropdown-menu .active > a,
.typeahead + .dropdown-menu .active > a:hover {
    color: #ffffff;
    background-color: #FF77FF;
    background-image: -moz-linear-gradient(top, #FF77FF, #FF44FF);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FF77FF), to(#FF44FF));
    background-image: -webkit-linear-gradient(top, #FF77FF, #FF44FF);
    background-image: -o-linear-gradient(top, #FF77FF, #FF44FF);
    background-image: linear-gradient(to bottom, #FF77FF, #FF44FF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF77FF', endColorstr='#FF44FF', GradientType=0);
}

这是基于Twitter Bootstrap 2.2.2的原始较少版本,但对于sass移植版本,它肯定是相同的.

对于后代,这里引用的代码较少(版本2.2.2):

/* called in .dropdown-menu .active > a */
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));

/* mixin */
#gradient {
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
}