Как переопределить цвет фона заголовка Bootstrap?

Я использую панель от Bootstrap, однако для заголовка я хочу использовать свой собственный цвет фона для заголовка. Когда я не стану panel-heading класс для div, макет завинчивается. Поэтому я думал, что должен сохранить panel-heading, но затем найти способ переопределить цвет фона. Поэтому я решил создать пользовательский класс css и использовать background-color, а затем добавить его в div с panel-heading. Но это не имело никакого эффекта.Как переопределить цвет фона заголовка Bootstrap?

Любая идея переопределить цвет заголовка панели?

Код:

<div class="panel panel-default"> 
    <div class="panel-heading custom_class" > 
    </div> 
</div>

источник

2014-10-22 Jack Twain

я предполагая custom_class быть ваш класс, чтобы переопределить заголовок цвет панели. просто добавьте! Важно для него или добавьте встроенные стили или идентификатор и добавьте стили, поскольку они будут иметь более конкретную специфику по стилям добавленного класса. !

с важными

.custom_class { цвет фона: красный важно; }
с важным
с ID:

#custom_id { цвет фона: красный; }

-с встроенные стили:

<div id="custom_id" class="panel panel-default"> 
     <div class="panel-heading custom_class" style="background-color:red"> 
     </div> 
    </div>

источник

2014-10-22 10:16:02 invinciblejai

не из тех, кто работал –

@AlexTwain может сделать для вас скрипку, это будет полезно. – invinciblejai

Вы можете создать собственный класс для вашей панели заголовка. Используя этот класс css, вы можете настроить заголовок панели. Для этого у меня есть простой скрипт.

HTML:

<div class="panel panel-default"> 
    <div class="panel-heading panel-heading-custom"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div>

CSS:

.panel-default > .panel-heading-custom { 
background: #ff0000; color: #fff; }

Demo Ссылка:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

источник

2014-10-22 12:03:29

Это единственный, который работал, если вы не хотите переопределять все заголовки панелей, только пользовательские. Благодарю. – johnny

Вам не нужно добавлять собственные пользовательские классы, просто настраивая контекстный класс начальной загрузки.См. Мой ответ. – rmcsharry

Это должно работать:

.panel > .panel-heading { 
    background-image: none; 
    background-color: red; 
    color: white; 

}

источник

2015-02-07 21:19:35 Marco

+25

Чтобы явно помочь людям, которые спотыкаются здесь, вы не можете установить фоновый цвет, если не удалите фоновое изображение. –

Фоновое изображение покрывает фоновый цвет, поэтому, даже если вы установили фоновый цвет, вы не видите его. –

-3

Просто проверьте бутстрап. CSS и найдите заголовок класса класса и скопируйте код по умолчанию.

Скопируйте CSS по умолчанию в свой персональный CSS, но приведите его к классу differerence, например my-panel-header.

Редактировать код css из созданного класса новых клонов.

источник

2015-04-15 21:52:51

-3

использовать это:

.panel-heading { 
    background-color: #ececb0 !important; 
}

источник

2015-10-10 14:06:21 user3197818

Как о создании собственного пользовательского класса Panel? Таким образом вам не придется беспокоиться о переопределении Bootstrap.

HTML

<div class="panel panel-custom-horrible-red"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div>

CSS

.panel-custom-horrible-red { 
    border-color: #ff0000; 
} 
.panel-custom-horrible-red > .panel-heading { 
    background: #ff0000; 
    color: #ffffff; 
    border-color: #ff0000; 
}

Fiddle:https://jsfiddle.net/x05f4crg/1/

источник

2016-02-17 21:47:03

Bootstrap иногда использует контекстные конструкции класса. Это то, что вы должны настроить, чтобы изменить стиль.

Вам не нужно создавать свой собственный класс, как предлагается в ответе Kiran Varti.

Так что вам нужно только:

CSS:

.panel-default > .panel-heading { 
    background: #black; 
}

HTML:

<div class="panel panel-default">

Объяснение here. Также см. Раздел контекстного класса here.

Для соответствия навигационному использованию # 222. Panel-inverse был requested в V3, но отклонен из-за более крупных приоритетов.

Вы можете изменить цвет переднего плана в этом заголовке, или вы можете сделать это отдельно для заголовков панелей. Зависит от того, чего вы пытаетесь достичь.

источник

2016-08-22 19:59:13 rmcsharry

Другой способ изменения цвета - удалить класс по умолчанию и заменить его на панели с использованием классов начальной загрузки.

пример:

источник

2016-12-12 20:43:31

Вы можете просто добавить атрибут ID к панели. Как это

<div class="panel-heading" id="mypanelId">Hello world </div>

Затем в пользовательском файле CSS:

#mypanelId{ 
    background-image: none; 
    background: rgba(22, 20, 100, 0.8); 
    color: white; 
    }

источник

2017-05-23 23:47:01 NetEmmanuel

.panel-default >.panel-heading 
{ 
    background: #ffffff; 
}

Это то, что работает для меня, чтобы изменить цвет на белый.

источник

2017-09-29 21:10:18

Как переопределить цвет фона заголовка Bootstrap?

ответ

Смежные вопросы