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 .

Tahadhari rahisi ya msingi—iangalie!

Tahadhari rahisi ya pili—iangalie!

Tahadhari rahisi ya mafanikio-iangalie!

Tahadhari rahisi ya hatari—iangalie!

Tahadhari rahisi ya onyo-iangalie!

Tahadhari rahisi ya maelezo—iangalie!

Tahadhari rahisi—iangalie!

Tahadhari rahisi ya giza-iangalie!

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

Rangi ya kiungo

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

Tahadhari rahisi msingi yenye kiungo cha mfano . Ipe ikiwa unapenda.

Tahadhari rahisi ya pili yenye kiungo cha mfano . Ipe ikiwa unapenda.

Arifa rahisi ya mafanikio yenye kiungo cha mfano . Ipe ikiwa unapenda.

Tahadhari rahisi ya hatari yenye kiungo cha mfano . Ipe ikiwa unapenda.

Tahadhari rahisi yenye kiungo cha mfano . Ipe ikiwa unapenda.

Arifa rahisi iliyo na kiungo cha mfano . Ipe ikiwa unapenda.

Tahadhari rahisi yenye kiungo cha mfano . Ipe ikiwa unapenda.

Tahadhari rahisi ya giza yenye kiungo cha mfano . Ipe ikiwa unapenda.

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

Umefanya vizuri!

Aww yeah, umefaulu kusoma ujumbe huu muhimu wa tahadhari. Maandishi ya mfano huu yatakwenda kwa muda mrefu zaidi ili uweze kuona jinsi nafasi kati ya arifa inavyofanya kazi na aina hii ya maudhui.

Wakati wowote unapohitaji, hakikisha unatumia huduma za ukingo ili kuweka mambo vizuri na nadhifu.

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

Arifa ya mfano iliyo na ikoni

<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? Fikiria kutumia Aikoni zaidi za Bootstrap na kutengeneza mkondo wa SVG wa karibu kama hivyo ili kurejelea ikoni sawa mara kwa mara.

Arifa ya mfano iliyo na ikoni

Arifa ya mfano ya mafanikio yenye ikoni

Mfano wa tahadhari yenye ikoni

Mfano wa tahadhari ya hatari yenye ikoni

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

Guacamole takatifu! Unapaswa kuangalia katika baadhi ya sehemu hizo hapa chini.

<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

Vichochezi

Washa uondoaji wa arifa kupitia JavaScript:

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

Au na datasifa kwenye kitufe ndani ya arifa , kama inavyoonyeshwa hapo juu:

<button type="button" class="btn-close" data-bs-dismiss="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:

var myAlert = document.getElementById('myAlert')
var 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 `.fade`na `.show`darasa zipo kwenye kipengele, tahadhari itafifia kabla ya kuondolewa.
`dispose`	Huharibu arifa ya kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM)
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert.getInstance(alert)`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Events

Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.

Event	Description
`close.bs.alert`	Fires immediately when the `close` instance method is called.
`closed.bs.alert`	Fired when the alert has been closed and CSS transitions have completed.

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