Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

Kɔkɔbɔ ahorow

Fa nsɛm a ɛfa ho nsɛm a wɔde ma ho nkrasɛm ma nneyɛe a ɛtaa ba a ɔde di dwuma no de nsa kakraa bi a ɛwɔ hɔ na ɛyɛ mmerɛw a wɔde bɔ kɔkɔ no ma.

Wɔ kratafa yi so

Nhwɛso ahorow

Kɔkɔbɔ ahorow wɔ hɔ ma nsɛm tenten biara, ne bɔtn a wopɛ sɛ wode to mu. Sɛ wopɛ sɛ wohyɛ no yiye a, fa nsɛm a ɛfa ho adesua ahorow awotwe a wɔhwehwɛ no mu biako di dwuma (sɛ nhwɛso no, .alert-success). Sɛ wopɛ sɛ woyi obi fi mu a, fa kɔkɔbɔ ahorow no JavaScript plugin .

html na ɛwɔ hɔ 
<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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.

Nhwɛso a ɛte ase

Klik bɔtn a ɛwɔ ase hɔ no so na kyerɛ kɔkɔbɔ bi (wɔde inline styles ahintaw a wode befi ase), afei pow (na sɛe) no denam close button a wɔasisi mu no so.

html na ɛwɔ hɔ 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Yɛde JavaScript a edidi so yi di dwuma de kanyan yɛn live alert demo no:

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

Fa .alert-linkutility class no di dwuma fa ntɛm ara ma links a ɛwɔ kɔla a ɛne no hyia wɔ kɔkɔbɔ biara mu.

html na ɛwɔ hɔ 
<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>

Nsɛm foforo a ɛwɔ mu

Kɔkɔbɔ nso betumi akura HTML nneɛma foforo te sɛ nsɛmti, nkyekyɛm ne nkyekyɛmu.

html na ɛwɔ hɔ 
<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>

Nsɛnkyerɛnnede ahorow

Saa ara nso na wobɛtumi de flexbox utilities ne Bootstrap Icons ayɛ kɔkɔbɔ a ɛwɔ ahyɛnsodeɛ. Ɛgyina wo ahyɛnsodeɛ ne nsɛm a ɛwɔ mu so no, ebia wobɛpɛ sɛ wode utilities anaa custom styles pii ka ho.

html na ɛwɔ hɔ 
<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>

Wo hia ahyɛnsode bɛboro biako ma wo kɔkɔbɔ ahorow no? Susuw ho sɛ wode Bootstrap Icons pii bedi dwuma na woayɛ local SVG sprite te sɛ saa na ama ayɛ mmerɛw sɛ wobɛtwe adwene asi icons koro no ara so mpɛn pii.

html na ɛwɔ hɔ 
<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>

Wobeyi wɔn afi adwumam

Sɛ wode kɔkɔbɔ JavaScript plugin no di dwuma a, wubetumi apow kɔkɔbɔ biara a ɛwɔ inline no mu. Sɛnea ɛte ni:

  • Hwɛ sɛ woahyɛ kɔkɔbɔ plugin no, anaa Bootstrap JavaScript a wɔaboaboa ano no.
  • Fa close button ne .alert-dismissibleclass no ka ho, na ɛde padding foforo ka ho wɔ kɔkɔbɔ no nifa so na ɛde close button no si hɔ.
  • Wɔ close button no so no, fa data-bs-dismiss="alert"attribute no ka ho, na ɛno na ɛkanyan JavaScript dwumadie no. Hwɛ hu sɛ wode <button>element no bedi dwuma ne no ama suban pa wɔ mfiri ahorow nyinaa so.
  • Sɛnea ɛbɛyɛ a wobɛma kɔkɔbɔ ahorow no ayɛ anigye bere a worepow no no, hwɛ hu sɛ wode .fadene no bɛka ho.show adesua ahorow no bɛka ho.

Wubetumi ahu eyi wɔ adeyɛ mu denam live demo so:

html na ɛwɔ hɔ 
<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>
Sɛ wɔpow kɔkɔbɔ bi a, woyi element no fi kratafa nhyehyɛe no mu koraa. Sɛ obi a ɔde keyboard di dwuma de close button no pow kɔkɔbɔ no a, wɔn adwene bɛyera mpofirim na, egyina browser no so no, wɔbɛsan de akɔ kratafa/nkyerɛwee no mfiase. Esiane eyi nti, yɛhyɛ nyansa sɛ fa JavaScript foforo a etie closed.bs.alertadeyɛ no na ɛde nhyehyɛe si hɔ no ka ho focus() beae a ɛfata sen biara wɔ kratafa no mu no ka ho. Sɛ woreyɛ nhyehyɛe sɛ wode w’adwene bɛkɔ ade a ɛnyɛ nkitahodi a mpɛn pii no ennya adwene a, hwɛ hu sɛ wode bɛka tabindex="-1"element no ho.

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren kɔkɔbɔ ahorow de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .alertma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

  --#{$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 nsakrae ahorow

$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 a wɔde mixin yɛ

Wɔde di dwuma ka bom ne $theme-colorssɛ yɛbɛbɔ contextual modifier classes ama yɛn alerts.

@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 a ɛyɛ loop

Loop a ɛma modifier classes no ne alert-variant()mixin no.

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

JavaScript nneyɛe

Fi ase

Initialize elements sɛ kɔkɔbɔ ahorow

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

Sɛnea ɛbɛyɛ a wobɛpow kɔkɔbɔ bi no, ɛho nhia sɛ wode nsa bɛhyɛ ade no ase denam JS API no so. Ɛdenam , a wode bedi dwuma so no data-bs-dismiss="alert", wobefi ase ayɛ ɔfã no ankasa na wɔagyae no yiye.

Hwɛ triggers ɔfã no ma nsɛm pii.

Nneɛma a ɛkanyan adwene

Wobetumi de datasu a ɛwɔ bɔtn bi so wɔ kɔkɔbɔ no mu sɛnea wɔada no adi wɔ ase ha no ayɛ adwuma a wobeyi afi adwumam no:

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

anaasɛ wɔ bɔtn bi a ɛwɔ kɔkɔbɔ no akyi a wɔde di dwuma data-bs-targetsɛnea wɔada no adi wɔ ase ha no:

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

Hyɛ no nsow sɛ sɛ woto kɔkɔbɔ bi mu a, ebeyi afi DOM no mu.

Akwan a wɔfa so yɛ

Wubetumi de kɔkɔbɔ constructor no ayɛ kɔkɔbɔ nhwɛso, sɛ nhwɛso no:

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

Wei ma kɔkɔbɔ tie click events wɔ descendant elements a ɛwɔ data-bs-dismiss="alert"attribute no so. (Ɛho nhia bere a wode data-api no auto-initialization redi dwuma no.)

Ɔkwan Nkyerɛmu
close Ɛto kɔkɔbɔ bi mu denam yi a wubeyi afi DOM no mu no so. Sɛ .fadene .showadesua ahorow no wɔ element no so a, kɔkɔbɔ no bɛyera ansa na wɔayi afi hɔ.
dispose Ɔsɛe element bi ani a ɛwɔ hɔ no. (Eyi data a wɔde asie wɔ DOM element no so)
getInstance Static kwan a ɛma wo kwan ma wo nya kɔkɔbɔ nhwɛso a ɛbata DOM element bi ho. Sɛ nhwɛso no: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Static kwan a ɛsan de kɔkɔbɔ nhwɛsoɔ a ɛbata DOM element bi ho anaasɛ ɛbɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea eyi te: bootstrap.Alert.getOrCreateInstance(element).

Mfitiase a wɔde di dwuma:

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

Nsɛm a esisi

Bootstrap no kɔkɔbɔ plugin no da nsɛm kakraa bi a esisi ma hooking kɔ kɔkɔbɔ dwumadi mu adi.

Dwumadie Nkyerɛmu
close.bs.alert Ogya ntɛm ara bere a closewɔfrɛ instance kwan no.
closed.bs.alert Wɔtow no bere a wɔato kɔkɔbɔ no mu na CSS nsakrae ahorow no awie no. 
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()
})