Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
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 .

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

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.

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

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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:

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

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, faɗakarwa yanzu suna amfani da masu canjin CSS na gida .alertdon haɓaka gyare-gyare na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

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

Sass 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) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Sass 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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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 datasifa 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-targetkamar 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

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

const 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 .fadesuna .shownan 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 a tsaye wacce ke ba ku damar samun misalin faɗakarwa mai alaƙa da ɓangaren DOM. Misali 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):.

Asalin amfani:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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 closeaka kira hanyar misali.
closed.bs.alert An kori lokacin da aka rufe faɗakarwa kuma an gama canjin CSS. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})