Skip to main content

Компоненты

Более десятка повторно используемых компонентов построена так, чтобы обеспечить кнопок, выпадающих меню, входной группы, навигации, уведомления, и многое другое.

Уведомления

Предоставьте контекстные интерактивные сообщения для типовых действий пользователей с помощью нескольких доступных и гибких предупреждающих сообщений.

Содержание

Примеры

Уведомления доступны для любой длины текста, а также опционную кнопку закрыть. Для правильной укладки, используйте один из четырех требуется контекстная классов (например, .alert-success). Для встроенных увольнения, используйте уведомления jQuery плагин.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Используйте вспомогательный класс .alert-link, чтобы быстро предоставить соответствующие цветные ссылки в пределах любого замечания.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

Дополнительный контент

Уведомления также могут содержать дополнительные элементы HTML, как заголовки и абзацы.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Отклоняющие

Используя алерт JavaScript плагин, его можно уволить любого оповещения встроенный. Вот как:

  • Убедитесь, что вы загрузили плагин оповещения, или скомпилированный Bootstrap JavaScript.
  • Добавить кнопки "закрыть" и .alert-dismissible класс, который добавляет дополнительный внутренний отступ правое предупреждения и позиции #1 кнопка#.
  • На кнопку закрыть, добавить data-dismiss="alert" атрибут, который инициирует JavaScript функциональности. Обязательно используйте <button> элемент для правильного поведения во всех устройствах.
  • Чтобы анимировать предупреждения при увольнении их, не забудьте добавить .fade и .in классы.

Вы можете увидеть это в действии с демо:

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

JavaScript поведение

Триггеры

Включить увольнения сигнал через JavaScript:

$(".alert").alert()

Или с data атрибутами на кнопку в предупреждение, как показано выше:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Обратите внимание, что закрытие предупреждения будет удален из DOM.

Методы

Способ Описание
$().alert() Делает оповещение, прослушивание события щелчка на дочерние элементы, которые имеют атрибут data-dismiss="alert". (Не требуется при использовании данных API для автоматической инициализации.)
$().alert('close') Закрывается предупреждение, удалив его из DOM. Если .fade и .in классы присутствуют на элемент, предупреждение исчезнет, прежде чем он будет удален.
$(".alert").alert('close')

События

Bootstrap плагин оповещения предоставляет несколько событий для навески функционал оповещения.

Событие Описание
close.bs.alert Это событие возникает сразу же, когда close вызывается способ экземпляра.
closed.bs.alert Это событие запускается, когда сигнал был закрыт (будем ждать CSS переходы для завершения).
$('#myAlert').on('closed.bs.alert', function () {
  // сделать что-то...
})