Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
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 .

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

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

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

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

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

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

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

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.

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

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

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

Sass

Vigezo

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

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

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

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

Kitanzi

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

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

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

Tazama sehemu ya 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

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, unaweza kuitumia kama hii: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) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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. 
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()
})