更改引导弹出框背景颜色答案

【问题标题】：Change bootstrap popover background color更改引导弹出框背景颜色
【发布时间】：2014-02-24 19:00:52
【问题描述】：

我正在尝试更改引导弹出窗口上的 CSS。我想更改整个弹出框背景，而不仅仅是文本。

有什么建议吗？

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

CSS

 #popOverBox {
     background: tomato;
     font-family: serif;
 }

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您将定位 .popover 元素而不是 #popOverBox

EXAMPLE HERE

.popover {
    background: tomato;
}

要更改箭头的背景（伪元素），您可以使用：

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

【讨论】：

上述解决方案对我不起作用，但以下解决方案：.tooltip-inner { background-color: #D13127;颜色：#fff; } .tooltip.top .tooltip-arrow { 边框顶部颜色：#D13127; }
对于箭头试试 .popover.top > .arrow:after { border-top-color: #111; }
最好在浏览器中使用开发工具来检查元素以查看正在使用的箭头类。根据弹出框的选项和位置，将确定使用的类。对我来说，我使用了这个：.arrow::after, .bs-popover-top .arrow::after { bottom: 1px;边框顶部颜色：#450909； }
这个例子是一个不安全的网站

【解决方案2】：

在 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 变量将它们更改为浅蓝色：
注意：最好将这些变量复制到自己的 custom.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;

改变变量后的输出：

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

时间已经过去了，我想在 LESS 中报告我的个人解决方案（确实，符合我的需求，但我认为对这里的某些人有用）。向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;
  }
}

希望这会有所帮助。

【讨论】：

【解决方案5】：

请注意，如果您使用的是 less 或 sass 文件，您还可以执行以下操作：

@popover-bg: tomato;

这样就不用担心箭头在哪一边了。

【讨论】：

【解决方案6】：

您可以更改弹出框的默认模板：

//Setup popover
node_el.popover(
    { title: 'Error',
        content: err_msg,
        trigger: 'focus',

        placement: 'top',
        template: '<div class="popover err" role="tooltip"><div class="arrow"></div><h3 class="popover-header text-danger"></h3><div class="popover-body text-danger"></div></div>'
    });

node_el.popover('show');

在上面的示例中添加了 CSS 类 'err' 和 'text-danger'。也可以添加背景颜色的 CSS 类...

【讨论】：