Уведомления
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью доступных и гибких предупреждающих сообщений.
Примеры
Уведомления доступны для любой длины как текста, так и опциональной кнопки отмены. Для правильной стилизации используйте один из восьми требуемых контекстуальных классов (например, .alert-success). Для строчного отклонения используйте плагин уведомлений JavaScript.
<divclass="alert alert-primary"role="alert"> Это основное уведомление — check it out!
</div><divclass="alert alert-secondary"role="alert"> Это дополнительное уведомление — check it out!
</div><divclass="alert alert-success"role="alert"> Это уведомление об успехе — check it out!
</div><divclass="alert alert-danger"role="alert"> Это уведомление об опасности — check it out!
</div><divclass="alert alert-warning"role="alert"> Это уведомление-предупреждение — check it out!
</div><divclass="alert alert-info"role="alert"> Это инфо-уведомление — check it out!
</div><divclass="alert alert-light"role="alert"> Это светлое уведомление — check it out!
</div><divclass="alert alert-dark"role="alert"> Это темное уведомление — check it out!
</div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация обозначенная цветом, также доступна и из самого контента (например, видимый текст) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .visually-hidden текст.
Живой пример
Нажмите кнопку ниже, чтобы отобразить предупреждение (скрытое с помощью встроенных стилей для запуска), затем отклоните (и уничтожьте) его с помощью встроенной кнопки закрытия.
<buttontype="button"class="btn btn-primary"id="liveAlertBtn">Показать живое уведомление</button><divclass="alert alert-primary alert-dismissible"role="alert"id="liveAlert"><strong>Отлично!</strong> Вы активировали это уведомление. <buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close"></button></div>Мы используем следующий код JavaScript для запуска нашей демонстрации предупреждений в реальном времени:
varalertPlaceholder=document.getElementById('liveAlertPlaceholder')varalertTrigger=document.getElementById('liveAlertBtn')functionalert(message,type){varwrapper=document.createElement('div')wrapper.innerHTML='<div class="alert alert-'+type+' alert-dismissible" role="alert">'+message+'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'alertPlaceholder.append(wrapper)}if(alertTrigger){alertTrigger.addEventListener('click',function(){alert('Отлично, вы запустили это предупреждающее сообщение!','success')})}Цвет ссылки
Используйте класс .alert-link для соответствия цвета ссылок цветам уведомлений.
<divclass="alert alert-primary"role="alert"> Это основное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-secondary"role="alert"> Это дополнительное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-success"role="alert"> Это уведомление об успехе с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-danger"role="alert"> Это уведомление об опасности с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-warning"role="alert"> Это уведомление-предупреждение с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-info"role="alert"> Это инфо-уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-light"role="alert"> Это светлое уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div><divclass="alert alert-dark"role="alert"> Это темное уведомление с <ahref="#"class="alert-link">примером ссылки</a>.
</div>Дополнительное содержимое
Уведомления также могут содержать элементы HTML – заголовки, параграфы и т.п.
Отличная работа!
Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.
Если необходимо, используйте утилиты отступа для создания необходимых отступов.
<divclass="alert alert-success"role="alert"><h4class="alert-heading">Отличная работа!</h4><p>Вы успешно прочитали это важное сообщение. Это пример текста немного длиннее, так что вы увидите, как работают отступы в сообщениях уведомлений.</p><hr><pclass="mb-0">Если необходимо, используйте утилиты отступа для создания необходимых отступов.</p></div>Иконки
Точно так же вы можете использовать утилиты flexbox и Bootstrap Icons для создания предупреждений с помощью иконок. В зависимости от ваших иконок и содержимого вы можете добавить больше утилит или настраиваемых стилей.
<divclass="alert alert-primary d-flex align-items-center"role="alert"><svgxmlns="http://www.w3.org/2000/svg"width="24"height="24"fill="currentColor"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, чтобы легко ссылаться на одни и те же иконки повторно.
<svgxmlns="http://www.w3.org/2000/svg"style="display: none;"><symbolid="check-circle-fill"fill="currentColor"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"fill="currentColor"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"fill="currentColor"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"width="24"height="24"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"width="24"height="24"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"width="24"height="24"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"width="24"height="24"role="img"aria-label="Danger:"><usexlink:href="#exclamation-triangle-fill"/></svg><div> Пример уведомления об опасности с иконкой </div></div>Отмена («крестик»)
Использование JavaScript-плагина уведомлений дает возможность закрыть «крестиком» любое строчное уведомление.
- Удостоверьтесь, что подгрузили плагин уведомлений, или компилированный JavaScript из Bootstrap.
- Добавьте кнопку закрытия и класс
.alert-dismissible, который добавляет дополнительный отступ справа от предупреждения и спозиционирует кнопку закрытия. - В «крестике» отмены добавьте атрибут
data-bs-dismiss="alert", запускающий функциональность JavaScript. Используйте элемент<button>для правильной работы на всех устройствах. - Для анимации уведомлений при их закрытии добавьте классы
.fadeи.show.
Вы можете увидеть это в действии на живой демонстрации:
<divclass="alert alert-warning alert-dismissible fade show"role="alert"><strong>Holy guacamole!</strong> You should check in on some of those fields below. <buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close"></button></div>closed.bs.alert и программно устанавливает event focus() в наиболее подходящее место на странице. Если вы планируете переместить фокус на неинтерактивный элемент, который обычно не в фокусу, то обязательно добавьте к элементу tabindex="-1".
Sass
Переменные
$alert-padding-y:$spacer;$alert-padding-x:$spacer;$alert-margin-bottom:1rem;$alert-border-radius:$border-radius;$alert-link-font-weight:$font-weight-bold;$alert-border-width:$border-width;$alert-bg-scale:-80%;$alert-border-scale:-70%;$alert-color-scale:40%;$alert-dismissible-padding-r:$alert-padding-x*3;// 3x covers width of x plus default padding on either side
Вариант миксина
Используется в сочетании с $theme-colors для создания классов контекстных модификаторов для наших предупреждений.
@mixin alert-variant($background,$border,$color){color:$color;@include gradient-bg($background);border-color:$border;.alert-link{color:shade-color($color,20%);}}Цикл
Цикл, который генерирует классы модификаторов с помощью миксина alert-variant().
// Generate contextual modifier classes for colorizing the alert.
@each$state,$valuein$theme-colors{$alert-background:shift-color($value,$alert-bg-scale);$alert-border:shift-color($value,$alert-border-scale);$alert-color:shift-color($value,$alert-color-scale);@if(contrast-ratio($alert-background,$alert-color)<$min-contrast-ratio){$alert-color:mix($value,color-contrast($alert-background),abs($alert-color-scale));}.alert-#{$state}{@include alert-variant($alert-background,$alert-border,$alert-color);}}Поведение JavaScript
Инициализация
Инициализировать элементы как уведомления
varalertList=document.querySelectorAll('.alert')varalerts=[].slice.call(alertList).map(function(element){returnnewbootstrap.Alert(element)})Единственная цель - отклонить предупреждение, нет необходимости инициализировать компонент вручную через JS API. При использовании data-bs-dismiss="alert", компонент будет автоматически инициализирован и должным образом закрыт.
Подробнее см. В разделе триггеры.
Триггеры
Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри alert, как показано ниже:
<buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close"></button>или на кнопке за пределами alert с помощью data-bs-target, как показано ниже:
<buttontype="button"class="btn-close"data-bs-dismiss="alert"data-bs-target="#my-alert"aria-label="Close"></button>Обратите внимание, что закрытие предупреждения приведет к его удалению из DOM.
Методы
Вы можете создать экземпляр оповещения с помощью конструктора оповещений, например:
varmyAlert=document.getElementById('myAlert')varbsAlert=newbootstrap.Alert(myAlert)Это заставляет предупреждения alert отсеживать нажатие на дочерних элементах, которые имеют атрибут data-dismiss="alert". (Не требуется при использовании автоматической инициализации data-api.)
| Метод | Описание |
|---|---|
close | Закрывает уведомление, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .show, предупреждение исчезнет, прежде чем оно будет удалено. |
dispose | Уничтожает уведомление элемента (Удаляет сохраненные данные в элементе DOM) |
getInstance | Статический метод, который позволяет Вам получить экземпляр предупреждения, связанный с элементом DOM, Вы можете использовать его следующим образом: bootstrap.Alert.getInstance(alert) |
getOrCreateInstance | Статический метод, который возвращает экземпляр предупреждения, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Alert.getOrCreateInstance(element) |
varalertNode=document.querySelector('.alert')varalert=bootstrap.Alert.getInstance(alertNode)alert.close()События
Плагин уведомлений Bootstrap использует несколько событий для связи с функциональностью уведомлений.
| Событие | Описание |
|---|---|
close.bs.alert | Срабатывает немедленно при вызове метода экземпляра close. |
closed.bs.alert | Срабатывает, когда уведомление закрыто и переходы CSS завершены. |
varmyAlert=document.getElementById('myAlert')myAlert.addEventListener('closed.bs.alert',function(){// сделать что-нибудь, например, явно переместить фокус на наиболее подходящий элемент,
// чтобы он не терялся/не сбрасывался на начало страницы
// document.getElementById('...').focus()
})