具有危险状态类的Bootstrap模态？

Question

Bootstrap 为面板提供了Contextual Alternatives,通过添加任何上下文状态类(如panel-warning或panel-danger),可以轻松地为面板设置样式.

bootstrap是否为Modals提供了类似的机制？或者是否有一种简单的方法将"面板警告"类应用于模态？

我尝试使用<div class="modal modal-warning">甚至<div class="modal panel-warning">,但都没有奏效.

谢谢!

Answer 1

你可以,但它可能是危险的.
我已经申请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">&times;</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注意到顶部border-radius略有不同.这是修复:

.panel-heading
{
    border-top-left-radius: inherit; 
    border-top-right-radius: inherit;
}

检查小提琴.

Answer 2

.alert- [上下文]

由于.alerts是一个相当简单的组成部分,它可能意味着副作用的可能性较小.

我过去的方法是将alert-danger(或任何上下文)类添加到modal-header有时modal-footer.您可以更进一步将其添加到modal-body.对我来说,只把它放在标题上似乎更优雅 - 但我不会告诉你如何设置你的标记样式;)

Answer 3

Bootstrap 4 用卡片替换面板。警告和危险背景可以应用于具有以下 Bootstrap 类的卡片：

 bg-warning
 bg-danger

你可以简单地添加这些背景类有你的“模态内容”类容器的一个模式：

class="modal-content text-white bg-warning"

bg-danger 给出红色背景

您可以在模态中使用卡片来突出显示模态内的警告消息，如下所示：

标记：

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