Alarmet
Siguroni mesazhe reagimi kontekstual për veprimet tipike të përdoruesit me një numër të vogël mesazhesh alarmi të disponueshme dhe fleksibël.
Shembuj
Alarmet janë të disponueshme për çdo gjatësi të tekstit, si dhe një buton opsional mbylljeje. Për stilimin e duhur, përdorni një nga tetë klasat e kërkuara kontekstuale (p.sh., .alert-success
). Për largim nga puna, përdorni shtesën JavaScript të sinjalizimeve .
<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>
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hidden
klasën.
Ngjyra e lidhjes
Përdorni .alert-link
klasën e shërbimeve për të siguruar shpejt lidhjet me ngjyra që përputhen brenda çdo sinjalizimi.
<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>
Përmbajtje shtesë
Alarmet mund të përmbajnë gjithashtu elementë shtesë HTML si tituj, paragrafë dhe ndarës.
Te lumte!
Po, ju e lexuat me sukses këtë mesazh të rëndësishëm alarmi. Ky tekst shembull do të zgjasë pak më gjatë në mënyrë që të mund të shihni se si funksionon hapësira brenda një sinjalizimi me këtë lloj përmbajtjeje.
Sa herë që keni nevojë, sigurohuni që të përdorni shërbimet e marzhit për t'i mbajtur gjërat të këndshme dhe të rregullta.
<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>
Ikonat
Në mënyrë të ngjashme, mund të përdorni shërbimet flexbox dhe Bootstrap Icons për të krijuar sinjalizime me ikona. Në varësi të ikonave dhe përmbajtjes suaj, mund të dëshironi të shtoni më shumë shërbime ose stile të personalizuara.
<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>
Keni nevojë për më shumë se një ikonë për sinjalizimet tuaja? Konsideroni të përdorni më shumë ikona Bootstrap dhe të krijoni një sprite lokale SVG si kjo për t'iu referuar lehtësisht të njëjtave ikona në mënyrë të përsëritur.
<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>
Duke hedhur poshtë
Duke përdorur shtojcën JavaScript të alarmit, është e mundur të anuloni çdo sinjalizim në linjë. Ja se si:
- Sigurohuni që të keni ngarkuar shtojcën e alarmit ose JavaScript të përpiluar Bootstrap.
- Shto një buton mbylljeje dhe
.alert-dismissible
klasën, e cila shton mbushje shtesë në të djathtë të sinjalizimit dhe pozicionon butonin e mbylljes. - Në butonin e mbylljes, shtoni
data-bs-dismiss="alert"
atributin, i cili aktivizon funksionalitetin JavaScript. Sigurohuni që të përdorni<button>
elementin me të për sjelljen e duhur në të gjitha pajisjet. - Për të animuar sinjalizimet kur i hiqni ato, sigurohuni që të shtoni klasat
.fade
dhe ..show
Ju mund ta shihni këtë në veprim me një demonstrim të drejtpërdrejtë:
<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
ngjarjen dhe vendos programatikisht
focus()
në vendndodhjen më të përshtatshme në faqe. Nëse po planifikoni të zhvendosni fokusin në një element jointeraktiv që normalisht nuk merr fokus, sigurohuni që ta shtoni
tabindex="-1"
në element.
Sass
Variablat
$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
Varianti i përzierjes
Përdoret në kombinim me $theme-colors
për të krijuar klasa modifikuese kontekstuale për sinjalizimet tona.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Lak
Lak që gjeneron klasat e modifikuesve me alert-variant()
miksin.
// 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);
}
}
Sjellja JavaScript
Shkaqet
Aktivizo heqjen e një sinjalizimi nëpërmjet JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Ose me data
atributet në një buton brenda alarmit , siç tregohet më sipër:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Vini re se mbyllja e një sinjalizimi do ta heqë atë nga DOM.
Metodat
Mund të krijoni një shembull alarmi me konstruktorin e alarmit, për shembull:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Kjo bën që një alarm të dëgjojë për ngjarjet e klikimeve në elementët pasardhës që kanë data-bs-dismiss="alert"
atributin. (Nuk është e nevojshme kur përdorni inicializimin automatik të data-api.)
Metoda | Përshkrim |
---|---|
close |
Mbyll një alarm duke e hequr atë nga DOM. Nëse klasat .fade dhe .show janë të pranishme në element, sinjalizimi do të shuhet përpara se të hiqet. |
dispose |
Shkatërron alarmin e një elementi. (Heq të dhënat e ruajtura në elementin DOM) |
getInstance |
Metoda statike e cila ju lejon të merrni shembullin e alarmit të lidhur me një element DOM, mund ta përdorni si kjo:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Metoda statike e cila kthen një shembull alarmi të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Ngjarjet
Shtojca e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.
Ngjarja | Përshkrim |
---|---|
close.bs.alert |
Ndizet menjëherë kur close thirret metoda e shembullit. |
closed.bs.alert |
Aktivizohet kur sinjalizimi është mbyllur dhe kalimet CSS kanë përfunduar. |
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()
})