ceeb toom
Muab cov ntsiab lus tawm tswv yim tawm tswv yim rau cov neeg siv ib txwm ua nrog cov lus ceeb toom muaj thiab hloov pauv tau.
Piv txwv
Cov ntawv ceeb toom muaj nyob rau txhua qhov ntev ntawm cov ntawv nyeem, nrog rau qhov xaiv kaw khawm. Rau styling kom tsim nyog, siv ib qho ntawm yim yam uas yuav tsum tau muaj cov chav kawm (piv txwv li, .alert-success
). Rau inline tshem tawm, siv cov lus ceeb toom 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>
Qhia lub ntsiab lus rau kev pab technologies
Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hidden
chav kawm.
Nyob ua piv txwv
Nias lub pob hauv qab no kom pom kev ceeb toom (ntxiv nrog cov qauv hauv kab pib), tom qab ntawd tso tseg (thiab rhuav tshem) nws nrog lub pob kaw.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Peb siv JavaScript hauv qab no los ua rau peb qhov kev ceeb toom nyob deb:
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')
})
}
Txuas xim
Siv cov .alert-link
chav kawm siv hluav taws xob kom sai muab cov xim sib xws hauv ib qho kev ceeb toom.
<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>
Cov ntsiab lus ntxiv
Cov lus ceeb toom tuaj yeem muaj cov ntsiab lus HTML ntxiv xws li kab lus, kab lus thiab cov kab sib faib.
Ua tau zoo!
Aw yeah, koj tau nyeem cov lus ceeb toom tseem ceeb no. Cov ntawv nyeem piv txwv no yuav khiav ntev me ntsis kom koj tuaj yeem pom qhov sib nrug li cas hauv kev ceeb toom ua haujlwm nrog cov ntsiab lus zoo li no.
Thaum twg koj xav tau, nco ntsoov siv cov khoom siv hluav taws xob kom zoo thiab huv si.
<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>
Icons
Ib yam li ntawd, koj tuaj yeem siv cov khoom siv flexbox thiab Bootstrap Icons los tsim kev ceeb toom nrog cov cim. Nyob ntawm koj lub cim thiab cov ntsiab lus, koj tuaj yeem xav ntxiv cov khoom siv hluav taws xob lossis cov qauv kev cai.
<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>
Xav tau ntau tshaj ib lub cim rau koj cov lus ceeb toom? Xav txog siv ntau Bootstrap Icons thiab ua ib lub zos SVG sprite zoo li kom yooj yim siv tib lub cim dua.
<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>
Tso tseg
Siv lub ceeb toom JavaScript plugin, nws muaj peev xwm tso tseg ib qho kev ceeb toom hauv kab. Nov yog li cas:
- Nco ntsoov tias koj tau thauj khoom ceeb toom plugin, lossis suav nrog Bootstrap JavaScript.
- Ntxiv khawm kaw thiab
.alert-dismissible
chav kawm, uas ntxiv padding ntxiv rau sab xis ntawm kev ceeb toom thiab tso lub khawm kaw. - Ntawm lub pob kaw, ntxiv tus
data-bs-dismiss="alert"
cwj pwm, uas ua rau JavaScript ua haujlwm. Nco ntsoov siv lub<button>
caij nrog nws rau kev coj tus cwj pwm zoo thoob plaws txhua yam khoom siv. - Txhawm rau ua kom muaj kev ceeb toom thaum tso tawm lawv, nco ntsoov ntxiv cov chav kawm
.fade
thiab.show
cov chav kawm.
Koj tuaj yeem pom qhov no hauv kev nqis tes ua nrog qhov demo nyob:
<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
kev tshwm sim thiab programmatically teem
focus()
rau qhov chaw tsim nyog tshaj plaws hauv nplooj ntawv. Yog tias koj tab tom npaj txav kev tsom mus rau qhov tsis muaj kev sib cuam tshuam uas ib txwm tsis tau txais kev tsom xam, nco ntsoov ntxiv
tabindex="-1"
rau lub caij.
Sass
Hloov pauv
$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 mixin
Siv ua ke nrog $theme-colors
los tsim cov ntsiab lus hloov kho cov chav kawm rau peb cov lus ceeb toom.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop uas tsim cov chav kawm hloov kho nrog cov 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 cwj pwm
Pib pib
Pib cov ntsiab lus raws li kev ceeb toom
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Rau lub hom phiaj nkaus xwb ntawm kev tso tseg qhov kev ceeb toom, nws tsis yog qhov tsim nyog los pib cov khoom siv los ntawm JS API. Los ntawm kev siv data-bs-dismiss="alert"
, cov khoom siv yuav pib ua haujlwm tau zoo thiab raug tso tseg.
Saib cov lus qhia ntxiv kom paub meej ntxiv.
Ua rau
Kev tshem tawm tuaj yeem ua tiav nrog tus data
cwj pwm ntawm lub pob hauv kev ceeb toom raws li qhia hauv qab no:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
los yog ntawm ib lub pob sab nraum lub ceeb toom siv data-bs-target
raws li qhia hauv qab no:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Nco ntsoov tias kaw qhov kev ceeb toom yuav tshem tawm ntawm DOM.
Cov txheej txheem
Txoj kev | Kev piav qhia |
---|---|
close |
Kaw ib qho kev ceeb toom los ntawm kev tshem tawm ntawm DOM. Yog hais tias cov .fade thiab .show cov chav kawm muaj nyob rau ntawm lub caij, lub ceeb toom yuav ploj mus ua ntej nws yuav raug tshem tawm. |
dispose |
Ua kom puas lub ntsiab lus ceeb toom. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij) |
getInstance |
Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov xwm txheej ceeb toom cuam tshuam rau DOM lub caij, koj tuaj yeem siv nws zoo li no:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Txoj kev zoo li qub uas xa rov qab qhov xwm txheej ceeb toom cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Cov xwm txheej
Bootstrap's alert plugin nthuav tawm ob peb txheej xwm rau hooking rau hauv kev ceeb toom ua haujlwm.
Kev tshwm sim | Kev piav qhia |
---|---|
close.bs.alert |
Hluav taws kub tam sim ntawd thaum close hu ua piv txwv. |
closed.bs.alert |
Raug rho tawm haujlwm thaum qhov kev ceeb toom tau raug kaw thiab kev hloov CSS tau ua tiav. |
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()
})