Переопределить цвета аккордеона Bootstrap в начальной загрузке для angularjs

Я новичок в angularjs / bootstrap, и я пытаюсь создать SPA, который использует списки аккордеона начальной загрузки. Я пытаюсь изменить цвет всей вкладки аккордеона, однако это меняет только часть пространства аккордеона. Я посмотрел в Интернете и получил этот вопрос (Добавить класс в заголовок аккордеона с помощью angualr ui bootstrap?) и это Jsfiddle (http://jsfiddle.net/Zmhx5/3/) отлично представляют мою проблему, но не объясняют решения.

Я попытался использовать firebug, чтобы узнать, что происходит за кулисами, и он говорит, что вся вкладка аккордеона - это "". У меня есть класс css, который перезаписывает этот стиль, но по какой-то причине что-то отменяет его.

.panel-heading {
background-color: red;
}

На этом веб-сайте есть руководство по аккордеонам, и его CSS просто перезаписал его (http://patternry.com/p=accordion/). Я пытался сделать то же самое, но это не сработало, помогите пожалуйста: /


accordion angularjs twitter-bootstrap
person Justin    schedule 18.11.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В этом случае вам следует использовать scss.

<div class="custom">
    <accordion>
        ...
    </accordion>
</div>

В css вам нужно будет определить.

.custom {
    .panel-heading: {
        background-color: red !important;
     }
}
person Aditya Sethi    schedule 18.11.2014

arrow_upward
6
arrow_downward

Причина, по которой ваше переопределение не работает, заключается в специфичности CSS. Поскольку стиль Bootstrap более специфичен, чем ваш, применяется именно он. Вам нужно будет переопределить следующим образом

.panel-default >.panel-heading {
    background-color: red;
}

Вот JSFiddle для справки.

person Bart Jedrocha    schedule 18.11.2014
comment
Это повлияет на все приложение, поскольку классы панелей в основном используются разработчиками начальной загрузки. - person Aditya Sethi; 18.11.2014
comment
Обратите внимание, что если вы используете bootstrap-theme.css, тема добавляет фоновое изображение, которое переопределяет свойство цвета фона. В этом случае вам также необходимо установить background-image: none; для отображения цвета фона. - person André Caron; 27.05.2015

arrow_upward
1
arrow_downward

Поскольку я не мог добавить комментарий к @AdityaSethi в ответе @ BartJedrocha, я поставлю здесь ответ, поскольку считаю, что это полезно.

.panel-default >.panel-heading {
    background-color: red;
}

работал у меня где

.custom {
    .panel-heading: {
        background-color: red !important;
     }
}

Не. Возможно, дело в использовании SCSS? Я где-то читал, что SCSS использует расширение .scss. У меня не хватило терпения изменить расширение таблицы стилей или создать новое. Ооочень попробовал второй ответ.

Однако мой комментарий больше относится к комментарию @AdityaSethi, в котором отмечена проблема этого решения, влияющая на все приложение, поскольку классы панелей широко используются. Понятно. Я полагаю, что простое решение:

div.custom .panel-default>.panel-heading {
    background-color: red;
}

И это помогло мне в том, что я все еще меняю стили. На оставшейся части моей страницы начальной загрузки не должно быть других используемых панелей, потому что больше ничего не изменилось до того, как я добавил div.custom в CSS. Но я полагаю, что с той маленькой логикой, которая присутствует в CSS, никакие другие панели за пределами div.custom не должны быть затронуты. :)

person Christine268    schedule 08.04.2015