Alɛrt dɛn
Gi kɔntɛkstual fidbak mɛsej fɔ tipik yuza akshɔn dɛn wit di anful alɛt mɛsej dɛn we de ɛn we kin chenj.
Ɛgzampul dɛn
Alɛt dɛn de fɔ ɛni lɔng tɛks, ɛn yu kin gɛt wan bɔtin we yu kin pik fɔ lɔk. Fɔ mek yu stayl fayn, yuz wan pan di et kɔntɛkstual klas dɛn we yu nid.alert-success
(ɛgz., ). Fɔ dismisal insay layn, yuz di alɛt dɛn JavaSkript plɔgin .
<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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp
Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hidden
klas.
Link kɔlɔ
Yuz di .alert-link
yutiliti klas fɔ gi link dɛn we gɛt kɔlɔ we de mach kwik kwik wan insay ɛni alɛt.
<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>
Ɔda tin dɛn we de insay de
Alɛt dɛn kin gɛt ɔda HTML ɛlimɛnt dɛn bak lɛk ɛd, paregraf ɛn divayda dɛn.
Wɛl dɔn!
Aww yeah, yu saksesfuli rid dis impotant alert mesej. Dis ɛgzampul tɛks go rɔn smɔl lɔng so dat yu go si aw spɛshal insay wan alɛt de wok wit dis kayn kɔntinyu.
Ɛnitɛm we yu nid fɔ du dat, mek shɔ se yu yuz margin utilities fɔ mek tin dɛn fayn ɛn klin.
<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>
Aykɔn dɛn
Semweso, yu kin yuz flexbox utilities ɛn Bootstrap Icons fɔ mek alɛt dɛn wit aykɔn dɛn. Dipen pan yu aykɔn dɛn ɛn wetin de insay, yu go want fɔ ad mɔ yutiliti dɛn ɔ kɔstɔm stayl dɛn.
<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>
Yu nid mɔ pas wan aykɔn fɔ yu alɛt dɛn? Tink bɔt fɔ yuz mɔ Bootstrap Aykɔn dɛn ɛn mek wan lokal SVG sprite lɛk so fɔ mek i izi fɔ rɛfrɛns di sem aykɔn dɛn bɔku bɔku tɛm.
<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>
Fɔ dismis
Yuz di alɛt JavaSkript plɔgin, i pɔsibul fɔ dismis ɛni alɛt inlayn. Na dis na aw fɔ du am:
- Mek shɔ se yu dɔn lod di alɛt plɔgin, ɔ di Bootstrap JavaSkript we dɛn dɔn kɔmpilayt.
- Ad wan klos bɔtin ɛn di
.alert-dismissible
klas, we de ad ɛkstra pad na di rayt say na di alɛt ɛn put di klos bɔtin. - Na di klos bɔtin, ad di
data-bs-dismiss="alert"
atribyut, we de mek di JavaSkript wok fayn. Mek shɔ se yu yuz di<button>
ɛlimɛnt wit am fɔ biev fayn akɔdin to ɔl di divays dɛn. - Fɔ mek di alɛt dɛn gɛt layf we yu de dismis dɛn, mek shɔ se yu ad di
.fade
ɛn.show
klas dɛn.
Yu kin si dis in akshɔn wit wan layv dɛmo:
<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
ivent ɛn we de sɛt programmatik wan
focus()
to di say we fit pas ɔl na di pej. If yu de plan fɔ muv fɔs to wan nɔ-intaraktiv ɛlimɛnt we nɔmal wan nɔ de gɛt fɔs, mek shɔ se yu ad
tabindex="-1"
to di ɛlimɛnt.
Sass we bin de
Di tin dɛn we kin chenj
$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
Variant na miksin
Yuz in kɔmbaynshɔn wit $theme-colors
fɔ mek kɔntɛkstual modifya klas fɔ wi alɛt dɛn.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Tay
Loop we de jenarayz di modifya klas dɛn wit di alert-variant()
mixin.
// 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);
}
}
JavaSkript bihayvya
Di tin dɛn we de mek pɔsin want fɔ du sɔntin
Ɛnable fɔ dismis wan alɛt bay JavaSkript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Ɔ wit data
atribyut dɛn na wan bɔtin insay di alɛt , lɛk aw dɛn sho ɔp:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Notis se we yu lɔk wan alɛt, i go pul am na di DOM.
Di we aw dɛn de du am
Yu kin mek wan alɛt instans wit di alɛt kɔnstrɔkta, fɔ ɛgzampul:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Dis de mek wan alɛt lisin fɔ klik ivin dɛn pan disɛndant ɛlimɛnt dɛn we gɛt di data-bs-dismiss="alert"
atribyut. (Nɔ nid we yu de yuz di data-api in ɔto-initializashɔn.)
We | Tɔk bɔt |
---|---|
close |
Klos wan alɛt bay we i pul am na di DOM. If di .fade ɛn .show klas dɛn de na di ɛlimɛnt, di alɛt go dɔn bifo dɛn pul am. |
dispose |
Destroy wan element in alert. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt) |
getInstance |
Statik we de alaw yu fɔ gɛt di alɛt instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Statik mɛtɔd we de ritɔn wan alɛt instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am. Yu kin yuz am lɛk dis:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Di tin dɛn we kin apin
Bootstrap in alert plɔgin de ɛksplɔz sɔm ivin dɛn fɔ huk insay alert funkshɔnaliti.
Program | Tɔk bɔt |
---|---|
close.bs.alert |
Faya wantɛm wantɛm we dɛn kɔl di close instans mɛtɔd. |
closed.bs.alert |
Faya we dɛn dɔn lɔk di alɛt ɛn di CSS transishɔn dɛn dɔn dɔn. |
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()
})