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

Question

Bootstrap商品Contextual Alternatives for Panels，可以通过添加任何上下文状态类（例如面板警告或面板危险）来轻松设置面板样式。

bootstrap是否为Modals提供了类似的机制？或者是否有一种简单的方法来应用＆＃34;面板警告＆＃34;类到模态？

我尝试使用<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;
}

检查fiddle。

Answer 2

.alert- [上下文]

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

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

Answer 3

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

 bg-warning
 bg-danger

您只需将以下背景类之一添加到具有modal的'modal-content'类的容器中即可：

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>