Тень живет лишь при свете (Ж. Ренар).
Bootstrap – Оповещения
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Вы можете добавить дополнительный значок рядом, для предупреждения. Для встроенных предупреждений используйте плагин JQuery Alerts.
Вы можете добавить базовое предупреждение, создавая оболочку <div> и добавив класс .alert и один из четырех контекстных классов (например, .alert-success, .alert-info, .alert-warning, .alert-danger), следующий пример демонстрирует это:
1 2 3 4 | <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>.
- Добавьте кнопку закрытия.
Следующий пример демонстрирует это:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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, чтобы быстро обеспечить соответствие цвета ссылок в любое предупреждение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
