在 Bootstrap 中将 CSS 应用于弹出窗口答案

【问题标题】：Apply CSS to popover in Bootstrap在 Bootstrap 中将 CSS 应用于弹出窗口
【发布时间】：2013-07-26 22:10:33
【问题描述】：

我想将自定义 CSS 应用于 Bootstrap 中弹出框的标题和内容，但是，我的 CSS 似乎被忽略了。

如何将特定的 CSS 分别应用于标题和内容？

$("#poplink").popover({
    html: true,
    placement: "right",
    trigger: "hover",
    title: function () {
        return $(".pop-title").html();
    },
    content: function () {
        return $(".pop-content").html();
    }
});

html, body {
    width: 100%;
    height: 100%;
}
.pop-div {
    font-size: 13px;
    margin-top: 100px;
}
.pop-title {
    display: none;
    color: blue;
    font-size: 15px;
}
.pop-content {
    display: none;
    color: red;
    font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>

例如：http://jsfiddle.net/Mx4Ez/

【问题讨论】：

标签： html css twitter-bootstrap popover

【解决方案1】：

原因似乎是 javascript 正在创建全新的元素来显示弹出框本身。这些新元素具有与原始元素不同的 css 类名称。

尝试将其添加到您的 css 中：

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

更新

根据您使用的库版本，名称可能会有所不同。如果上述方法不起作用，请尝试改用.popover-header 和.popover-body。

【讨论】：

有什么方法可以仅将其应用于特定的popover？我希望有类似的东西：.popover({ templateCss: {...} }).
使用样式表是一个很好的方法。我个人会避免尝试通过 javascript 设置样式，以避免多次调用 .popover(..) 。这是我如何做的一个小提琴：jsfiddle.net/n8e92k4n/11
我正在使用 Angular。因此，如果 popover 有 css 选项（或者更好的是 class 选项），Angular Bootstrap UI 将允许在 Angular 模板中进行这些调整。 JS不会被触及:)
@MattPinkston 谢谢，但是，它在我的情况下不起作用，因为我使用的是data-container="body"。
@JustinSkiles $('#domEl').popover('toggle').on('inserted.bs.popover',function(){ $('.popover').css('color','#393939'); }); 将在将弹出框插入 dom 后更新 color 为 .popover。我将它与画布内的元素一起使用，它可以工作。

【解决方案2】：

新创建的元素具有以下层次结构：

.popover
    |_  .popover-title
    |_  .popover-content

在触发弹出框的元素之后注入（您可以通过设置container 选项为注入的弹出框指定特定容器，在这种情况下，您将使用作为容器传递的元素设置样式）。因此，要设置弹出框的样式，您可以使用 css，如下例所示：

<div id="my-container">
  <a href="#" id="popover-trigger">Popover This!</a>
</div>

<style>
  .popover-title { color: green; }  /* default title color for all popovers */

  #my-container .popover-title { color: red; }  /* specific popover title color */
</style>

【讨论】：

【解决方案3】：

如果您的页面上有多个弹出框并且只想设置其中一个的样式，则可以利用弹出框的 template 选项添加另一个类：

$("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

我一开始只使用docs 中template 的默认值，然后将my-specific-popover 添加到类属性中。

【讨论】：

【解决方案4】：

正如 Matt 之前所说，这可能取决于引导程序版本，对于 v4.6，您应该这样做：

.popover{
  background-color: red;
}
.popover-header {
  color: red;
}
.popover-body {
  color: blue;
}

【讨论】：