Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Nti mkpu

Nye ozi nzaghachi gburugburu maka omume onye ọrụ na-ahụkarị site na iji obere ozi njikere dị ma na-agbanwe agbanwe.

Ihe atụ

Ọkwa dị maka ogologo ederede ọ bụla, yana bọtịnụ mmechi nhọrọ. Maka ịke nke ọma, jiri otu n'ime klaasị asatọ achọrọ.alert-success (dịka ọmụmaatụ ). Maka nchụpụ n'ịntanetị, jiri ngwa mgbakwunye Javascript mara ọkwa .

<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.

Ihe atụ dị ndụ

Pịa bọtịnụ dị n'okpuru iji gosi njikere (ezoro ezo na ụdị inline ka ịmalite), wee wepụ (ma bibie) ya na bọtịnụ nso arụnyere.

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

Anyị na-eji Javascript ndị a iji kpalite ngosi ngosi anyị dị ndụ:

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

Jiri .alert-linkklaasị ịba uru nye ngwa ngwa njikọ agba dabara n'ime njikere ọ bụla.

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

Ọdịnaya agbakwunyere

Mkpu nwekwara ike ịnwe ihe HTML ndị ọzọ dị ka isiokwu, paragraf na nkesa.

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

Akara ngosi

N'otu aka ahụ, ịnwere ike iji flexbox utilities na Bootstrap Icons iji mepụta ọkwa na akara ngosi. Dabere na akara ngosi gị na ọdịnaya gị, ịnwere ike itinyekwu ngwa ma ọ bụ ụdị omenala.

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

Ị chọrọ ihe karịrị otu akara ngosi maka ọkwa gị? Tụlee iji akara Bootstrap ndị ọzọ na ịme SVG sprite dị ka nke a ka ị na-edetụ otu akara ngosi ngwa ngwa ugboro ugboro.

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

Na-achụpụ

N'iji ngwa mgbakwunye Javascript nke njikere, ọ ga-ekwe omume ịwepu inline njikere ọ bụla. Nke a bụ ka:

  • Jide n'aka na ị kwajuru ngwa mgbakwunye njikere, ma ọ bụ Bootstrap Javascript achịkọtara.
  • Tinye bọtịnụ nso na .alert-dismissibleklaasị, nke na-agbakwunye mgbakwunye mgbakwunye n'aka nri nke njikere wee debe bọtịnụ nso.
  • Na bọtịnụ nso, gbakwunye data-bs-dismiss="alert"àgwà, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji <button>mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile.
  • Iji mee ka ngosi mara mgbe ị na-achụpụ ha, jide n'aka na ịtinye .fadena .showklaasị.

Ị nwere ike ịhụ nke a ka ọ na-eme site na iji ngosi dị ndụ:

<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>
Mgbe agbapụrụ ọkwa, a ga-ewepụ ihe ahụ kpamkpam na nhazi ibe. Ọ bụrụ na onye ọrụ ahụigodo wepụrụ njikere site na iji bọtịnụ nso, ihe ha ga-elekwasị anya ga-efunarị na mberede, dabere na ihe nchọgharị ahụ, malitegharịa na mmalite nke ibe/akwụkwọ. N'ihi nke a, anyị na-akwado ịgụnye Javascript agbakwunyere na-ege ntị maka closed.bs.alertmmemme ma na-ahazi mmemme focus()na ebe kachasị mma na ibe ahụ. Ọ bụrụ na ị na-eme atụmatụ ịkwaga nlebara anya gaa na ihe na-adịghị emekọrịta ihe nke na-anaghị anata elekwasị anya, gbaa mbọ gbakwunye tabindex="-1"na mmewere.

Sass

Mgbanwe

$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

Ngwakọta dị iche iche

Eji ya na $theme-colorsiji mepụta klaasị mgbanwe ọnọdụ maka ọkwa anyị.

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

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

Loop

Loop nke na-ewepụta klaasị 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);
  }
}

Omume Javascript

Bido

Malite ihe dị ka ihe ngosi

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

Maka naanị ebumnuche ịchụpụ ọkwa, ọ dịghị mkpa iji aka jiri JS API malite akụrụngwa. Site n'iji data-bs-dismiss="alert", a ga-ebido akụrụngwa ahụ na-akpaghị aka ma wepụ ya nke ọma.

Hụ ngalaba mkpalite maka nkọwa ndị ọzọ.

Na-akpalite

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị na njikere dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ na mpụga njikere site na iji data-bs-targetdị ka egosiri n'okpuru:

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

Mara na imechi mkpu ga-ewepụ ya na DOM.

Ụzọ

Usoro Nkọwa
close Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ .fadena .showklaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya.
dispose Na-emebi mmachi mmewere. (Na-ewepụ data echekwara na mmewere DOM)
getInstance Usoro static nke na-enye gị ohere ịnweta ihe atụ njikere jikọtara na ihe DOM, ị nwere ike iji ya dị ka nke a:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Ụzọ kwụ ọtọ nke na-eweghachi ihe atụ njikere jikọtara na mmewere DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya. Ị nwere ike iji ya dị ka nke a:bootstrap.Alert.getOrCreateInstance(element)
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Ihe omume

Ngwa mgbakwunye njikere Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ njikere.

Ihe omume Nkọwa
close.bs.alert Ọkụ ozugbo closea na-akpọ usoro ihe atụ.
closed.bs.alert Achụpụrụ mgbe emechiela ọkwa ahụ yana ntụgharị CSS agwụchaala.
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()
})