更改标题背景颜色的模式的twitter引导

Question

我想改变使用以下CSS代码的twitter引导模态标题的背景颜色。

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

但是，这段代码使得模态头部的角有角度。在使用上面的代码之前，角落是圆形的。我怎样才能得到具有上述背景颜色的模态标题的圆形角？由于

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

Answer 2

这个类添加到你的CSS文件覆盖引导类.modal-header

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

是很重要的尝试从来没有编辑引导CSS，为了能够从回购更新和不松所做的更改或在期货发行中破坏某些东西。

Answer 3

边角实际上是.modal-content

所以，你可以试试这个：

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

如果更改页眉或页脚的颜色，圆角将绘制过。

Answer 4

我自己想知道如何改变模态头的颜色。

在我对问题的解决方案中，我尝试遵循我对Bootstrap愿景的解释。我添加了标记类来告诉模态对话框的功能。

模态成功，模态信息，模态警告和模态错误告诉他们做什么，你不会陷入你的自我突然有一种颜色，你不能在任何情况下使用，如果你改变一些自举中的模态类。 当然，如果你制作自己的主题，你应该改变它们。

.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

Answer 5

所以，我想其他方法的，但有一个非常轻微刺激性，那就是如果保持模式，内容边界半径，在FF和铬，有轻微的位即使在模态标题边框半径上使用5px，也会显示沿边框显示的白色边框。 （标准模式内容边框半径为6px，因此模式标题边框顶部半径上的5像素覆盖一些白色）。

我的解决办法：

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

Answer 6

所有我需要的是：

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

overflow: hidden保持颜色内border-radius

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