Bootstrap Modal с классом класса опасности?

Bootstrap предлагает Контекстные альтернативы для панелей, которые упрощают стиль панели, добавляя любые классы контекстуального состояния, такие как предупреждение панели или опасность панели.

Поддерживает ли bootstrap аналогичный механизм для Modals? Или есть простой способ применить класс "панель-предупреждение" к модальному?

Я попытался использовать <div class="modal modal-warning"> и даже <div class="modal panel-warning">, но не работал.

Ответы

Ответ 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.

Ответ 2

.alert- [контекст]

Поскольку .alert - довольно упрощенная компонента, это может означать меньшую вероятность побочных эффектов.

Мой подход в прошлом добавлял класс alert-danger (или любой другой) в modal-header, а иногда modal-footer. Вы можете сделать еще один шаг и добавить его в modal-body. Мне кажется, что более элегантно только поместить его в заголовок, но я не буду говорить вам, как стилить вашу разметку;)