ИТ Блог. Создание сайтов с применением Bootstrap
(2 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе мы поговорим о предупреждениях и классах обеспечивающих получение оповещений в 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 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 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>
