Izexwayiso
Nikeza imilayezo yempendulo yomongo yezenzo zabasebenzisi ezijwayelekile ngedlanzana lemilayezo etholakalayo neguquguqukayo yesexwayiso.
Izibonelo
Izaziso ziyatholakala kunoma ibuphi ubude bombhalo, kanye nenkinobho yokuvala ongayikhetha. Ukuze wenze isitayela esifanele, sebenzisa izigaba eziyisishiyagalombili ezidingekayo zesimo (isb, .alert-success
). Ngokukhipha okusemgqeni, sebenzisa i- plugin yezaziso ze-JavaScript .
<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>
Ukudlulisa incazelo kubuchwepheshe obusizayo
Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hidden
nekilasi.
Isibonelo esiphilayo
Chofoza inkinobho engezansi ukuze ubonise isexwayiso (esifihlwe ngezitayela ezisemgqeni ukuze kuqalwe), bese usichitha (futhi usibhubhise) ngenkinobho yokuvala eyakhelwe ngaphakathi.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Sisebenzisa i-JavaScript elandelayo ukuze siqalise idemo yethu yesexwayiso ebukhoma:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Nice, you triggered this alert message!', 'success')
})
}
Umbala wesixhumanisi
Sebenzisa .alert-link
isigaba sosizo ukuze unikeze ngokushesha izixhumanisi ezinemibala efanayo ngaphakathi kwanoma yisiphi isexwayiso.
<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>
Okuqukethwe okwengeziwe
Izaziso zingaqukatha izici ezengeziwe ze-HTML njengezihloko, izigaba kanye nabahlukanisi.
Wenze kahle!
Aww yeah, ufunde ngempumelelo lo mlayezo obalulekile wesexwayiso. Lo mbhalo oyisibonelo uzosebenza isikhathi eside ukuze ukwazi ukubona ukuthi isikhala phakathi kwesexwayiso sisebenza kanjani nalolu hlobo lokuqukethwe.
Noma nini lapho udinga, qiniseka ukuthi usebenzisa izinsiza ze-margin ukuze ugcine izinto zizinhle futhi zicocekile.
<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>
Izithonjana
Ngokufanayo, ungasebenzisa izinsiza ze- flexbox kanye nezithonjana ze- Bootstrap ukuze udale izexwayiso ngezithonjana. Ngokuya ngezithonjana zakho nokuqukethwe, ungase ufune ukwengeza izinsiza ezengeziwe noma izitayela zangokwezifiso.
<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>
Udinga isithonjana esingaphezu kwesisodwa sezaziso zakho? Cabangela ukusebenzisa Izithonjana eziningi ze-Bootstrap nokwenza i-SVG sprite yasendaweni kanjalo ukuze ubhekise izithonjana ezifanayo ngokuphindaphindiwe.
<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>
Iyacashisa
Ngokusebenzisa i-plugin yesixwayiso se-JavaScript, kungenzeka ukucashisa noma yisiphi isexwayiso esisemgqeni. Nansi indlela:
- Qiniseka ukuthi ulayishe i-plugin yesixwayiso, noma i-Bootstrap JavaScript ehlanganisiwe.
- Engeza inkinobho yokuvala kanye
.alert-dismissible
neklasi, okwengeza ukupheda okwengeziwe kwesokudla sesexwayiso futhi kumise inkinobho yokuvala. - Enkinobho yokuvala, engeza
data-bs-dismiss="alert"
isibaluli, esicupha ukusebenza kwe-JavaScript. Qiniseka ukuthi usebenzisa i-<button>
elementi nayo ngokuziphatha okufanele kuwo wonke amadivayisi. - Ukuze wenze izexwayiso zigqwayize uma uzichitha, qiniseka ukuthi ungeza
.fade
kanye.show
namakilasi.
Lokhu ungakubona ngesenzo ngedemo ebukhoma:
<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
umcimbi futhi isethelwe
focus()
endaweni efanele kakhulu ekhasini. Uma uhlela ukuhambisa ukugxilisa ku-elementi engahlangani ngokuvamile engakutholi ukugxila, qiniseka ukuthi uyengeza
tabindex="-1"
kusici.
Sass
Okuguquguqukayo
$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
Ingxube ehlukile
Kusetshenziswa ngokuhambisana $theme-colors
nokudala amakilasi okuguqula umongo ngezexwayiso zethu.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Iluphu
Iluphu ekhiqiza amakilasi okulungisa nge- 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);
}
}
Ukuziphatha kweJavaScript
Qalisa
Qalisa ama-elementi njengezaziso
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Ngenhloso eyodwa yokucashisa isexwayiso, akudingekile ukuqalisa ingxenye mathupha nge-JS API. Ngokusebenzisa data-bs-dismiss="alert"
i-, ingxenye izoqaliswa ngokuzenzakalelayo futhi ichithwe ngendlela efanele.
Bona isigaba sezibangeli ukuze uthole imininingwane eyengeziwe.
Izicupha
Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho data
engaphakathi kwesexwayiso njengoba kuboniswe ngezansi:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
noma enkinobho engaphandle kwesexwayiso usebenzisa lokhu data-bs-target
okuboniswe ngezansi:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Qaphela ukuthi ukuvala isexwayiso kuzosisusa ku-DOM.
Izindlela
Indlela | Incazelo |
---|---|
close |
Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fade kanye .show namakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe. |
dispose |
Icekela phansi isixwayiso se-elementi. (Isusa idatha egciniwe kusici se-DOM) |
getInstance |
Indlela emile ekuvumela ukuthi uthole isexwayiso esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Indlela emile ebuyisela isenzakalo sesexwayiso esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Imicimbi
I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.
Umcimbi | Incazelo |
---|---|
close.bs.alert |
Imililo ngokushesha lapho close indlela yesibonelo ibizwa. |
closed.bs.alert |
Ixoshwe lapho isaziso sivaliwe futhi izinguquko ze-CSS seziqediwe. |
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()
})