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

问题描述 投票:0回答:10

我正在尝试使用以下 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}

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

css twitter-bootstrap bootstrap-modal
10个回答
78
投票

您可以使用下面的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;
 }

23
投票

所以,我尝试了这些其他方法,但是有一个非常轻微的刺激,那就是如果你保持模态内容边框半径,在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">

15
投票

角落实际上在

.modal-content

所以你可以尝试这个:

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

如果更改页眉或页脚的颜色,圆角将被覆盖。


12
投票

我所需要的只是:

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

overflow: hidden
保持颜色在
border-radius


7
投票

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

在解决问题时,我试图遵循我对 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
的样式,并添加了边框半径以保持圆角。

我对这个问题的解决方案的简单演示


7
投票

将此类添加到您的CSS文件中以覆盖引导类

.modal-header

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

重要的是尝试永远不要编辑 Bootstrap CSS,以便能够从存储库进行更新,并且不会丢失所做的更改或破坏未来版本中的某些内容。


5
投票

您可以通过简单地将类添加到模态标题来解决这个问题

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

4
投票

聚会有点晚了,但这里有另一个解决方案。

简单地将模态的类调整为

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')

0
投票

所有其他答案

overflow:hidden
alert-danger
在Bootstrap 4中对我不起作用, 但我在 Bootstrap 4 中找到了一个简单的解决方案。 由于白色装饰来自模态内容,只需为其添加
border-0
类,白色装饰就会消失。

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


0
投票

找到模态内容并添加样式,很简单...

<div class="modal-content" style="background: your-color">
© www.soinside.com 2019 - 2024. All rights reserved.