更改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}

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

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

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

Answer 3

角落实际上在 .modal-content

所以你可以试试这个:

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

如果更改页眉或页脚的颜色,则会绘制圆角.

Answer 4

我需要的只是:

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

overflow: hidden 把颜色保持在里面 border-radius

Answer 5

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

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

重要的是尝试永远不要编辑Bootstrap CSS,以便能够从repo更新而不是松散所做的更改或在期货发布中破坏某些东西.

Answer 6

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

在我对这个问题的解决方案中,我试图遵循我对Bootstrap愿景的解释之路.我添加了标记类来告诉模态对话框的作用.

模态成功,模态信息,模态警告和模态错误告诉他们他们做了什么,如果你在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-successbootstrap中复制了样式并添加了border-radius以保持圆角.

我对这个问题的解决方案的插图演示

Answer 7

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

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