CSS 更改 twitter bootstrap 模态的标题背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19262113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change header background color of modal of twitter bootstrap
提问by Foysal Vai
I am trying to change the background color of modal header of twitter bootstrap using following css code.
我正在尝试使用以下 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}
But this code makes the corner of the modal header angular. Before using above code corners were round shaped. How can I get round shaped corner of modal header with the above background color ?? Thanks
但是这段代码使模态标题的角有角度。在使用上述代码之前，角是圆形的。如何使用上述背景颜色获得模态标题的圆形角？谢谢
回答by Janzell Jurilla
You can use the css below, put this in your custom css to override the bootstrap css.
您可以使用下面的 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;
}
回答by ScubaSteve
So, I tried these other ways, but there was a VERYslight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).
所以，我尝试了这些其他方法，但有一个非常轻微的刺激，那就是如果你保持模态内容边框半径，在 FF 和 Chrome 中，即使你使用模态标题边框半径为 5px。（标准模态内容边框半径为 6px，因此模态标题边框顶部半径上的 5px 覆盖了一些白色）。
My solution:
我的解决方案：
.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;
}
!! CAVEAT !!
!! 警告 ！！
You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:
然后，您必须设置 modal-header、modal-content 和 modal-footer 的背景颜色。这是一个不错的权衡，因为它允许您这样做：
<div class="modal-header bg-primary">
<div class="modal-body bgColorWhite">
<div class="modal-footer bg-info">
EDIT
编辑
Or even better:
或者甚至更好：
<div class="modal-header alert-primary">
回答by mrkre
The corners are actually in .modal-content
角落实际上在 .modal-content
So you may try this:
所以你可以试试这个：
.modal-content {
background-color: #0480be;
}
.modal-body {
background-color: #fff;
}
If you change the color of the header or footer, the rounded corners will be drawn over.
如果您更改页眉或页脚的颜色，圆角将被绘制。
回答by Iberê
All i needed was:
我只需要：
.modal-header{
background-color:#0f0;
}
.modal-content {
overflow:hidden;
}
overflow: hiddento keep the color inside the border-radius
overflow: hidden保持颜色在里面 border-radius
回答by Emilio Gort
Add this class to your css file to override the bootstrap class.modal-header
将此类添加到您的 css 文件以覆盖引导程序类.modal-header
.modal-header {
background:#0480be;
}
It's important try to never edit Bootstrap CSS, in order to be able to update from the repo and not loose the changes made or break something in futures releases.
重要的是永远不要编辑 Bootstrap CSS，以便能够从 repo 更新并且不会丢失在未来版本中所做的更改或破坏某些内容。
回答by Benny Thomas
I myself wondered how I could change the color of the modal-header.
我自己想知道如何更改模态标题的颜色。
In my solution to the problem I attempted to follow in the path of how my interpretation of the Bootstrap vision was. I added marker classes to tell what the modal dialog box does.
在我对问题的解决方案中，我试图遵循我对 Bootstrap 愿景的解释方式。我添加了标记类来说明模态对话框的作用。
modal-success, modal-info, modal-warning and modal-errortells what they do and you don't trap your self by suddenly having a color you can't use in every situation if you change some of the modal classes in bootstrap. Of course if you make your own theme you should change them.
modal-success, modal-info, modal-warning 和 modal-error告诉他们做了什么，如果你在 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;
}
In my solution I actually just copied the styling from alert-successin bootstrap and added the border-radius to keep the rounded corners.
在我的解决方案中，我实际上只是从alert-success引导程序中复制了样式并添加了边框半径以保持圆角。
回答by Constantino
A little late to the party, but here's another solution.
聚会有点晚了，但这是另一种解决方案。
Simply adjusting the class of the modal to something like alert-dangerdoes work, however it removes the top rounded corners of the modal.
简单地将模态的类调整为类似的东西alert-danger确实有效，但是它会删除模态的顶部圆角。
A workaround is to give the element with modal-headeran additional class of panel-heading, e.g.
一种解决方法是为元素提供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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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>
Then, to change the heading color you can do something like (assuming you're using jQUery)
然后，要更改标题颜色，您可以执行以下操作（假设您使用的是 jQUEry）
jQuery('.modal-content').addClass('panel-danger')
