Вслед за автором мудрого речения идет тот, кто впервые его процитировал (Р. Эмерсон).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
14 июня 2017
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>

 

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 100

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close