Изменить цвет фона заголовка модального твитер-бутстрапа

Я пытаюсь изменить цвет фона модального заголовка бутстрапа twitter, используя следующий код css.

.modal-header
 {
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 }
 .modal-header .close{margin-top:2px}
 .modal-header h3{margin:0;line-height:30px}

Но этот код делает угол модального заголовка angular. Перед использованием вышеуказанных кодовых углов были круглой формы. Как я могу получить круглую форму модального заголовка с указанным выше цветом фона? Спасибо

ОТВЕТЫ

Ответ 1

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

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }

Ответ 2

Итак, я пробовал эти другие способы, но был слабый раздражитель ОЧЕНЬ, и если бы вы сохраняли радиус границы модального содержания, то в FF и Chrome был немного белый обрезание вдоль границ, даже если вы используете 5px в радиусе границы модального заголовка. (стандартный радиус границы модального контента равен 6px, поэтому 5px на верхнем радиусе границы модального заголовка покрывает несколько белых).

Мое решение:

.modal-body
{
    background-color: #FFFFFF;
}

.modal-content
{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: transparent;
}

.modal-footer
{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
}

.modal-header
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
}

!! CAVEAT!!

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

<div class="modal-header bg-primary">

<div class="modal-body bgColorWhite">

<div class="modal-footer bg-info">

ИЗМЕНИТЬ

Или даже лучше:

<div class="modal-header alert-primary">

Ответ 3

Углы на самом деле находятся в .modal-content

Итак, вы можете попробовать следующее:

.modal-content {
  background-color: #0480be;
}
.modal-body {
  background-color: #fff;
}

Если вы измените цвет верхнего или нижнего колонтитула, закругленные углы будут нарисованы.

Ответ 4

Добавьте этот класс в ваш файл css, чтобы переопределить класс bootstrap .modal-header

.modal-header {
   background:#0480be;
}

Важно стараться никогда не редактировать Bootstrap CSS, чтобы иметь возможность обновлять из репо и не потерять сделанные изменения или сломать что-то в фьючерсных версиях.

Ответ 5

Мне все было нужно:

.modal-header{
     background-color:#0f0;
}
.modal-content {
    overflow:hidden;
}

overflow: hidden, чтобы сохранить цвет внутри border-radius

Ответ 6

Я сам задавался вопросом, как я могу изменить цвет модального заголовка.

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

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

.modal-success {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
  background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8',     endColorstr='#ffc8e5bc', GradientType=0);
  border-color: #b2dba1;
  border-radius: 6px 6px 0 0;
}

В моем решении я на самом деле просто скопировал стиль из alert-success в bootstrap и добавил радиус границы, чтобы сохранить закругленные углы.

Яркая демонстрация моего решения этой проблемы

Ответ 7

Немного поздно для вечеринки, но здесь другое решение.

Просто настройка класса модальности на что-то вроде alert-danger действительно работает, однако она удаляет верхние закругленные углы модального.

Обходной путь состоит в том, чтобы дать элементу modal-header дополнительный класс panel-heading, например

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header panel-heading"> <!-- change here -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Затем, чтобы изменить цвет заголовка, вы можете сделать что-то вроде (при условии, что вы используете jQuery)

jQuery('.modal-content').addClass('panel-danger')