Изменение цвета фона Bootstrap popover

Я пытаюсь изменить CSS на Bootstrap popover. Я хочу изменить весь фон popover, а не только текст.

какие предложения?

http://bootply.com/110002

$(document).ready(function() {
  $("[rel='android']").popover({
    html: 'true', 
    content: '<div id="popOverBox">Coming March 2014</div>'
   });
});

в CSS

 #popOverBox {
     background: tomato;
     font-family: serif;
 }
11
css html javascript jquery twitter-bootstrap

5 ответов

вы нацелены на .popover элемент в отличие от #popOverBox

ПРИМЕР

.popover {
    background: tomato;
}

и для изменения фона стрелки (псевдоэлемента) вы бы использовали:

.popover.bottom .arrow:after {
    border-bottom-color: tomato;
}
27

.popover {background-color: tomato;}
.popover.bottom .arrow::after {border-bottom-color: tomato; }
.popover-content {background-color: tomato;}
3

обратите внимание, что если вы используете файлы less или sass, вы также можете сделать следующее:

@popover-bg: tomato;

таким образом, не нужно беспокоиться о том, с какой стороны находится стрелка.

0

изменить фон popover и цвет текста в Bootstrap-4

пока вы используете Sass-bootstrap-4, Вы можете легко сделать, просто изменив некоторые значения переменных.

это переменные в _variables.файл scss:

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba(0, 0, 0, .2) !default;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: darken($popover-bg, 3%) !default;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

Я меняю их на светло-голубой цвет, используя переменную $ brand-info:
Примечание: лучше, если вы скопируете эти переменные в свой собственный.SCSS, а затем изменить их.

$popover-inner-padding: 1px !default;
$popover-bg: #fff !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: $brand-info;
$popover-box-shadow: 0 5px 10px rgba(0, 0, 0, .2) !default;

$popover-title-bg: $brand-info;
$popover-title-padding-x: 14px !default;
$popover-title-padding-y: 8px !default;

$popover-content-padding-x: 14px !default;
$popover-content-padding-y: 9px !default;

$popover-arrow-width: 10px !default;
$popover-arrow-color: $popover-bg !default;

$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color:$brand-info;

вывод после изменения переменных:

 enter image description here

0

время прошло в любом случае я хотел бы сообщить о своем личном решении меньше (действительно, соответствует моим потребностям, но я думаю, может быть полезно для некоторых людей здесь). Добавьте класс в class="popover", как class="popover popover-warning" и в меньшем сделать что-то вроде этого:

.popover-warning {
  background-color: #f0ad4e !important;
  & .arrow, .arrow:after {
    border-left-color: #f0ad4e !important;
    border-left-color: rgba(0, 0, 0, 0.25);
  }
  & .popover-content, .popover-title {
    background-color: #f0ad4e !important;
  }
}

надеюсь, что это помогает.

0