更改Twitter Bootstrap模态框的标题背景颜色

Question

我试图使用以下CSS代码更改Twitter Bootstrap模态框标题的背景颜色。

.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}

但是这段代码使模态窗口标题栏的角变成了直角形。在使用上述代码之前，角是圆形的。我该如何在保持背景颜色不变的情况下获得模态窗口标题栏的圆形角？谢谢。

- Foysal Vai

Answer 1

你可以使用以下的CSS，在自定义CSS中加入这段代码以覆盖Bootstrap 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;
 }

- Janzell Jurilla

---

如下所述：（i）底部角落为6px，顶部角落为5px，因为使用6px角落可以显示模态内容的背景颜色，（ii）即使使用5px角落，模态内容的背景颜色仍然会稍微显示出来。希望能有更好的解决方案。 - new name

是的，我同意@Kekito的看法，这不是一个理想的解决方案。我发现使用4px半径效果更好。 - Alvaro

Answer 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;
}

!! 注意 !!

您需要设置模态窗口头部、内容区域和页脚的背景颜色。这并不是一个坏的折衷方案，因为它让您可以做到这一点：

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

<div class="modal-body bgColorWhite">

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

编辑

或者甚至更好的是：

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

- ScubaSteve

Answer 3

角落实际上在 .modal-content 中。

因此，您可以尝试这样做：

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

如果你改变页眉或页脚的颜色，圆角会被覆盖。

- mrkre

---

只有当您希望页眉和页脚的背景颜色相同时，此方法才有效。 - new name

Answer 4

我所需要的只是：

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

overflow: hidden用于保持颜色在border-radius内部。

- Iberê

---

太棒了！你发现了哪些副作用？ :) - Oleg

@Oleg 我现在想不起来有没有类似的了。你有注意到这个解决方案有什么问题吗？ - Iberê

完美无瑕！谢谢。 - hubert17

Answer 5

我自己想知道如何更改modal-header的颜色。

为解决这个问题，我尝试按照Bootstrap视觉的理解来处理。我添加了标记类以告诉模态对话框的功能。

modal-success、modal-info、modal-warning 和 modal-error 说明了它们的用途，如果你在Bootstrap中更改一些modal类，就不会陷入突然无法使用的颜色中。当然，如果你制作自己的主题，你应该更改它们。

.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;
}

在我的解决方案中，我实际上只是复制了Bootstrap中的alert-success的样式，并添加了边框半径以保持圆角。

这个链接展示了我对这个问题的解决方案

- Benny Thomas

Answer 6

将以下类添加到您的CSS文件中以覆盖Bootstrap类.modal-header。

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

重要的是尽量不要编辑Bootstrap CSS，这样才能从repo更新，并且不会丢失所做的更改或在未来版本中破坏某些东西。

- Emilio Gort

---

永远不要编辑引导 CSS，应该在单独的文件中覆盖它。 - Karl-Henry Martinsson

Answer 7

你可以通过简单地向模态框标题添加类来解决这个问题。

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

- Herbert Yeo

---

你也可以尝试使用渐变颜色，如bg-gradient-primary、bg-gradient-success、bg-gradient-info等。 - Herbert Yeo

Answer 8

稍微有点晚了，但这里有另一个解决方案。简单地将模态框的类名调整为像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')

- Constantino

Answer 9

所有其他答案overflow:hidden、alert-danger在Bootstrap 4中对我都不起作用， 但是我在Bootstrap 4中找到了一个简单的解决方案。 由于白色边框来自modal-content，只需向其添加border-0类即可使白色边框消失。

Example: https://codepen.io/eric1214/pen/BajLwzE?editors=1010

- eric1214