Уведомления

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

На этой странице

Примеры

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

Внимание! Начиная с версии 5.3.0, Sass миксин alert-variant() устарел. У вариантов предупреждений теперь переменные CSS переопределены в цикле Sass.

Простое уведомление primary — проверьте!

Простое уведомление secondary — проверьте!

Простое уведомление success — проверьте!

Простое уведомление danger — проверьте!

Простое уведомление warning — проверьте!

Простое уведомление info — проверьте!

Простое уведомление light — проверьте!

Простое уведомление dark — проверьте!

html

<divclass="alert alert-primary"role="alert"> Простое уведомление primary — проверьте!
</div><divclass="alert alert-secondary"role="alert"> Простое уведомление secondary — проверьте!
</div><divclass="alert alert-success"role="alert"> Простое уведомление success — проверьте!
</div><divclass="alert alert-danger"role="alert"> Простое уведомление danger — проверьте!
</div><divclass="alert alert-warning"role="alert"> Простое уведомление warning — проверьте!
</div><divclass="alert alert-info"role="alert"> Простое уведомление info — проверьте!
</div><divclass="alert alert-light"role="alert"> Простое уведомление light — проверьте!
</div><divclass="alert alert-dark"role="alert"> Простое уведомление dark — проверьте!
</div>

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

Живой пример

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

html

<divid="liveAlertPlaceholder"></div><buttontype="button"class="btn btn-primary"id="liveAlertBtn">Показать живое уведомление</button>

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

constalertPlaceholder=document.getElementById('liveAlertPlaceholder')constappendAlert=(message,type)=>{constwrapper=document.createElement('div')wrapper.innerHTML=[`<div class="alert alert-${type} alert-dismissible" role="alert">`,` <div>${message}</div>`,' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>','</div>'].join('')alertPlaceholder.append(wrapper)}constalertTrigger=document.getElementById('liveAlertBtn')if(alertTrigger){alertTrigger.addEventListener('click',()=>{appendAlert('Nice, you triggered this alert message!','success')})}

Цвет ссылки

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

Простое primary уведомление примером ссылки. Нажмите, если нравится.

Простое secondary уведомление примером ссылки. Нажмите, если нравится.

Простое success уведомление примером ссылки. Нажмите, если нравится.

Простое danger уведомление примером ссылки. Нажмите, если нравится.

Простое warning уведомление примером ссылки. Нажмите, если нравится.

Простое info уведомление примером ссылки. Нажмите, если нравится.

Простое light уведомление примером ссылки. Нажмите, если нравится.

Простое dark уведомление примером ссылки. Нажмите, если нравится.

html

<divclass="alert alert-primary"role="alert"> Простое primary уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-secondary"role="alert"> Простое secondary уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-success"role="alert"> Простое success уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-danger"role="alert"> Простое danger уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-warning"role="alert"> Простое warning уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-info"role="alert"> Простое info уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-light"role="alert"> Простое light уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div><divclass="alert alert-dark"role="alert"> Простое dark уведомление <ahref="#"class="alert-link">примером ссылки</a>. Нажмите, если нравится.
</div>

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

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

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

О да, Вы успешно прочитали это важное уведомляющее сообщение. Этот пример текста будет работать немного дольше, чтобы Вы могли увидеть, как интервалы в уведомлении работают с этим типом контента.

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

html

<divclass="alert alert-success"role="alert"><h4class="alert-heading">Отлично сработано!</h4><p>О да, Вы успешно прочитали это важное уведомляющее сообщение. Этот пример текста будет работать немного дольше, чтобы Вы могли увидеть, как интервалы в уведомлении работают с этим типом контента.</p><hr><pclass="mb-0">Когда Вам нужно, обязательно используйте утилиты полей, чтобы все было в хорошо и аккуратно.</p></div>

Иконки

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

Пример уведомления с иконкой

html

<divclass="alert alert-primary d-flex align-items-center"role="alert"><svgxmlns="http://www.w3.org/2000/svg"class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2"viewBox="0 0 16 16"role="img"aria-label="Warning:"><pathd="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg><div> Пример уведомления с иконкой
</div></div>

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

Пример уведомления с иконкой

Пример уведомления об успехе с иконкой

Пример уведомления предупреждения с иконкой

Пример уведомления об опасности с иконкой

html

<svgxmlns="http://www.w3.org/2000/svg"style="display: none;"><symbolid="check-circle-fill"viewBox="0 0 16 16"><pathd="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></symbol><symbolid="info-fill"viewBox="0 0 16 16"><pathd="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></symbol><symbolid="exclamation-triangle-fill"viewBox="0 0 16 16"><pathd="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></symbol></svg><divclass="alert alert-primary d-flex align-items-center"role="alert"><svgclass="bi flex-shrink-0 me-2"role="img"aria-label="Info:"><usexlink:href="#info-fill"/></svg><div> Пример уведомления с иконкой
</div></div><divclass="alert alert-success d-flex align-items-center"role="alert"><svgclass="bi flex-shrink-0 me-2"role="img"aria-label="Success:"><usexlink:href="#check-circle-fill"/></svg><div> Пример уведомления об успехе с иконкой
</div></div><divclass="alert alert-warning d-flex align-items-center"role="alert"><svgclass="bi flex-shrink-0 me-2"role="img"aria-label="Warning:"><usexlink:href="#exclamation-triangle-fill"/></svg><div> Пример уведомления предупреждения с иконкой
</div></div><divclass="alert alert-danger d-flex align-items-center"role="alert"><svgclass="bi flex-shrink-0 me-2"role="img"aria-label="Danger:"><usexlink:href="#exclamation-triangle-fill"/></svg><div> Пример уведомления об опасности с иконкой
</div></div>

Отклонение

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

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

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

Святой гуакамоле! Вам следует проверить некоторые из этих полей ниже.

html

<divclass="alert alert-warning alert-dismissible fade show"role="alert"><strong>Святой гуакамоле!</strong> Вам следует проверить некоторые из этих полей ниже.
<buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Закрыть"></button></div>

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

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к переменным CSS уведомления теперь используют локальные переменные CSS в .alert для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_alert.scss

--#{$prefix}alert-bg:transparent;--#{$prefix}alert-padding-x:#{$alert-padding-x};--#{$prefix}alert-padding-y:#{$alert-padding-y};--#{$prefix}alert-margin-bottom:#{$alert-margin-bottom};--#{$prefix}alert-color:inherit;--#{$prefix}alert-border-color:transparent;--#{$prefix}alert-border:#{$alert-border-width}solidvar(--#{$prefix}alert-border-color);--#{$prefix}alert-border-radius:#{$alert-border-radius};--#{$prefix}alert-link-color:inherit;

Переменные Sass

scss/_variables.scss

$alert-padding-y:$spacer;$alert-padding-x:$spacer;$alert-margin-bottom:1rem;$alert-border-radius:var(--#{$prefix}border-radius);$alert-link-font-weight:$font-weight-bold;$alert-border-width:var(--#{$prefix}border-width);$alert-dismissible-padding-r:$alert-padding-x*3;// 3x covers width of x plus default padding on either side

Миксины Sass

Устарело начиная с v5.3.0

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

scss/mixins/_alert.scss

@mixin alert-variant($background,$border,$color){--#{$prefix}alert-color:#{$color};--#{$prefix}alert-bg:#{$background};--#{$prefix}alert-border-color:#{$border};--#{$prefix}alert-link-color:#{shade-color($color,20%)};@if$enable-gradients{background-image:var(--#{$prefix}gradient);}.alert-link{color:var(--#{$prefix}alert-link-color);}}

Циклы Sass

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

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert
@each$stateinmap-keys($theme-colors){.alert-#{$state}{--#{$prefix}alert-color:var(--#{$prefix}#{$state}-text-emphasis);--#{$prefix}alert-bg:var(--#{$prefix}#{$state}-bg-subtle);--#{$prefix}alert-border-color:var(--#{$prefix}#{$state}-border-subtle);--#{$prefix}alert-link-color:var(--#{$prefix}#{$state}-text-emphasis);}}

Поведение JavaScript

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

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

constalertList=document.querySelectorAll('.alert')constalerts=[...alertList].map(element=>newbootstrap.Alert(element))

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

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

Триггеры

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

<buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Закрыть"></button>

или на кнопке вне alert, используя дополнительный data-bs-target, как показано ниже:

<buttontype="button"class="btn-close"data-bs-dismiss="alert"data-bs-target="#my-alert"aria-label="Закрыть"></button>

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

Методы

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

constbsAlert=newbootstrap.Alert('#myAlert')

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

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

Основное использование:

constalert=bootstrap.Alert.getOrCreateInstance('#myAlert')alert.close()

События

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

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

constmyAlert=document.getElementById('myAlert')myAlert.addEventListener('closed.bs.alert',event=>{// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})