Сообщение об успехе bootstrap

Обновлено: 30.06.2024

Примеры

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

Использование вспомогательных технологий

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

Живой пример

Мы используем следующий код JavaScript для запуска нашей демонстрации предупреждений в реальном времени:

Цвет ссылки

Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.

Дополнительное содержимое

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

Отличная работа!

Если необходимо, используйте утилиты отступа для создания необходимых отступов.

Иконки

Точно так же вы можете использовать утилиты flexbox и Bootstrap Icons для создания предупреждений с помощью иконок. В зависимости от ваших иконок и содержимого вы можете добавить больше утилит или настраиваемых стилей.

Вам нужно более одного значка для ваших уведомлений? Подумайте о том, чтобы использовать больше иконок Bootstrap и создать такой локальный спрайт SVG, чтобы легко ссылаться на одни и те же иконки повторно.

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

Когда предупреждение закрывается, элемент полностью удаляется из структуры страницы. Если ипользовать клавиатуру для отклонения предупреждение с помощью кнопки закрытия, его фокус теряется и в зависимости от браузера, сбрасывается на начало страницы/документа. По этой причине мы рекомендуем добавить дополнительный код JavaScript, который мониторит событие closed.bs.alert и программно устанавливает event focus() в наиболее подходящее место на странице. Если вы планируете переместить фокус на неинтерактивный элемент, который обычно не в фокусу, то обязательно добавьте к элементу tabindex="-1" .

Переменные

Вариант миксина

Используется в сочетании с $theme-colors для создания классов контекстных модификаторов для наших предупреждений.

Цикл, который генерирует классы модификаторов с помощью миксина alert-variant() .

Поведение JavaScript

Инициализация

Инициализировать элементы как уведомления

Единственная цель - отклонить предупреждение, нет необходимости инициализировать компонент вручную через JS API. При использовании data-bs-dismiss="alert" , компонент будет автоматически инициализирован и должным образом закрыт.

Подробнее см. В разделе триггеры.

Триггеры

Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри alert, как показано ниже:

или на кнопке за пределами alert с помощью data-bs-target , как показано ниже:

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

Методы

Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:

Это заставляет предупреждения alert отсеживать нажатие на дочерних элементах, которые имеют атрибут data-dismiss="alert" . (Не требуется при использовании автоматической инициализации data-api.)

Метод	Описание
close	Закрывает уведомление, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show , предупреждение исчезнет, прежде чем оно будет удалено.
dispose	Уничтожает уведомление элемента (Удаляет сохраненные данные в элементе DOM)
getInstance	Статический метод, который позволяет Вам получить экземпляр предупреждения, связанный с элементом DOM, Вы можете использовать его следующим образом: bootstrap.Alert.getInstance(alert)
getOrCreateInstance	Статический метод, который возвращает экземпляр предупреждения, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Alert.getOrCreateInstance(element)

События

Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.

Примеры

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

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

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

Цвет ссылки

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

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

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

Отлично сработано!

Когда Вам нужно, обязательно используйте утилиты полей, чтобы все было в хорошо и аккуратно.

Иконки

Отклонение

Точно так же вы можете использовать утилиты flexbox и Иконки Bootstrap для создания предупреждений с помощью иконок. В зависимости от ваших иконок и содержимого вы можете добавить больше утилит или настраиваемых стилей.

Вам нужно более одной иконки для ваших уведомлений? Рассмотрите возможность использования большего количества иконок Bootstrap и создания подобного локального спрайта SVG, чтобы можно было легко ссылаться на одни и те же иконки повторно.

Отклонение

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

Убедитесь, что Вы загрузили плагин уведомлений или скомпилированный Bootstrap JavaScript.
Добавьте кнопку закрытия и класс .alert-dismissible , который добавляет дополнительный отступ справа от уведомления и позиционирует кнопку закрытия.
На кнопку закрытия добавьте атрибут data-bs-dismiss="alert" , который активирует функциональность JavaScript. Обязательно используйте с ним элемент для правильного поведения на всех устройствах.
Чтобы анимировать уведомления при их отклонении, не забудьте добавить классы .fade и .show .

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

Когда уведомление закрывается, элемент полностью удаляется из структуры страницы. Если пользователь клавиатуры отклоняет уведомление с помощью кнопки закрытия, его фокус внезапно теряется и, в зависимости от браузера, сбрасывается на начало страницы/документа. По этой причине мы рекомендуем включить дополнительный JavaScript, который прослушивает событие closed.bs.alert и программно устанавливает focus() в наиболее подходящее место на странице. Если Вы планируете переместить фокус на неинтерактивный элемент, который обычно не получает фокус, обязательно добавьте к элементу tabindex="-1" .

Переменные

Вариант миксина

Цикл, который генерирует классы модификаторов с помощью миксина alert-variant() .

Поведение JavaScript

Триггеры

Включите отклонение уведомления через JavaScript:

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

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

Методы

Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:

Это заставляет предупреждение прослушивать события клика на дочерних элементах, которые имеют атрибут data-bs-dismiss="alert" . (Не требуется при использовании автоматической инициализации data-api.)

Метод	Описание
close	Закрывает уведомление, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show , предупреждение исчезнет, прежде чем оно будет удалено.
dispose	Уничтожает уведомление элемента (Удаляет сохраненные данные в элементе DOM)
getInstance	Статический метод, который позволяет Вам получить экземпляр предупреждения, связанный с элементом DOM, Вы можете использовать его следующим образом: bootstrap.Alert.getInstance(alert)
getOrCreateInstance	Статический метод, который возвращает экземпляр предупреждения, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Alert.getOrCreateInstance(element)

События

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

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

Содержание

Примеры

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

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

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

Цвет ссылок

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

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

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

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Отклоняющие

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

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

JavaScript поведение

Триггеры

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

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

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

Методы

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

События

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

Событие	Описание
close.bs.alert	Это событие возникает сразу же, когда close вызывается способ экземпляра.
closed.bs.alert	Это событие запускается, когда сигнал был закрыт (будем ждать CSS переходы для завершения).

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Примеры

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

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

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

Цвет ссылки

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

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

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

Отлично сработано!

Когда вам нужно, обязательно используйте утилиты маржи, чтобы все было в порядке и порядке.

Dismissing (отклонение)

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

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

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

Поведение JavaScript

Триггеры

Включите отклонение предупреждения через JavaScript:

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

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

Методы

Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:

Это заставляет предупреждение прослушивать события щелчка на дочерних элементах, которые имеют data-dismiss="alert" атрибут. (Не требуется при использовании автоматической инициализации data-api.)

Метод	Описание
close	Закрывает предупреждение, удаляя его из модели DOM. Если .fade и .show классы присутствуют на элементе, предупреждение исчезнет, прежде чем он будет удален.
dispose	Уничтожает предупреждение элемента.
getInstance	Статический метод, который позволяет вам получить экземпляр предупреждения, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Alert.getInstance(alert)

События

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

Событие	Описание
close.bs.alert	Срабатывает немедленно при close вызове метода экземпляра.
closed.bs.alert	Срабатывает, когда предупреждение закрыто и переходы CSS завершены.

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Читайте также: