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>

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

Быть веб-разработчиком в 2020 – Часть 1: CSS или Bootstrap?

30 марта, 2020

Как пользоваться bootstrap Glyphicons

14 февраля, 2017

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

3 апреля, 2020

Как использовать Bootstrap с WordPress для создания своей темы?

4 июля, 2021