in English

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.

A wannan shafi

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 .

Faɗakarwar farko mai sauƙi - duba shi!

Faɗakarwar sakandare mai sauƙi — duba shi!

Faɗakarwar nasara mai sauƙi — duba shi!

Faɗakarwar haɗari mai sauƙi - duba shi!

Faɗakarwar faɗakarwa mai sauƙi — duba shi!

Faɗakarwar bayani mai sauƙi-duba shi!

Faɗakarwar haske mai sauƙi-duba shi!

Faɗakarwar duhu mai sauƙi - duba shi!

<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-hiddenajin.

Kalar mahaɗi

Yi .alert-linkamfani da ajin mai amfani don samar da hanyoyin haɗin kai masu dacewa da sauri cikin kowane faɗakarwa.

Mai sauƙin faɗakarwa na farko tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar sakandare mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar nasara mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar haɗari mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar faɗakarwa mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar bayani mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar haske mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

Faɗakarwar duhu mai sauƙi tare da hanyar haɗin misali . Ba shi danna idan kuna so.

<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.

Misali faɗakarwa tare da gunki

<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ƙin ambaton gumaka iri ɗaya akai-akai.

Misali faɗakarwa tare da gunki

Misalin faɗakarwar nasara tare da gunki

Misali faɗakarwar faɗakarwa tare da gunki

Misali faɗakarwar haɗari tare da gunki

<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>

Korarwa

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-dismissibleajin, wanda ke ƙara ƙarin padding 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 .fadeda .showazuzuwan.

Kuna iya ganin wannan a aikace tare da demo live:

Guacamole mai tsarki! Ya kamata ku duba wasu daga cikin filayen da ke ƙasa.

<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>

Lokacin da aka kori faɗakarwa, ana cire kashi gaba ɗaya daga tsarin shafin. Idan mai amfani da madannai ya watsar da faɗakarwa ta amfani da maɓallin kusa, hankalinsu zai ɓace ba zato ba tsammani kuma, dangane da mai lilo, sake saitawa zuwa farkon shafi/takardun. Don wannan dalili, muna ba da shawarar haɗa ƙarin JavaScript wanda ke sauraron closed.bs.alerttaron kuma ya saita shirin focus()zuwa wuri mafi dacewa a cikin shafin. Idan kuna shirin matsar 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-colorsda ƙ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

Masu tayar da hankali

Kunna korar faɗakarwa ta hanyar JavaScript:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

Ko tare da datahalaye akan maɓalli a cikin faɗakarwa , kamar yadda aka nuna a sama:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

Lura cewa rufe faɗakarwa zai cire shi daga DOM.

Hanyoyin

Kuna iya ƙirƙirar misalin faɗakarwa tare da maginin faɗakarwa, misali:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Wannan yana sa faɗakarwa ya saurara don danna abubuwan da suka faru a kan abubuwan da suka fito waɗanda ke da data-bs-dismiss="alert"sifa. (Ba lallai ba ne lokacin amfani da bayanan-api ta atomatik-farawa.)

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()
})