Nti mkpu

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

Na ibe a

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 .

Mkpesa mbụ dị mfe — lelee ya!

Mfe nke abụọ dị mfe — lelee ya!

Mfe njikere ịga nke ọma dị mfe — lelee ya!

Ọkwa dị mfe ihe egwu - lelee ya!

Ịdọ aka ná ntị dị mfe - lelee ya!

Mkpesa ozi dị mfe - lelee ya!

Mfe ọkụ dị mfe — lelee ya!

Mfeta gbara ọchịchịrị dị mfe - lelee ya!

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>

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.

html

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

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

Agba njikọ

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

Mkpesa mbụ dị mfe nwere njikọ ọmụmaatụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Mfe nke abụọ dị mfe nwere njikọ ọmụmaatụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Ọganihu dị mfe na njikọ ihe atụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Ọmụma ihe egwu dị mfe nwere njikọ ọmụmaatụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Ọkwa ịdọ aka ná ntị dị mfe nwere njikọ ihe atụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Mmanya ozi dị mfe yana njikọ ọmụmaatụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Ọmụma ọkụ dị mfe nwere njikọ ihe atụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

Mmanya gbara ọchịchịrị dị mfe nwere njikọ ọmụmaatụ . Nye ya pịa ma ọ bụrụ na-amasị gị.

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>

Ọdịnaya agbakwunyere

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

Ị mere nke ọma!

Ewoo ee, ị gụrụ nke ọma ozi njikere a dị mkpa. Ederede ihe atụ a ga-adị ogologo ogologo oge ka ị wee hụ ka oghere n'ime njikere si arụ ọrụ na ụdị ọdịnaya a.

Mgbe ọ bụla ịchọrọ, jide n'aka na ị na-eji ngwa oke ala iji dobe ihe dị mma ma dị mma.

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>

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.

Ngosipụta ihe atụ nwere akara ngosi

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>

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

Ngosipụta ihe atụ nwere akara ngosi

Nlebanya ihe ịga nke ọma na akara ngosi

Ọmụmaatụ ịdọ aka ná ntị nwere akara ngosi

Ihe atụ ịdọ aka ná ntị ihe egwu nwere akara ngosi

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>

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

Guacamole dị nsọ! Ịkwesịrị ịbanye na ụfọdụ ubi ndị dị n'okpuru.

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>

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.

CSS

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke mgbanwe mgbanwe CSS nke Bootstrap, ọkwa ugbu a na-eji mgbanwe CSS mpaghara .alertmaka imeziwanye ezigbo oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

  --#{$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 variables

$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

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

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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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ọ

Ị nwere ike ịmepụta ihe atụ njikere site na onye nrụpụta njikere, dịka ọmụmaatụ:

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

Nke a na-eme ka anya na-ege ntị maka ihe omume pịpị na ihe ndị sitere na nke nwere data-bs-dismiss="alert"njirimara. (Ọ dịghị mkpa mgbe ị na-eji data-api's auto-mmalite.)

Usoro	Nkọwa
`close`	Na-emechi mkpu site na iwepu ya na DOM. Ọ bụrụ `.fade`na `.show`klaasị dị na mmewere, njikere ga-apụ apụ tupu ewepụ ya.
`dispose`	Na-emebi mmachi mmewere. (Na-ewepụ data echekwara na mmewere DOM)
`getInstance`	Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ njikere jikọtara na mmewere DOM. Dịka ọmụmaatụ: `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)`:.

Ojiji nke isi:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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 `close`a na-akpọ usoro ihe atụ.
`closed.bs.alert`	Achụpụrụ mgbe emechiela ọkwa ahụ yana ntụgharị CSS agwụchaala.

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