twitter-bootstrap - 具有危险状态类的引导模式？

Question

Bootstrap 为面板提供上下文替代方案，通过添加任何上下文状态类（例如面板警告或面板危险）来轻松设置面板样式。

bootstrap 是否为Modals提供类似的机制？还是有一种简单的方法可以将“面板警告”类应用于模态？

我尝试使用<div class="modal modal-warning">and even <div class="modal panel-warning">，但都没有成功。

谢谢！

Answer 1

可以，但可能很危险。
我已经申请panel-warning和panel-heading上课modal-contentmodal-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

您可以简单地将这些背景类之一添加到具有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>