Litlhokomeliso
Fana ka melaetsa ea maikutlo bakeng sa liketso tse tloaelehileng tsa basebelisi ka melaetsa e seng mekae e fumanehang le e bonolo.
Mehlala
Litemoso lia fumaneha bakeng sa bolelele bofe kapa bofe ba mongolo, hammoho le konopo ea boikhethelo ea ho koala. Bakeng sa setaele se nepahetseng, sebelisa e 'ngoe ea lihlopha tse robeli tse hlokahalang tsa maemo (mohlala, .alert-success
). Bakeng sa ho tebela ka har'a marang-rang, sebelisa litemoso tsa JavaScript plugin .
<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>
Ho fetisa moelelo ho litheknoloji tse thusang
Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hidden
sehlopha.
Phela mohlala
Tobetsa konopo e ka tlase ho bonts'a tlhokomeliso (e patiloeng ka li-styles tsa inline ho qala), ebe u e qhelela ('me u e senye) ka konopo ea ho koala e hahelletsoeng ka hare.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Re sebelisa JavaScript e latelang ho qala demo ea rona ea tlhokomeliso:
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')
})
}
Mmala oa khokahano
Sebelisa sehlopha sa .alert-link
lisebelisoa ho fana ka lihokelo tsa mebala tse nyallanang ka har'a tlhokomeliso efe kapa efe.
<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>
Litaba tse ling
Litlhokomeliso li ka boela tsa ba le likarolo tse ling tsa HTML tse kang lihlooho, lirapa le likarohano.
Mosebetsi o motle!
Aww yeah, u atlehile ho bala molaetsa ona oa bohlokoa oa tlhokomeliso. Mohlala ona oa mongolo o tla nka nako e teletsana hore o tle o bone hore na sebaka sa tlhokomeliso se sebetsa joang ka litaba tsa mofuta ona.
Nako le nako ha u hloka, etsa bonnete ba hore u sebelisa lisebelisoa tsa marang-rang ho boloka lintho li le ntle ebile li le makhethe.
<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>
Litšoantšo
Ka mokhoa o ts'oanang, o ka sebelisa lisebelisoa tsa flexbox le Lits'oants'o tsa Bootstrap ho theha litlhokomeliso ka litšoantšo. Ho ipapisitse le li-icon le litaba tsa hau, u kanna ua batla ho eketsa lisebelisoa tse ling kapa mekhoa ea tloaelo.
<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>
U hloka li-icon tse fetang bonngoe bakeng sa litlhokomeliso? Nahana ka ho sebelisa Litšoantšo tse ling tsa Bootstrap le ho etsa sprite ea SVG ea lehae joalo ka ho bua habonolo ka litšoantšo tse tšoanang khafetsa.
<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>
Ho qhala
Ka ho sebelisa plugin ea temoso ea JavaScript, hoa khonahala ho tlosa tlhokomeliso efe kapa efe e ka har'a mohala. Mokhoa ona ke ona:
- Etsa bonnete ba hore u kentse plugin ea tlhokomeliso, kapa Bootstrap JavaScript e hlophisitsoeng.
- Kenya konopo e koalang le
.alert-dismissible
sehlopha, e leng se eketsang padding ka letsohong le letona la tlhokomeliso le ho beha konopo e koalang. - Ka konopo e koalang, eketsa
data-bs-dismiss="alert"
tšobotsi, e hlahisang ts'ebetso ea JavaScript. Etsa bonnete ba hore o sebelisa<button>
element le eona bakeng sa boitšoaro bo nepahetseng ho lisebelisoa tsohle. - Ho phelisa litlhokomeliso ha u li leleka, etsa bonnete ba hore u eketsa
.fade
le.show
litlelase.
U ka bona sena ts'ebetsong ka demo e phelang:
<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
ketsahalo eo le ho beha
focus()
sebaka se nepahetseng ka ho fetesisa leqepheng. Haeba u rera ho lebisa tlhokomelo ho ntho e sa sebetsaneng eo hangata e sa fumaneng tsepamiso, etsa bonnete ba hore u eketsa
tabindex="-1"
ho element.
Sass
Lintho tse fapaneng
$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
Motsoako o fapaneng
E sebelisoa hammoho le $theme-colors
ho theha lihlopha tsa ho fetola maemo bakeng sa litlhokomeliso tsa rona.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop e hlahisang lihlopha tsa modifier ka 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);
}
}
Boitšoaro ba JavaScript
Qala
Qala likarolo e le tlhokomeliso
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Ka sepheo se le seng feela sa ho tlosa tlhokomeliso, ha ho hlokahale ho qala karolo ka letsoho u sebelisa JS API. Ka ho sebelisa data-bs-dismiss="alert"
, karolo e tla qalisoa ka bo eona 'me e tlosoe ka nepo.
Sheba karolo ea li- triggers bakeng sa lintlha tse ling.
Lintho tse susumetsang
Ho lelekoa ho ka finyelloa ka data
tšobotsi e ka har'a konopo ka har'a tlhokomeliso joalokaha ho bontšitsoe ka tlase:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
kapa konopo e ka ntle ho tlhokomeliso u sebelisa se data-bs-target
bontšitsoeng ka tlase:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Hlokomela hore ho koala tlhokomeliso ho tla e tlosa ho DOM.
Mekhoa
Mokhoa | Tlhaloso |
---|---|
close |
E koala tlhokomeliso ka ho e tlosa ho DOM. Haeba li- .fade class .show li le teng ho element, tlhokomeliso e tla nyamela pele e tlosoa. |
dispose |
E senya tlhokomeliso ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM) |
getInstance |
Mokhoa o tsitsitseng o u lumellang ho fumana mohlala oa tlhokomeliso o amanang le karolo ea DOM, u ka e sebelisa ka tsela ena:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Mokhoa o tsitsitseng o khutlisetsang tlhokomeliso e amanang le karolo ea DOM kapa ho theha e ncha haeba e sa qalisoa. U ka e sebelisa ka tsela ena:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Liketsahalo
Sesebelisoa sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.
Ketsahalo | Tlhaloso |
---|---|
close.bs.alert |
Mello hang-hang ha close mokhoa oa mohlala o bitsoa. |
closed.bs.alert |
E tlositsoe ha tlhokomeliso e koetsoe 'me liphetoho tsa CSS li phethiloe. |
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()
})