Kɔkɔbɔ ahorow
Fa nsɛm a ɛfa ho nsɛm a wɔde ma ho nkrasɛm ma nneyɛe a ɛtaa ba a ɔde di dwuma no de nsa kakraa bi a ɛwɔ hɔ na ɛyɛ mmerɛw a wɔde bɔ kɔkɔ no ma.
Nhwɛso ahorow
Kɔkɔbɔ ahorow wɔ hɔ ma nsɛm tenten biara, ne bɔtn a wopɛ sɛ wode to mu. Sɛ wopɛ sɛ wohyɛ no yiye a, fa nsɛm a ɛfa ho adesua ahorow awotwe a wɔhwehwɛ no mu biako di dwuma (sɛ nhwɛso no, .alert-success
). Sɛ wopɛ sɛ woyi obi fi mu a, fa kɔkɔbɔ ahorow no 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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa
Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hidden
adesuakuw no mu.
Link kɔla
Fa .alert-link
utility class no di dwuma fa ntɛm ara ma links a ɛwɔ kɔla a ɛne no hyia wɔ kɔkɔbɔ biara mu.
<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>
Nsɛm foforo a ɛwɔ mu
Kɔkɔbɔ nso betumi akura HTML nneɛma foforo te sɛ nsɛmti, nkyekyɛm ne nkyekyɛmu.
Woayɛ adeɛ!
Aww yeah, woakenkan saa kɔkɔbɔ nkrasɛm a ɛho hia yi yiye. Saa nhwɛsoɔ nkyerɛwee yi rekɔ so akyɛ kakra sɛdeɛ ɛbɛyɛ a wobɛtumi ahunu sɛdeɛ ntam kwan a ɛwɔ kɔkɔbɔ bi mu no yɛ adwuma wɔ saa nsɛm yi ho.
Bere biara a ɛho behia no, hwɛ hu sɛ wode margin utilities bedi dwuma na ama nneɛma ayɛ fɛ na ayɛ pɛpɛɛpɛ.
<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>
Nsɛnkyerɛnnede ahorow
Saa ara nso na wobɛtumi de flexbox utilities ne Bootstrap Icons ayɛ kɔkɔbɔ a ɛwɔ ahyɛnsodeɛ. Ɛgyina wo ahyɛnsodeɛ ne nsɛm a ɛwɔ mu so no, ebia wobɛpɛ sɛ wode utilities anaa custom styles pii ka ho.
<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>
Wo hia ahyɛnsode bɛboro biako ma wo kɔkɔbɔ ahorow no? Susuw ho sɛ wode Bootstrap Icons pii bedi dwuma na woayɛ local SVG sprite te sɛ saa na ama ayɛ mmerɛw sɛ wobɛtwe adwene asi icons koro no ara so mpɛn pii.
<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>
Wobeyi wɔn afi adwumam
Sɛ wode kɔkɔbɔ JavaScript plugin no di dwuma a, wubetumi apow kɔkɔbɔ biara a ɛwɔ inline no mu. Sɛnea ɛte ni:
- Hwɛ sɛ woahyɛ kɔkɔbɔ plugin no, anaa Bootstrap JavaScript a wɔaboaboa ano no.
- Fa close button ne
.alert-dismissible
class no ka ho, na ɛde padding foforo ka ho wɔ kɔkɔbɔ no nifa so na ɛde close button no si hɔ. - Wɔ close button no so no, fa
data-bs-dismiss="alert"
attribute no ka ho, na ɛno na ɛkanyan JavaScript dwumadie no. Hwɛ hu sɛ wode<button>
element no bedi dwuma ne no ama suban pa wɔ mfiri ahorow nyinaa so. - Sɛnea ɛbɛyɛ a wobɛma kɔkɔbɔ ahorow no ayɛ anigye bere a worepam no no, hwɛ hu sɛ wode
.fade
ne.show
adesua ahorow no bɛka ho.
Wubetumi ahu eyi wɔ adeyɛ mu denam live demo so:
<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
adeyɛ no na ɛde nhyehyɛe si
focus()
beae a ɛfata sen biara wɔ kratafa no mu no ka ho. Sɛ woreyɛ nhyehyɛe sɛ wode w’adwene bɛkɔ ade a ɛnyɛ nkitahodi a mpɛn pii no ennya adwene a, hwɛ hu sɛ wode bɛka
tabindex="-1"
element no ho.
Sass
Nneɛma a Ɛsakra
$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
Mixin a ɛyɛ soronko
Wɔde di dwuma ka bom ne $theme-colors
sɛ yɛbɛbɔ contextual modifier classes ama yɛn alerts.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Ɛpɔ
Loop a ɛma modifier classes no ne alert-variant()
mixin no.
// 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 nneyɛe
Nneɛma a ɛkanyan adwene
Ma kɔkɔbɔ bi a wɔpow no nyɛ adwuma denam JavaScript so:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Anaasɛ data
su ahorow a ɛwɔ bɔtn bi so wɔ kɔkɔbɔ no mu , sɛnea wɔada no adi wɔ atifi hɔ no:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Hyɛ no nsow sɛ sɛ woto kɔkɔbɔ bi mu a, ebeyi afi DOM no mu.
Akwan a wɔfa so yɛ
Wubetumi de kɔkɔbɔ constructor no ayɛ kɔkɔbɔ nhwɛso, sɛ nhwɛso no:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Wei ma kɔkɔbɔ tie click events wɔ descendant elements a ɛwɔ data-bs-dismiss="alert"
attribute no so. (Ɛho nhia bere a wode data-api no auto-initialization redi dwuma no.)
Ɔkwan | Nkyerɛmu |
---|---|
close |
Ɛto kɔkɔbɔ bi mu denam yi a wubeyi afi DOM no mu no so. Sɛ .fade ne .show adesua ahorow no wɔ element no so a, kɔkɔbɔ no bɛyera ansa na wɔayi afi hɔ. |
dispose |
Ɔsɛe element bi ani a ɛwɔ hɔ no. (Eyi data a wɔde asie wɔ DOM element no so) |
getInstance |
Static kwan a ɛma wo kwan ma wo nya kɔkɔbɔ nhwɛso a ɛbata DOM element bi ho no, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Static kwan a ɛsan de kɔkɔbɔ nhwɛsoɔ a ɛbata DOM element bi ho anaasɛ ɛbɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Nsɛm a esisi
Bootstrap no kɔkɔbɔ plugin no da nsɛm kakraa bi a esisi ma hooking kɔ kɔkɔbɔ dwumadi mu adi.
Dwumadie | Nkyerɛmu |
---|---|
close.bs.alert |
Ogya ntɛm ara bere a close wɔfrɛ instance kwan no. |
closed.bs.alert |
Wɔtow no bere a wɔato kɔkɔbɔ no mu na CSS nsakrae ahorow no awie no. |
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()
})