更改 twitter bootstrap 模态的标题背景颜色

Posted 2023-03-06

【中文标题】更改 twitter bootstrap 模态的标题背景颜色

【英文标题】：Change header background color of modal of twitter bootstrap

【发布时间】：2013-10-16 05:26:24

【问题描述】：

我正在尝试使用以下 css 代码更改 twitter bootstrap 模态标题的背景颜色。

.modal-header
 
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 
 .modal-header .closemargin-top:2px
 .modal-header h3margin:0;line-height:30px

但是这段代码使模态标题的角有角度。在使用上述代码之前，角是圆形的。如何获得具有上述背景颜色的模态标题的圆形角？谢谢

【参考方案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;
 

【讨论】：

如下所述：(i) 底角是 6px，顶角是 5px，因为使用 6px 角会显示模态内容背景颜色，并且 (ii) 即使使用 5px 角也会显示模态内容背景颜色仍然显示一点。有更好的解决方案会很棒。

是的，我同意@Kekito，这不是一个理想的解决方案。我发现它与4px radius 配合得更好。

【参考方案2】：

所以，我尝试了这些其他方法，但有一个 非常 轻微刺激，那就是如果你保持模态内容边框半径，在 FF 和 Chrome 中，会有一点白色即使您在 modal-header 边框半径上使用 5px，也会沿边框显示修剪。 （标准 modal-content 边框半径为 6px，因此 modal-header 边框顶部半径上的 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;

！！注意！！

然后您必须设置模态页眉、模态内容和模态页脚的背景颜色。这是一个不错的权衡，因为它允许您这样做：

<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】：

我只需要：

.modal-header
     background-color:#0f0;

.modal-content 
    overflow:hidden;

overflow: hidden 保持border-radius 内的颜色

【讨论】：

太棒了！你发现了什么副作用？ :)

@Oleg 我现在不记得了。你注意到这个解决方案了吗？

完美无瑕！谢谢。

【参考方案5】：

将此类添加到您的 css 文件以覆盖引导类.modal-header

.modal-header 
   background:#0480be;

重要的是不要编辑 Bootstrap CSS，以便能够从 repo 进行更新，并且不会丢失在未来版本中所做的更改或破坏某些内容。

【讨论】：

永远不要编辑引导 CSS，你应该在一个单独的文件中用你自己的覆盖它。

【参考方案6】：

我自己想知道如何更改模态标题的颜色。

在我解决问题的过程中，我试图遵循我对 Bootstrap 愿景的解释方式。我添加了标记类来说明模态对话框的作用。

modal-success, modal-info, modal-warning 和 modal-error 告诉你他们做了什么，你不会因为突然有一种你不能在任何情况下都使用的颜色而陷入困境如果您更改引导程序中的一些模态类。 当然，如果你制作自己的主题，你应该改变它们。

.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 的样式，并添加了边框半径以保持圆角。

A plunk demonstration of my solution to this problem

【参考方案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')

【参考方案8】：

您可以通过简单地将类添加到 modal-header 来解决此问题

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

【讨论】：

你也可以尝试渐变色，bg-gradient-primary、bg-gradient-succes、bg-gradient-info等

【参考方案9】：

所有其他答案overflow:hidden、alert-danger 在 Bootstrap 4 中对我不起作用， 但我在 Bootstrap 4 中找到了一个简单的解决方案。 由于白色修剪来自modal-content，只需将border-0类添加到它，白色修剪就会消失。

示例： https://codepen.io/eric1214/pen/BajLwzE?editors=1010