Оповещения
Bootstrap предоставляет простой способ создания предопределенных предупреждающие сообщения:
Оповещения создаются с .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">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Попробуй сам " aria-* атрибут и × объяснение
Для того, чтобы помочь улучшить доступность для людей , использующих программы чтения с экрана, вы должны включать aria-label="close" атрибут, при создании кнопки закрытия.
× (×) × (×) представляет собой HTML - объект , который является предпочтительным значок кнопки закрытия, а не буквой "x" .
Анимационные Alerts
.fade
И .in
классы добавляет затухающий эффект при закрытии предупреждающее сообщение:
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »
Полное Bootstrap Предупреждение Ссылка
Для полного ведения всех предупреждений вариантов, методов и событий, перейдите на наш Bootstrap JS оповещения Reference .