Алертс
Обезбедите контекстуалне повратне поруке за типичне радње корисника уз прегршт доступних и флексибилних порука упозорења.
Примери
Упозорења су доступна за било коју дужину текста, као и опционо дугме за затварање. За правилан стил, користите једну од осам потребних контекстуалних класа (нпр. .alert-success
). За инлине отпуштање користите ЈаваСцрипт додатак за упозорења .
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Преношење значења помоћним технологијама
Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .visually-hidden
класом.
Боја везе
Користите .alert-link
класу услужних програма да бисте брзо обезбедили одговарајуће везе у боји унутар било ког упозорења.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Додатни садржај
Упозорења такође могу да садрже додатне ХТМЛ елементе попут наслова, пасуса и разделника.
Добро урађено!
Ау, да, успешно сте прочитали ову важну поруку упозорења. Овај пример текста ће трајати мало дуже да бисте могли да видите како размак унутар упозорења функционише са овом врстом садржаја.
Кад год вам је потребно, обавезно користите помоћне програме за маргине да бисте ствари одржали лепим и уредним.
<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>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
Иконе
Слично томе, можете користити флекбок услужне програме и иконе за покретање да бисте креирали упозорења са иконама. У зависности од ваших икона и садржаја, можда ћете желети да додате више услужних програма или прилагођених стилова.
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="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:">
<path d="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>
An example alert with an icon
</div>
</div>
Треба вам више од једне иконе за ваша упозорења? Размислите о коришћењу више Боотстрап икона и прављењу локалног СВГ сприте-а тако да лако позивате на исте иконе више пута.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="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>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="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>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="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>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</div>
Одбацивање
Користећи ЈаваСцрипт додатак за упозорење, могуће је одбацити било које упозорење у тексту. Ево како:
- Уверите се да сте учитали додатак за упозорење или компајлирани Боотстрап ЈаваСцрипт.
- Додајте дугме за затварање и
.alert-dismissible
класу, која додаје додатно поље са десне стране упозорења и позиционира дугме за затварање. - На дугме за затварање додајте
data-bs-dismiss="alert"
атрибут који покреће ЈаваСцрипт функционалност. Обавезно користите<button>
елемент са њим за правилно понашање на свим уређајима. - Да бисте анимирали упозорења када их одбаците, обавезно додајте
.fade
и.show
класе.
Ово можете видети у акцији са демо уживо:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
closed.bs.alert
догађај и програмски поставља
focus()
на најприкладнију локацију на страници. Ако планирате да преместите фокус на неинтерактивни елемент који обично не прима фокус, обавезно додајте
tabindex="-1"
елементу.
Сасс
Променљиве
$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, $value in $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);
}
}
ЈаваСцрипт понашање
Триггерс
Омогућите одбацивање упозорења путем ЈаваСцрипт-а:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Или са data
атрибутима на дугмету у упозорењу , као што је приказано изнад:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Имајте на уму да ће затварање упозорења уклонити из ДОМ-а.
Методе
Можете креирати инстанцу упозорења помоћу конструктора упозорења, на пример:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Ово чини да упозорење ослушкује догађаје клика на елементе потомке који имају data-bs-dismiss="alert"
атрибут. (Није неопходно када се користи аутоматска иницијализација дата-апи-ја.)
Метод | Опис |
---|---|
close |
Затвара упозорење уклањањем из ДОМ-а. Ако су класе .fade и .show присутне на елементу, упозорење ће нестати пре него што се уклони. |
dispose |
Уништава упозорење елемента. (Уклања сачуване податке на ДОМ елементу) |
getInstance |
Статичка метода која вам омогућава да добијете инстанцу упозорења која је повезана са ДОМ елементом, можете је користити овако:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Статичка метода која враћа инстанцу упозорења која је повезана са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Догађаји
Боотстрап додатак за упозорење излаже неколико догађаја за повезивање са функцијом упозорења.
Догађај | Опис |
---|---|
close.bs.alert |
Активира се одмах када close се позове метод инстанце. |
closed.bs.alert |
Активира се када је упозорење затворено и ЦСС прелази су завршени. |
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// 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()
})