Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Switsundzuxo

Nyika marungula ya mbuyelo wa xiyimo xa swiendlo swa mutirhisi leswi tolovelekeke hi voko ra marungula ya xitsundzuxo lama nga kona na lama cinca-cincaka.

Eka tluka leri

Swikombiso

Switsundzuxo swa kumeka eka ku leha kwihi na kwihi ka tsalwa, xikan’we na buti yo pfala leyi nga hlawuriwa. Ku kuma xitayili lexi faneleke, tirhisa yin’wana ya titlilasi ta tsevu leti lavekaka ta mongo (xikombiso, .alert-success). Ku hlongoriwa endzeni ka layini, tirhisa switsundzuxo swa JavaScript plugin .

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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Xikombiso lexi hanyaka

Click button leyi nga laha hansi ku kombisa xitsundzuxo (lexi fihliweke hi switayele swa inline ku sungula), kutani u xi hlongola (u ku herisa) hi button yo pfala leyi akiweke endzeni.

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

Hi tirhisa JavaScript leyi landzelaka ku pfuxa demo ya hina ya xitsundzuxo lexi hanyaka:

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

Tirhisa .alert-linktlilasi ya vukorhokeri ku hatlisa u nyika swihlanganisi swa mihlovo leyi fambelanaka endzeni ka xitsundzuxo xihi na xihi.

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>

Swilo leswi engetelekeke

Switsundzuxo swi nga tlhela swi va na swiaki swo engetela swa HTML swo fana na tinhlokomhaka, tindzimana na swihambanisi.

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>

Swifaniso swa swifaniso

Hilaha ku fanaka, u nga tirhisa switirhisiwa swa flexbox ni Swifaniso swa Bootstrap ku endla switsundzuxo leswi nga ni swifaniso. Swi titshege hi swifaniso swa wena ni leswi nga endzeni, u nga ha lava ku engetela switirhisiwa swin’wana kumbe switayele leswi endleriweke wena.

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>

Xana u lava swifaniso swo tlula xin’we swa switsundzuxo swa wena? Anakanya hi ku tirhisa Swifaniso swo tala swa Bootstrap na ku endla sprite ya SVG ya laha kaya yi fana na tano ku kombetela hi ku olova swifaniso leswi fanaka hi ku phindha-phindha.

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>

Ku hlongola

Hi ku tirhisa xitsundzuxo xa JavaScript plugin, swa koteka ku bakanya xitsundzuxo xihi na xihi lexi nga endzeni ka layini. Hi leyi ndlela leyi:

  • Tiyisisa leswaku u layicha xiengetelo xa xitsundzuxo, kumbe JavaScript ya Bootstrap leyi hlengeletiweke.
  • Engetela buti yo pfala na .alert-dismissibletlilasi, leswi engetelaka padding yo engetela exineneni xa xitsundzuxo naswona swi veka buti yo pfala.
  • Eka buti yo pfala, engetela data-bs-dismiss="alert"xihlawulekisi, lexi pfuxaka ntirho wa JavaScript. Tiyisisa leswaku u tirhisa <button>elemente na yona eka mahanyelo lama faneleke eka switirhisiwa hinkwaswo.
  • Ku endla leswaku switsundzuxo swi hanya loko u swi hlongola, tiyiseka leswaku u engetela titlilasi ta .fadena ..show

U nga vona leswi swi ri karhi swi tirha hi demo leyi hanyaka:

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>
Loko xitsundzuxo xi hlongoriwa, xiaki xi susiwa hi ku helela eka xivumbeko xa tluka. Loko mutirhisi wa khibhodi a bakanya xitsundzuxo hi ku tirhisa buti yo pfala, ku kongomisa ka vona ku ta lahleka hi xitshuketa naswona, hi ku ya hi browser, va tlhela va veka eku sunguleni ka tluka/tsalwa. Hikwalaho ka xivangelo lexi, hi ringanyeta ku katsa JavaScript leyi engetelekeke leyi yingisaka closed.bs.alertxiendlakalo naswona hi nongonoko yi vekaka focus()ndhawu leyi faneleke swinene eka tluka. Loko u kunguhata ku yisa ku kongomisa eka xiaki lexi nga riki xa vuhlanganisi lexi hi ntolovelo xi nga amukeliki ku kongomisa, tiyisisa leswaku u engetela tabindex="-1"eka xiaki.

CSS

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa endlelo ra Bootstrap leri cinca-cincaka ra swilo leswi cinca-cincaka swa CSS, switsundzuxo sweswi swi tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .alertfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$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 swilo leswi cinca-cincaka

$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 yi vula leswaku

Yi tirhisiwa hi ku hlanganisiwa na $theme-colorsku tumbuluxa titlilasi ta mucinci wa xiyimo xa switsundzuxo swa hina.

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

Loop leyi humesaka titlilasi ta modifier na alert-variant()mixin.

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

Mahanyelo ya JavaScript

Sungula

Sungula swiaki tanihi switsundzuxo

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

Hi xikongomelo xin’we ntsena xo hlongola xitsundzuxo, a swi bohi ku sungula xiphemu hi voko hi ku tirhisa JS API. Hi ku tirhisa data-bs-dismiss="alert", xiphemu xi ta sunguriwa hi ku tisungulela naswona xi ta hlongoriwa hi ndlela leyi faneleke.

Vona xiyenge xa ​​swihlohloteri ku kuma vuxokoxoko byo tala.

Swihlohloteri

Ku hlongoriwa ku nga fikeleriwa hi dataxihlawulekisi eka buti endzeni ka xitsundzuxo tanihilaha swi kombisiweke hakona laha hansi:

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

kumbe eka buti ehandle ka xitsundzuxo hi ku tirhisa data-bs-targettanihilaha swi kombisiweke hakona laha hansi:

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

Xiya leswaku ku pfala xitsundzuxo swi ta xi susa eka DOM.

Maendlelo

U nga endla xikombiso xa xitsundzuxo hi muaki wa xitsundzuxo, xikombiso:

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

Leswi swi endla leswaku xitsundzuxo xi yingisela swiendlakalo swa ku tsindziyela eka swiaki swa vatukulu leswi nga na data-bs-dismiss="alert"xihlawulekisi. (A swi bohi loko u tirhisa ku sungula ka data-api hi ku tisungulela.)

Ndlela Nhlamuselo
close Ku pfala xitsundzuxo hi ku xi susa eka DOM. Loko titlilasi ta .fadena .showti ri kona eka elemente, xitsundzuxo xi ta nyamalala xi nga si susiwa.
dispose Ku herisa xitsundzuxo xa elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
getInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa xitsundzuxo lexi fambelanaka na elemente ya DOM. Hi xikombiso: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Ndlela ya static leyi vuyisaka xikombiso xa xitsundzuxo lexi fambelanaka na elemente ya DOM kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi: bootstrap.Alert.getOrCreateInstance(element).

Matirhiselo ya xisekelo: .

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

Swiendlakalo

Plugin ya xitsundzuxo ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa xitsundzuxo.

Nkhuvo Nhlamuselo
close.bs.alert Yi pfurha hi ku hatlisa loko ku closevitaniwa ndlela ya xikombiso.
closed.bs.alert Ku hlongoriwa loko xitsundzuxo xi pfariwile naswona ku cinca ka CSS ku herile. 
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()
})