twitter-bootstrap 具有危险状态类的 Bootstrap 模态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18239094/
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
Bootstrap Modal with Danger State Class?
提问by Kuyenda
Bootstrap offer Contextual Alternatives for Panelsthat make it easy to style the panel by adding any of the contextual state classes such as panel-warning or panel-danger.
Bootstrap为面板提供上下文替代方案，通过添加任何上下文状态类（例如面板警告或面板危险），可以轻松设置面板样式。
Does bootstrap offer a similar mechanism for Modals? Or is there an easy way to apply the "panel-warning" class to a modal?
bootstrap 是否为Modals提供了类似的机制？或者是否有一种简单的方法可以将“面板警告”类应用于模态？
I tried using <div class="modal modal-warning">and even <div class="modal panel-warning">, but neither worked.
我尝试使用<div class="modal modal-warning">和 even <div class="modal panel-warning">，但都没有奏效。
Thanks!
谢谢！
回答by LeftyX
You can but it might be dangerous.
I've applied panel-warningand panel-headingto the class modal-contentand modal-header
你可以，但它可能很危险。
我已经申请panel-warning并panel-heading到类modal-content和modal-header
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content panel-warning">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@pimlottc has noticed the top border-radiusis slightly different.
Here is the fix:
@pimlottc 注意到顶部border-radius略有不同。这是修复：
.panel-heading
{
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
Check the fiddle.
检查小提琴。
回答by Cody
.alert-[context]
.alert-[上下文]
As .alerts are a fairly simplistic component, it may mean a lesser likelihood of side-effects.
由于.alerts 是一个相当简单的组件，它可能意味着副作用的可能性较小。
My approach in the past has been adding the alert-danger(or whatever context) class to modal-header& sometimes modal-footer. You can go a step further and add it to modal-body. To me it seems more elegant to only put it on the header -- but I won't tell you how to style your markup ;)
我过去的方法是将alert-danger（或任何上下文）类添加到modal-header& 有时modal-footer。您可以更进一步，将其添加到modal-body. 对我来说，只把它放在标题上似乎更优雅——但我不会告诉你如何设置你的标记的样式；)
回答by Chris Halcrow
Bootstrap 4 replaces panels with cards. Warning and danger backgrounds can be applied to a card with the following Bootstrap classes:
Bootstrap 4 用卡片替换面板。警告和危险背景可以应用于具有以下 Bootstrap 类的卡片：
bg-warning
bg-danger
You can simply add one of these background classes to the container that has the 'modal-content' class for your modal:
你可以简单地添加这些背景类有你的“模态内容”类容器的一个模式：
class="modal-content text-white bg-warning"
bg-dangergives a red background
bg-danger给出红色背景
You can use a card withinthe modal to highlight a warning message inside the modal like this:
您可以在模态中使用卡片来突出显示模态内的警告消息，如下所示：
Markup:
标记：
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My title</h4>
</div>
<div class="modal-body">
You can't undo this
<div class="card text-white bg-warning mt-3 p-2">
This is a warning - bad things may happen
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onConfirm()"><ng-container i18n>Yes</ng-container></button>
<button type="button" class="btn btn-secondary" (click)="onCancel()"><ng-container i18n>No</ng-container></button>
</div>
</div>
</div>
