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

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

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

код:

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

Ответ 1

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

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

}

Ответ 2

Вы можете создать собственный класс для заголовка панели. Используя этот класс 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; }

Демо-ссылка:

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

Ответ 3

Как создать собственный класс пользовательской панели? Таким образом вам не придется беспокоиться о переопределении 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/

Ответ 4

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

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

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

CSS

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

HTML:

<div class="panel panel-default">

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

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

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

.panel-title {
  color: white;
}

Ответ 5

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

пример:

<div class="panel panel-danger">
  <div class="panel-heading">
  </div>
</div>

Ответ 6

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

с! important

.custom_class { background-color: red! important; }
с! important
с идентификатором:

#custom_id { background-color: red; }

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

Отредактируйте код css из созданного класса новых клонов.

Ответ 10

используйте это:

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