Ditemošo
Fana ka melaetša ya ditshwaotshwao tša seemo bakeng sa ditiro tše di tlwaelegilego tša modiriši ka seatla sa melaetša ya temošo ye e lego gona le ye e fetofetogago.
Mehlala
Ditemošo di hwetšagala bakeng sa botelele bjo bongwe le bjo bongwe bja sengwalwa, gammogo le konope ya go tswalela ya boikhethelo. Bakeng sa setaele se se swanetšego, šomiša e nngwe ya diklase tše seswai tše di nyakegago tša diteng (mohlala, .alert-success
). Bakeng sa go rakwa ka gare ga mothaladi, diriša ditemošo tša 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>
Go fetišetša tlhalošo go theknolotši ya go thuša
Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hidden
sehlopha.
Kgokaganya mmala
Šomiša .alert-link
sehlopha sa utility go fa ka pela dikgokagano tša mebala ye e swanago ka gare ga temošo efe goba 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>
Diteng tša tlaleletšo
Ditemošo di ka ba le gape le dielemente tša tlaleletšo tša HTML go swana le dihlogo, ditemana le dikarolwana.
O šomile gabotse!
Aww yeah, o badile ka katlego molaetša wo wa bohlokwa wa temošo. Sengwalwa se sa mohlala se ya go sepela nako ye telele go se nene gore o kgone go bona ka fao sekgoba ka gare ga temošo se šomago ka mohuta wo wa diteng.
Nako le nako ge o nyaka, kgonthišetša gore o diriša didirišwa tša ka thoko go boloka dilo di le botse e bile di rulagantšwe.
<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>
Diaekhone
Ka mo go swanago, o ka šomiša didirišwa tša flexbox le Diaekhone tša Bootstrap go hlama ditemošo ka diaekhone. Go ya ka diaekhone tša gago le diteng, o ka nyaka go oketša didirišwa tše dingwe goba mekgwa ya tlwaelo.
<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>
O nyaka maswao a go feta a tee bakeng sa ditemošo tša gago? Nagana ka go šomiša Diaekhone tše dingwe tša Bootstrap le go dira sprite ya SVG ya selegae go swana le bjalo go šupa gabonolo diaekhone tše di swanago kgafetšakgafetša.
<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>
Go raka mošomong
Ka go diriša plugin ya JavaScript ya temošo, go a kgonega go lahla temošo efe goba efe ka gare ga mothaladi. Ke kamoo:
- Kgonthiša gore o laeditše plugin ya temošo, goba JavaScript ya Bootstrap yeo e kgobokeditšwego.
- Oketša konope ya go tswalela le
.alert-dismissible
sehlopha, seo se tlaleletšago ka go tlatša mo go oketšegilego ka go le letona la temošo gomme se bea konope ya go tswalela. - Go konope ya go tswalela, oketša
data-bs-dismiss="alert"
seka, seo se hlohleletšago mošomo wa JavaScript. Kgonthiša gore o šomiša<button>
elemente le yona bakeng sa boitshwaro bjo bo swanetšego go ralala le didirišwa ka moka. - Go phediša ditemošo ge o di raka, kgonthišetša gore o tlaleletša ka
.fade
le.show
diklase.
O ka bona se se šoma ka demo ya go phela:
<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
tiragalo gomme e beakanya ka lenaneo
focus()
lefelong le le swanetšego kudu letlakaleng. Ge e le gore o rulaganya go šuthišetša tsepamiso go elemente yeo e sego ya tirišano yeo ka tlwaelo e sa amogelego tsepamiso, kgonthiša gore o tlaleletša
tabindex="-1"
go elemente.
Sass
Diphetogo
$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
Mofuta wa mixin
E šomišwa ka kopanyo le $theme-colors
go hlama diklase tša sefetoši sa seemo bakeng sa ditemošo tša rena.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Segole
Loop yeo e tšweletšago dihlopha tša sefetoši 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);
}
}
Boitshwaro bja JavaScript
Dihlohleletši
Kgontšha go rakwa ga temošo ka JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Goba ka data
dika go konope ka gare ga temošo , bjalo ka ge go bontšhitšwe ka mo godimo:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Hlokomela gore go tswalela temošo go tla e tloša go DOM.
Mekgwa ya go šoma
O ka hlama mohlala wa temošo ka mohlami wa temošo, mohlala:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Se se dira gore temošo e theeletša ditiragalo tša go klika go dielemente tša setlogolo tšeo di nago le data-bs-dismiss="alert"
seka. (Ga go nyakege ge o diriša go thoma ga go itiriša ga data-api.)
Mokgwa | Tlhalošo |
---|---|
close |
E tswalela temošo ka go e tloša go DOM. Ge e .fade le gore .show diklase tša le di gona godimo ga elemente, temošo e tla fifala pele e tlošwa. |
dispose |
E senya temošo ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM) |
getInstance |
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa temošo wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Mokgwa wa go se fetoge wo o bušetšago mohlala wa temošo wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e se ya thongwa. O ka e diriša ka tsela ye:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Ditiragalo
Bootstrap o temošo plugin pepentšha ditiragalo tše mmalwa bakeng sa hooking ka temošo tshebetso.
Tiragalo | Tlhalošo |
---|---|
close.bs.alert |
E thunya ka pela ge close mokgwa wa mohlala o bitšwa. |
closed.bs.alert |
E thuntšhwa ge temošo e tswaletšwe gomme diphetogo tša CSS di phethilwe. |
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()
})