Как стилизовать заголовок Twitter Bootstrap (например, установить цвет фона)

Question

Как установить собственный цвет фона, например, для активного элемента в раскрывающемся списке при использовании автозаполнения Bootstrap "typeahead"?

Небольшая проблема, но та, которая расстраивала меня в течение нескольких часов!

Я использую Twitter Bootstrap в приложении Rails 3.2, используя самоцвет bootstrap-sass.

Я предположил, что это контролировалось стилем выпадающего меню, но

$dropdownLinkBackgroundHover: $customColor;

не работает.

Я также попробовал более конкретный подход

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

но это также не похоже на работу.

Что я пропускаю? Или мои исправления должны работать, и проблема кроется в другом месте?

Answer 1

Во-первых, казалось бы, что :hover состояние не используется для typeahead, но только .active один, как видно из плагина javascript (2.2.2 на github)

Так что, если вы измените переменную цвета, это должно быть $dropdownLinkColorActive переменная (которая переопределит все выпадающие списки, независимо от того, есть ли у них заголовок или нет).

---

Во-вторых, маленькая хитрость в том, что фон задается не только background-colorчто является запасным вариантом, но background-image как видно из вызова Less к смешанному коду Less, показанному внизу.

И если вы хотите установить новый цвет только в раскрывающихся списках 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
  }
}