Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Tahadhari

Toa ujumbe wa maoni ya muktadha kwa vitendo vya kawaida vya mtumiaji na ujumbe mfupi wa arifa unaopatikana na rahisi.

Katika ukurasa huu

Mifano

Arifa zinapatikana kwa urefu wowote wa maandishi, pamoja na kitufe cha hiari cha kufunga. Kwa mtindo unaofaa, tumia mojawapo ya madarasa manane ya muktadha yanayohitajika.alert-success (kwa mfano, ). Kwa uondoaji wa ndani, tumia programu jalizi ya JavaScript ya arifa .

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>
Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Mfano hai

Bofya kitufe kilicho hapa chini ili kuonyesha arifa (iliyofichwa na mitindo ya ndani kuanza), kisha uiondoe (na uiharibu) kwa kitufe cha kufunga kilichojumuishwa ndani.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Tunatumia JavaScript ifuatayo ili kuanzisha onyesho letu la arifa moja kwa moja:

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

Tumia .alert-linkdarasa la matumizi ili kutoa kwa haraka viungo vya rangi zinazolingana ndani ya tahadhari yoyote.

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>

Maudhui ya ziada

Arifa zinaweza pia kuwa na vipengele vya ziada vya HTML kama vile vichwa, aya na vigawanyiko.

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>

Aikoni

Vile vile, unaweza kutumia huduma za flexbox na Aikoni za Bootstrap kuunda arifa na ikoni. Kulingana na aikoni na maudhui yako, unaweza kutaka kuongeza huduma zaidi au mitindo maalum.

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>

Je, unahitaji aikoni zaidi ya moja kwa arifa zako? Zingatia kutumia Aikoni zaidi za Bootstrap na kutengeneza sprite ya karibu ya SVG kama hivyo ili kurejelea ikoni sawa mara kwa mara.

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>

Kuondoa

Kwa kutumia programu-jalizi ya JavaScript ya tahadhari, inawezekana kuondoa arifa yoyote iliyo ndani ya mstari. Hivi ndivyo jinsi:

  • Hakikisha kuwa umepakia programu-jalizi ya tahadhari, au JavaScript iliyokusanywa ya Bootstrap.
  • Ongeza kitufe cha kufunga na .alert-dismissibledarasa, ambayo huongeza pedi za ziada upande wa kulia wa arifa na kuweka kitufe cha kufunga.
  • Kwenye kitufe cha karibu, ongeza data-bs-dismiss="alert"sifa, ambayo huchochea utendaji wa JavaScript. Hakikisha umetumia <button>kipengele nacho kwa tabia ifaayo kwenye vifaa vyote.
  • Ili kuhuisha arifa unapoziondoa, hakikisha kuwa umeongeza .fadena .showmadarasa.

Unaweza kuona hili likitekelezwa na onyesho la moja kwa moja:

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>
Tahadhari inapoondolewa, kipengele huondolewa kabisa kutoka kwa muundo wa ukurasa. Ikiwa mtumiaji wa kibodi ataondoa tahadhari kwa kutumia kifungo cha karibu, lengo lao litapotea ghafla na, kulingana na kivinjari, weka upya hadi mwanzo wa ukurasa/hati. Kwa sababu hii, tunapendekeza kujumuisha JavaScript ya ziada ambayo inasikiliza closed.bs.alerttukio na kuweka kiprogramu focus()eneo linalofaa zaidi kwenye ukurasa. Iwapo unapanga kuelekeza umakini kwenye kipengele kisichoingiliana ambacho kwa kawaida hakipokei umakini, hakikisha kuwa umeongeza tabindex="-1"kwenye kipengele.

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, arifa sasa zinatumia viwezo vya ndani vya CSS .alertili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$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};

Vigezo vya Sass

$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

Mchanganyiko wa sass

Inatumika pamoja na $theme-colorskuunda madarasa ya kurekebisha muktadha kwa arifa zetu.

@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%);
  }
}

Kitanzi cha Sass

Kitanzi ambacho hutoa madarasa ya kurekebisha na alert-variant()mchanganyiko.

// 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);
  }
}

Tabia ya JavaScript

Anzisha

Anzisha vipengele kama arifa

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Kwa madhumuni pekee ya kuondoa arifa, si lazima kuanzisha kijenzi wewe mwenyewe kupitia JS API. Kwa kutumiadata-bs-dismiss="alert" , kijenzi kitaanzishwa kiotomatiki na kutupwa ipasavyo.

Tazama vichochezi kwa maelezo zaidi.

Vichochezi

Kuachishwa kunaweza kupatikana kwa datasifa iliyo kwenye kitufe ndani ya arifa kama inavyoonyeshwa hapa chini:

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

au kwenye kitufe kilicho nje ya arifa kwa kutumia data-bs-targetkama inavyoonyeshwa hapa chini:

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

Kumbuka kuwa kufunga tahadhari kutaiondoa kutoka kwa DOM.

Mbinu

Unaweza kuunda mfano wa tahadhari na mjenzi wa tahadhari, kwa mfano:

const bsAlert = new bootstrap.Alert('#myAlert')

Hii hufanya tahadhari isikilizwe kwa matukio ya kubofya kwenye vipengele vya kizazi ambavyo vina data-bs-dismiss="alert"sifa. (Sio lazima unapotumia uanzishaji kiotomatiki wa data-api.)

Njia Maelezo
close Hufunga arifa kwa kuiondoa kwenye DOM. Ikiwa .fadena .showdarasa zipo kwenye kipengele, tahadhari itafifia kabla ya kuondolewa.
dispose Huharibu arifa ya kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM)
getInstance Njia tuli ambayo hukuruhusu kupata mfano wa tahadhari unaohusishwa na kipengee cha DOM. Kwa mfano bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Mbinu tuli ambayo inarejesha tukio la tahadhari linalohusishwa na kipengele cha DOM au kuunda kipya endapo hakijaanzishwa. Unaweza kuitumia kama hii bootstrap.Alert.getOrCreateInstance(element):.

Matumizi ya kimsingi:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Matukio

Programu-jalizi ya tahadhari ya Bootstrap inafichua matukio machache ya kuunganisha katika utendaji wa tahadhari.

Tukio Maelezo
close.bs.alert Moto mara moja wakati closenjia ya mfano inaitwa.
closed.bs.alert Imetumwa wakati arifa imefungwa na mabadiliko ya CSS yamekamilika. 
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()
})