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.
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
Ua rau
Pab kom tshem tawm kev ceeb toom ntawm JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Los yog nrog cov data
cwj pwm ntawm ib lub pob hauv qhov kev ceeb toom , raws li tau qhia saum toj no:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Nco ntsoov tias kaw qhov kev ceeb toom yuav tshem tawm ntawm DOM.
Cov txheej txheem
Koj muaj peev xwm tsim ib qho kev ceeb toom piv txwv nrog lub alert constructor, piv txwv li:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Qhov no ua rau kev ceeb toom mloog rau cov xwm txheej nyem ntawm cov xeeb leej xeeb ntxwv uas muaj tus data-bs-dismiss="alert"
cwj pwm. (Tsis tsim nyog thaum siv data-api's auto-initialization.)
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()
})