twitter-bootstrap
бдительный

замечания

Типы предупреждений

В отличие от некоторых других компонентов Bootstrap, таких как кнопки , оповещения не имеют default или primary стиля, потому что они предназначены для оповещения пользователя определенным образом.

<div class="alert alert-success" role="alert">
    Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
    Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
    Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
    An error (or something dangerous) happened!
</div>

Основной пример оповещения

<div class="container">
  <h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong>
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong>
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> All foelds are required
  </div>
  <div class="alert alert-danger">
    The username is required and can't be empty
  </div>
</div>

Анимированные оповещения

.fade и .in добавляют эффект замирания при закрытии сообщения предупреждения.

<div class="alert alert-success fade in">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <strong>Success!</strong> This is a good example!
</div>

Недопустимые оповещения

Чтобы дать оповещение о тесной функциональности, нам нужно только добавить data-dismiss="alert" к нашей кнопке закрытия.

<div class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    Sphinx of black quartz, judge my vow
</div>

.alert-dismissible и .close классы являются необязательными, полезными только для стилизации.

Цвет ссылки в оповещениях

Чтобы быстро предоставить соответствующий цвет для ссылок внутри любого предупреждения, мы можем использовать класс утилиты .alert-link .

<div class="alert alert-success">
    You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>

<div class="alert alert-info">
    You might want to check <a href="#"  class="alert-link">this</a> instead.
</div>

<div class="alert alert-warning">
    You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>

<div class="alert alert-danger">
    Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>