Digniin
Bixi fariimaha jawaab celinta macnaha guud ee ficilada isticmaale ee caadiga ah oo leh farriimaha digniinta ee la heli karo oo dabacsan.
Tusaalooyinka
Ogeysiisyada ayaa diyaar u ah dherer kasta oo qoraal ah, iyo sidoo kale badhanka xidhitaanka ee ikhtiyaarka ah. Si loo habeeyo habboon, isticmaal mid ka mid ah siddeedda fasal ee loo baahan yahay macnaha guud (tusaale, .alert-success
). Eryidda khadka dhexda ah, isticmaal ogeysiisyada 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>
U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hidden
fasalka dhexdiisa ku qarsoon.
Midabka isku xirka
Isticmaal .alert-link
fasalka utility si aad si deg deg ah u bixiso iskuxiryada midabada leh ee digniin kasta.
<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>
Waxyaabo dheeraad ah
Ogeysiisyadu sidoo kale waxay ka koobnaan karaan walxo HTML dheeraad ah sida cinwaan, cutubyo iyo qaybiyayaal.
Si fiican ayaa loo sameeyay!
Aww haa, si guul leh ayaad u akhriday fariintan digniinta ah ee muhiimka ah. Tusaalahan qoraalka ahi waxa uu socon doonaa xoogaa dheer si aad u aragto sida kala dheeraynta digniintu ay ula shaqeyso nuxurka noocaan ah.
Mar kasta oo aad u baahato, hubso inaad isticmaasho utility margin si aad u ilaaliso waxyaabaha wanaagsan oo nadiifsan.
<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>
Astaamo
Sidoo kale, waxaad isticmaali kartaa utility flexbox iyo Bootstrap Icons si aad u abuurto digniino leh astaamo. Iyada oo ku xidhan summadaada iyo waxa ku jira, waxa laga yaabaa inaad rabto inaad ku darto agabyo badan ama qaabab gaar ah.
<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>
Ma u baahan tahay wax ka badan hal calaamad digniinahaaga? Tixgeli inaad isticmaasho astaamo badan oo Bootstrap ah oo aad samayso SVG sprite sida si aad si sahal ah ugu tixraacdo isla summadan si isdaba joog ah.
<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>
Xil ka qaadis
Adeegsiga digniinta JavaScript plugin, waxa suurtogal ah in meesha laga saaro digniin kasta oo khadka ah. Waa kan sida:
- Hubi inaad ku shubtay furaha digniinta, ama Bootstrap JavaScript-ka la soo ururiyey.
- Ku dar badhan dhow iyo
.alert-dismissible
fasalka, kaas oo ku daraya suuf dheeraad ah dhanka midig ee digniinta oo dhigaysa badhanka dhow. - Badhanka dhow, ku dar
data-bs-dismiss="alert"
sifada, taas oo kicinaysa shaqeynta JavaScript. U hubso inaad u isticmaasho<button>
curiyaha leh hab-dhaqan habboon dhammaan qalabka. - Si aad u kiciso ogeysiisyada marka aad shaqada ka cayrinayso, hubi inaad ku darto
.fade
iyo.show
fasallada.
Waxaad tan ku arki kartaa iyadoo la adeegsanayo bandhig toos ah:
<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
munaasabadda oo si barnaamij ah
focus()
u dejisa meesha ugu habboon ee bogga. Haddii aad qorshaynayso inaad u guurto diiradda shay aan dhexgal ahayn oo sida caadiga ah aan helin diiradda, hubi inaad ku darto
tabindex="-1"
curiyaha.
Sass
Kala duwanaansho
$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
Isku darka kala duwan
Loo isticmaalo in lagu daro $theme-colors
si loo abuuro fasalo wax ka beddelka macnaha guud ee digniintayada.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Loop
Loop kaas oo abuura fasalada wax ka beddelka ee isku- alert-variant()
dhafka ah.
// 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);
}
}
Dhaqanka JavaScript
Kiciyeyaasha
U oggolow cayrinta digniinta iyada oo loo marayo JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Ama data
sifooyin ku yaal badhanka digniinta ku jira , sida kor lagu muujiyey:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Ogsoonow in xidhitaanka digniinta ay ka saari doonto DOM.
Hababka
Waxaad ku abuuri kartaa tusaale digniin ah dhisaha digniinta, tusaale ahaan:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Tani waxay ka dhigaysaa digniin in la dhagaysto dhacdooyinka gujiska ah ee walxaha faraca leh ee leh data-bs-dismiss="alert"
sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.)
Habka | Sharaxaada |
---|---|
close |
Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fade iyo .show fasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin. |
dispose |
Waxay baabi'isaa digniinta curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM) |
getInstance |
Habka taagan ee kuu ogolaanaya inaad hesho tusaalaha digniinta ee la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Habka taagan ee soo celiya tusaale digniin ah oo la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Dhacdooyinka
Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.
Dhacdo | Sharaxaada |
---|---|
close.bs.alert |
Dab isla markiiba marka close habka tusaale ahaan la yiraahdo. |
closed.bs.alert |
La eryo marka digniinta la xiro iyo kala-guurka CSS la dhammeeyay. |
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()
})