Последние учебники веб-разработки
 

Bootstrap Alerts


Оповещения

Bootstrap предоставляет простой способ создания предопределенных предупреждающие сообщения:

× Успех! Это окно предупреждения указывает на успешное или положительное действие.
× Info! Это окно предупреждения указывает на нейтральное информативный изменение или действие.
× Внимание! Это окно предупреждения указывает на предупреждение, что, возможно, потребуется внимание.
× Опасность! Это окно предупреждения указывает на опасную или потенциально негативное действие.

Оповещения создаются с .alert класса, а затем один из четырех классов контекстных .alert-success , .alert-info , .alert-warning или .alert-danger :

пример

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
Попробуй сам "

Оповещения Закрытие

Чтобы закрыть предупреждающее сообщение, добавить class="close" и data-dismiss="alert" на ссылку или кнопку элемента:

пример

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Попробуй сам "

aria-* атрибут и &times; объяснение

Для того, чтобы помочь улучшить доступность для людей , использующих программы чтения с экрана, вы должны включать aria-label="close" атрибут, при создании кнопки закрытия.

&times; (×) &times; (×) представляет собой HTML - объект , который является предпочтительным значок кнопки закрытия, а не буквой "x" .


Анимационные Alerts

.fade И .in классы добавляет затухающий эффект при закрытии предупреждающее сообщение:

пример

<div class="alert alert-success fade in">
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »


Полное Bootstrap Предупреждение Ссылка

Для полного ведения всех предупреждений вариантов, методов и событий, перейдите на наш Bootstrap JS оповещения Reference .