Fadakarwa
Bayar da saƙon martani na mahallin don ayyukan mai amfani na yau da kullun tare da ɗimbin saƙon faɗakarwa da ke akwai da sassauƙa.
Misalai
Ana samun faɗakarwa don kowane tsayin rubutu, da maɓallin rufewa na zaɓi. Don salo mai kyau, yi amfani da ɗaya daga cikin azuzuwan mahallin takwas da ake buƙata (misali, .alert-success
). Don korar kan layi, yi amfani da filogin JavaScript na faɗakarwa .
<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>
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hidden
ajin.
Misali mai rai
Danna maɓallin da ke ƙasa don nuna faɗakarwa (ɓoye tare da salon layi don farawa), sannan a watsar (da lalata) tare da ginanniyar maɓallin kusa.
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
Muna amfani da JavaScript mai zuwa don kunna demo faɗakarwa kai tsaye:
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')
})
}
Kalar mahaɗi
Yi .alert-link
amfani da ajin mai amfani don samar da hanyoyin haɗin kai masu dacewa da sauri cikin kowane faɗakarwa.
<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>
Ƙarin abun ciki
Fadakarwa kuma na iya ƙunsar ƙarin abubuwan HTML kamar kanun labarai, sakin layi da masu rarrabawa.
Sannu da aikatawa!
Aww eh, kun yi nasarar karanta wannan muhimmin saƙon faɗakarwa. Wannan rubutun misali zai yi ɗan tsayi kaɗan don ku ga yadda tazara a cikin faɗakarwa ke aiki tare da irin wannan abun ciki.
A duk lokacin da kuke buƙata, tabbatar da amfani da abubuwan amfani da gefe don kiyaye abubuwa masu kyau da tsabta.
<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>
Gumaka
Hakazalika, zaku iya amfani da kayan aikin flexbox da Bootstrap Icons don ƙirƙirar faɗakarwa tare da gumaka. Dangane da gumakanku da abun ciki, kuna iya ƙara ƙarin kayan aiki ko salo na al'ada.
<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>
Kuna buƙatar gunki fiye da ɗaya don faɗakarwar ku? Yi la'akari da yin amfani da ƙarin gumakan Bootstrap da yin SVG sprite na gida kamar haka don sauƙaƙe ambaton gumaka iri ɗaya akai-akai.
<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>
Korar
Yin amfani da plugin ɗin JavaScript na faɗakarwa, yana yiwuwa a watsar da duk wani layin faɗakarwa. Ga yadda:
- Tabbatar cewa kun loda plugin ɗin faɗakarwa, ko haɗar Bootstrap JavaScript.
- Ƙara maɓallin kusa da
.alert-dismissible
ajin, wanda ke ƙara ƙarin fakiti zuwa dama na faɗakarwa kuma ya sanya maɓallin kusa. - A kan maɓallin kusa, ƙara
data-bs-dismiss="alert"
sifa, wanda ke haifar da aikin JavaScript. Tabbatar amfani da<button>
kashi tare da shi don halayen da suka dace a duk na'urori. - Don kunna faɗakarwa lokacin korar su, tabbatar da ƙara
.fade
da.show
azuzuwan.
Kuna iya ganin wannan a aikace tare da demo live:
<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
taron kuma ya saita shirin
focus()
zuwa wuri mafi dacewa a cikin shafin. Idan kuna shirin matsawa mayar da hankali zuwa abin da ba ya hulɗa da shi wanda yawanci ba ya karɓar mayar da hankali, tabbatar da ƙara
tabindex="-1"
zuwa kashi.
Sass
Masu canji
$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
Bambancin mixin
An yi amfani da shi tare $theme-colors
da ƙirƙirar azuzuwan gyare-gyaren mahallin don faɗakarwar mu.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Madauki
Madauki wanda ke haifar da azuzuwan gyare-gyare tare da alert-variant()
mahaɗin.
// 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);
}
}
Halin JavaScript
Fara
Fara abubuwa azaman faɗakarwa
var alertList = document.querySelectorAll('.alert')
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
Don kawai manufar korar faɗakarwa, ba lallai ba ne a fara aikin da hannu ta JS API. Ta hanyar yin amfani da data-bs-dismiss="alert"
, za a fara aikin ɓangaren ta atomatik kuma a kori shi da kyau.
Dubi sashin abubuwan da ke jawo don ƙarin cikakkun bayanai.
Masu tayar da hankali
Ana iya samun korarwa tare da data
sifa akan maɓalli a cikin faɗakarwa kamar yadda aka nuna a ƙasa:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
ko a maɓalli a waje da faɗakarwa ta amfani da data-bs-target
kamar yadda aka nuna a ƙasa:
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
Lura cewa rufe faɗakarwa zai cire shi daga DOM.
Hanyoyin
Hanya | Bayani |
---|---|
close |
Yana rufe faɗakarwa ta cire shi daga DOM. Idan azuzuwan .fade suna .show nan akan kashi, faɗakarwar zata shuɗe kafin a cire ta. |
dispose |
Yana lalata faɗakarwar wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM) |
getInstance |
Hanyar madaidaiciya wacce ke ba ku damar samun misalin faɗakarwa mai alaƙa da nau'in DOM, zaku iya amfani da shi kamar haka:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Hanya madaidaiciya wacce ke dawo da misalin faɗakarwa mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Abubuwan da suka faru
Flugin faɗakarwar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan faɗakarwa.
Lamarin | Bayani |
---|---|
close.bs.alert |
Gobara nan da nan lokacin da close aka kira hanyar misali. |
closed.bs.alert |
An kori lokacin da aka rufe faɗakarwa kuma an gama canjin CSS. |
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()
})