Twitter bootstrap 带危险状态类的引导模式？

通过添加任何上下文状态类（如panel warning或panel danger），Bootstrap提供了可以轻松设置面板样式的功能

bootstrap是否提供了类似的机制？还是有一种简单的方法可以将“panel warning”类应用于模态

我试着使用

甚至

，但都不起作用

---

谢谢

你可以，但这可能很危险。
我已将

面板警告

和

面板标题

应用于类

模态内容

和

模态标题

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

检查.

.alert-[context] 由于

.alert

s是一个相当简单的组件，它可能意味着副作用的可能性较小

---

我过去的方法是将

警报危险

（或任何上下文）类添加到

模式页眉

&有时是

模式页脚

。您可以进一步将其添加到

模态体

。在我看来，只将其放在标题上似乎更为优雅——但我不会告诉您如何设置标记的样式；）

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

 bg-warning
 bg-danger

您只需将其中一个后台类添加到包含“模态内容”类的容器中即可：

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>

我的头衔
你不能撤销这个
这是一个警告——坏事可能会发生
对
不

谢谢！我在课堂上遗漏了小组标题。我同意，这有潜在的危险。在这种情况下，简单地为模态设置样式几乎同样容易。很高兴我能提供帮助。干杯。基于Bootstrap 3.0.0，应该在“模式内容”上添加“面板警告”类，而不是“模式对话框”。检查这把小提琴：@idearibosome:谢谢你提供的信息。自从我回答之后，一定有什么改变了。用你的信息更新了我的答案。干杯。尝试将

bg warning

类添加到

模式标题中。这就足够了。我喜欢这个想法，但很快就发现警报缺少主上下文和默认上下文，这在某些情况下会阻止您将按钮触发的模式与其模式进行匹配。嗯。很好的一点是，T.J.模态总是保留JS行为，所以为什么不将其作为一个选项——甚至可能是默认的。
class="modal-content text-white bg-warning"

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