Nuxlɔ̃amewo
Na nyaŋuɖoɖo ƒe gbedasi siwo ku ɖe nya siwo ƒo xlãe ŋu na zãla ƒe nuwɔna siwo bɔ kple nuxlɔ̃ame gbedasi ʋɛ siwo li eye woate ŋu atrɔ asi le wo ŋu.
Kpɔɖeŋuwo
Nuxlɔ̃amewo li na nuŋɔŋlɔ ƒe didime ɖesiaɖe, eye woate ŋu axe mɔ ɖe enu hã. Ne èdi be yeawɔ atsyã nyuie la, zã nya siwo ƒo xlãe ƒe klass enyi siwo hiã.alert-success
la dometɔ ɖeka (le kpɔɖeŋu me, ). Ne èdi be yeaɖe asi le eŋu le fli me la, zã nuxlɔ̃amewo ƒe JavaScript ƒe kpeɖeŋutɔ .
<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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hidden
klass la ene.
Kadodo ƒe amadede
Zã .alert-link
utility class la nàtsɔ ana kadodo siwo ƒe amadede sɔ kple wo nɔewo kaba le nuxlɔ̃ame ɖesiaɖe me.
<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>
Nya bubuwo kpee
Nuxlɔ̃amewo ateŋu anye HTML ƒe akpa bubuwo abe tanyawo, memamawo kple mamawo hã.
Ewɔ nyuie!
Aww yeah, èxlẽ nuxlɔ̃ame gbedasi vevi sia dzidzedzetɔe. Kpɔɖeŋu nuŋɔŋlɔ sia le du dzi vie ale be nàte ŋu akpɔ alesi dometsotso le nuxlɔ̃ame me wɔa dɔ kple nya sia ƒomevi.
Ɣesiaɣi si wòahiã la, kpɔ egbɔ be yezã margin utilities be nuwo nanɔ nyuie eye woanɔ ɖoɖo nu.
<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>
Nɔnɔmetatawo
Nenema ke àte ŋu azã flexbox dɔwɔnuwo kple Bootstrap Icons atsɔ awɔ nuxlɔ̃amewo kple dzesiwo. Le wò nɔnɔmetatawo kple emenyawo nu la, àdi be yeatsɔ dɔwɔnu bubuwo alo atsyã siwo nèwɔ ɖe ɖoɖo nu akpe ɖe eŋu.
<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>
Èhiã dzesi siwo wu ɖeka na wò nuxlɔ̃amewoa? Bu Bootstrap Icons geɖe zazã ŋu eye nàwɔ local SVG sprite abe ale ene be nàyɔ dzesi mawo ke bɔbɔe enuenu.
<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>
Nyaɖeɖe le dɔ me
Ne èzã nuxlɔ̃ame JavaScript ƒe kpeɖeŋutɔ la, àte ŋu agbe nuxlɔ̃ame ɖesiaɖe le fli me. Ale si nàwɔe nye esi:
- Kpɔ egbɔ be yetsɔ nuxlɔ̃ame ƒe kpeɖeŋutɔa, alo Bootstrap JavaScript si woƒo ƒu la de eme.
- Tsɔ nutrenu ƒe abɔta kple
.alert-dismissible
klass la kpe ɖe eŋu, si tsɔa nu bubu kpena ɖe nuxlɔ̃amea ƒe ɖusime eye wòɖoa nutrenu ƒe dzesi ɖe teƒe. - Le nutrenu ƒe dzesi dzi la, tsɔ
data-bs-dismiss="alert"
nɔnɔmea kpee, si aʋã JavaScript ƒe dɔwɔwɔ. Kpɔ egbɔ be yezã<button>
element la kplii hena nuwɔna nyuitɔ le mɔ̃wo katã dzi. - Be nàna nuxlɔ̃amewo nawɔ dɔ ne èle wo ɖem ɖa la, kpɔ egbɔ be yetsɔ
.fade
kple.show
klassawo kpee.
Àte ŋu akpɔ esia le dɔwɔwɔ me kple live demo:
<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
nudzɔdzɔa eye wòɖoa ɖoɖowɔwɔ
focus()
ɖe teƒe si sɔ wu le axaa dzi la ɖe eme. Ne èle ɖoɖo wɔm be yeatsɔ susu ayi nusi mewɔa dɔ kplii o si le dzɔdzɔme nu la, mexɔa susu o la, kpɔ egbɔ be yetsɔe kpe
tabindex="-1"
ɖe nusi me wowɔa dɔ le ŋu.
Sass ƒe nyawo
Nusiwo trɔna
$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
Mixin si ƒe nɔnɔme to vovo
Wozãnɛ ɖekae kple $theme-colors
tsɔ wɔa nya siwo ƒo xlãe ƒe tɔtrɔ ƒe hatsotsowo na míaƒe nuxlɔ̃amewo.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Xatsa
Loop si wɔa modifier classes kple 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);
}
}
JavaScript ƒe nuwɔna
Nusiwo ʋãa ame
Na nuxlɔ̃ame aɖe ɖeɖeɖa to JavaScript dzi nawɔ dɔ:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Alo kple data
nɔnɔmewo le abɔta aɖe dzi le nuxlɔ̃amea me , abe alesi woɖee fia le etame ene:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
De dzesii be ne ètu nuxlɔ̃ame aɖe la, aɖee ɖa le DOM la me.
Mɔnuwo
Àteŋu awɔ nuxlɔ̃ame ƒe kpɔɖeŋu kple nuxlɔ̃ame xɔtula, le kpɔɖeŋu me:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Esia naa nuxlɔ̃ame ɖoa to ʋuʋu nudzɔdzɔwo le dzidzimevi ƒe akpa siwo si data-bs-dismiss="alert"
nɔnɔmea le la dzi. (Mehiã ne èle data-api ƒe auto-initialization zãm o.)
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
close |
Etua nuxlɔ̃ame aɖe to eɖeɖe le DOM la me. Ne .fade kple .show klasswo le element la dzi la, nuxlɔ̃amea nu ayi hafi woaɖee ɖa. |
dispose |
Egblẽa nu le element aɖe ƒe ŋudzɔnɔnɔ ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa) |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ nuxlɔ̃ame ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, àteŋu azãe ale:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Static mɔnu si trɔa nuxlɔ̃ame ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Nudzɔdzɔwo
Bootstrap ƒe nuxlɔ̃ame plugin ɖea nudzɔdzɔ ʋee aɖewo ɖe go hena hooking ɖe nuxlɔ̃ame dɔwɔwɔ me.
Nudzᴐdzᴐ | Nuɖᴐɖᴐ |
---|---|
close.bs.alert |
Dzoa enumake ne woyɔ close instance mɔnu la. |
closed.bs.alert |
Woɖea dzo ne wotu nuxlɔ̃amea eye CSS ƒe tɔtrɔwo wu enu. |
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()
})