Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
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 .

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

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

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

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.

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

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

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

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.

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

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 worepam no no, hwɛ hu sɛ wode .fadene .showadesua ahorow no bɛka ho.

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

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

Sass

Nneɛma a Ɛsakra

$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

Mixin a ɛyɛ soronko

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) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

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

Ɛpɔ

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

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return 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ɛ

Ɔ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 no, wubetumi de adi dwuma sɛnea eyi te: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 ɛte yi:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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. 
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()
})