Bootstrap – Оповещения

В этой главе мы поговорим о предупреждениях и классах обеспечивающих получение оповещений в Bootstrap. Сигналы обеспечивают способ стиля сообщений пользователя. Они обеспечивают контекстные сообщения обратной связи для типичных действий пользователя.

Вы можете добавить дополнительный значок рядом, для предупреждения. Для встроенных предупреждений используйте плагин JQuery Alerts.

Вы можете добавить базовое предупреждение, создавая оболочку <div> и добавив класс .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger), следующий пример демонстрирует это:

<div class="alert alert-success">Успешно! Все успешно отправлено.</div>
<div class="alert alert-info">Информация! Принять к сведению.</div>
<div class="alert alert-warning">Предупреждение! Не отправилось.</div>
<div class="alert alert-danger">Ошибка! Изменено несколько событий.</div>

 

Предупреждения с освобождением

Для того, чтобы построить предупреждение с освобождением:

• Добавьте основное предупреждение путем создания оболочки <div> и добавив класс .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger).
• Кроме того, добавьте дополнительный класс .alert-dismissable к выше  стоящему <div>.
• Добавьте кнопку закрытия.

Следующий пример демонстрирует это:

<div class="alert alert-success alert-dismissable"><button class="close" type="button" data-dismiss="alert">
×
</button>Успешно! Все успешно отправлено.

</div>
<div class="alert alert-info alert-dismissable"><button class="close" type="button" data-dismiss="alert">
×
</button>Информация! Принять к сведению.

</div>
<div class="alert alert-warning alert-dismissable"><button class="close" type="button" data-dismiss="alert">
×
</button>Предупреждение! Не отправилось.

</div>
<div class="alert alert-danger alert-dismissable"><button class="close" type="button" data-dismiss="alert">
×
</button>Ошибка! Изменено несколько событий.

</div>

 

Обязательно используйте элемент <button> с атрибутом данных data-dismiss = “alert”.

Ссылки на оповещения

Для получения ссылки на предупреждение:

• Добавить основное предупреждение путем создания оболочки <div> и добавить класс .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger).
• Используйте служебный класс .alert-link, чтобы быстро обеспечить соответствие цвета ссылок в любое предупреждение.

<div class = "alert alert-success">
 <a href = "#" class = "alert-link">Успешно! Все успешно отправлено.</a>
</div>

<div class = "alert alert-info">
 <a href = "#" class = "alert-link">Информация! Принять к сведению.</a>
</div>

<div class = "alert alert-warning">
 <a href = "#" class = "alert-link">Предупреждение! Не отправилось.</a>
</div>

<div class = "alert alert-danger">
 <a href = "#" class = "alert-link">Ошибка! Изменено несколько событий.</a>
</div>

 

 

Читайте также