Nti mkpu
Nye ozi nzaghachi gburugburu maka omume onye ọrụ na-ahụkarị site na iji obere ozi njikere dị ma na-agbanwe agbanwe.
Ihe atụ
Ọkwa dị maka ogologo ederede ọ bụla, yana bọtịnụ mmechi nhọrọ. Maka ịke nke ọma, jiri otu n'ime klaasị asatọ achọrọ.alert-success
(dịka ọmụmaatụ ). Maka nchụpụ n'ịntanetị, jiri ngwa mgbakwunye Javascript mara ọkwa .
<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hidden
klaasị.
Agba njikọ
Jiri .alert-link
klaasị ịba uru nye ngwa ngwa njikọ agba dabara n'ime njikere ọ bụla.
<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>
Ọdịnaya agbakwunyere
Mkpu nwekwara ike ịnwe ihe HTML ndị ọzọ dị ka isiokwu, paragraf na nkesa.
Ị mere nke ọma!
Ewoo ee, ị gụrụ nke ọma ozi njikere a dị mkpa. Ederede ihe atụ a ga-adị ogologo ogologo oge ka ị wee hụ ka oghere n'ime njikere si arụ ọrụ na ụdị ọdịnaya a.
Mgbe ọ bụla ịchọrọ, jide n'aka na ị na-eji ngwa oke ala iji dobe ihe dị mma ma dị mma.
<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>
Akara ngosi
N'otu aka ahụ, ịnwere ike iji flexbox utilities na Bootstrap Icons iji mepụta ọkwa na akara ngosi. Dabere na akara ngosi gị na ọdịnaya gị, ịnwere ike itinyekwu ngwa ma ọ bụ ụdị omenala.
<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>
Ị chọrọ ihe karịrị otu akara ngosi maka ọkwa gị? Tụlee iji akara Bootstrap ndị ọzọ na ịme SVG sprite dị ka nke a ka ị na-edetụ otu akara ngosi ngwa ngwa ugboro ugboro.
<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>
Na-achụpụ
N'iji ngwa mgbakwunye Javascript nke njikere, ọ ga-ekwe omume ịwepu inline njikere ọ bụla. Nke a bụ ka:
- Jide n'aka na ị kwajuru ngwa mgbakwunye njikere, ma ọ bụ Bootstrap Javascript achịkọtara.
- Tinye bọtịnụ nso na
.alert-dismissible
klaasị, nke na-agbakwunye mgbakwunye mgbakwunye n'aka nri nke njikere wee debe bọtịnụ nso. - Na bọtịnụ nso, gbakwunye
data-bs-dismiss="alert"
àgwà, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji<button>
mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile. - Iji mee ka ngosi mara mgbe ị na-achụpụ ha, jide n'aka na ịtinye
.fade
na.show
klaasị.
Ị nwere ike ịhụ nke a ka ọ na-eme site na iji ngosi dị ndụ:
<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
mmemme ma na-ahazi mmemme
focus()
na ebe kachasị mma na ibe ahụ. Ọ bụrụ na ị na-eme atụmatụ ịkwaga nlebara anya gaa na ihe na-adịghị emekọrịta ihe nke na-anaghị anata elekwasị anya, gbaa mbọ tinye
tabindex="-1"
na mmewere.
Sass
Mgbanwe
$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
Ngwakọta dị iche iche
Eji ya na $theme-colors
iji mepụta klaasị mgbanwe ọnọdụ maka ọkwa anyị.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop nke na-ewepụta klaasị modifier na 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);
}
}
Omume Javascript
Ihe na-akpalite
Kwado ịchụpụ ọkwa site na Javascript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Ma ọ bụ jiri njiri mara data
na bọtịnụ dị na njikere , dị ka egosiri n'elu:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Mara na imechi mkpu ga-ewepụ ya na DOM.
Ụzọ
Ị nwere ike ịmepụta ihe atụ njikere site na onye nrụpụta njikere, dịka ọmụmaatụ:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Nke a na-eme ka anya na-ege ntị maka ihe omume pịa na ihe ndị sitere n'ọdịdị nwere data-bs-dismiss="alert"
njirimara. (Ọ dịghị mkpa mgbe ị na-eji data-api's auto-mmalite.)
Usoro | Nkọwa |
---|---|
close |
Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ .fade na .show klaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya. |
dispose |
Na-emebi mmachi mmewere. (Na-ewepụ data echekwara na mmewere DOM) |
getInstance |
Usoro static nke na-enye gị ohere ịnweta ihe atụ njikere jikọtara na ihe DOM, ị nwere ike iji ya dị ka nke a:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Ụzọ kwụ ọtọ nke na-eweghachi ihe atụ njikere jikọtara na mmewere DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya. Ị nwere ike iji ya dị ka nke a:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Ihe omume
Ngwa mgbakwunye njikere Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ njikere.
Ihe omume | Nkọwa |
---|---|
close.bs.alert |
Ọkụ ozugbo close a na-akpọ usoro ihe atụ. |
closed.bs.alert |
Achụpụrụ mgbe emechiela ọkwa ahụ yana ntụgharị CSS agwụchaala. |
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()
})