Source

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.

Nhwɛso ahorow

Wɔabɔ kɔkɔ wɔ nsɛm a wɔakyerɛw no tenten biara ho, ne bɔtn a wubetumi apaw a ɛbɛma woagyae adwuma no. 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 jQuery plugin no di dwuma .

<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 .sr-onlyadesuakuw no mu.

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>

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.
  • Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js . Nea ɛka nkyerɛase a wɔaboaboa ano no ho ne eyi.
  • Fa dismiss button ne .alert-dismissibleclass no ka ho, na ɛde padding foforo ka ho wɔ kɔkɔbɔ no nifa so na ɛde .closebutton no si hɔ.
  • Wɔ dismiss button no so no, fa data-dismiss="alert"attribute no ka ho, 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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript nneyɛe

Nneɛma a ɛkanyan adwene

Ma kɔkɔbɔ bi a wɔpow no nyɛ adwuma denam JavaScript so:

$('.alert').alert()

Anaasɛ datasu ahorow a ɛwɔ bɔtn bi so wɔ kɔkɔbɔ no mu , sɛnea wɔada no adi wɔ atifi hɔ no:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</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
$().alert() Ɛma kɔkɔbɔ tie click nsɛm a esisi wɔ aseni elements a ɛwɔ data-dismiss="alert"attribute no so. (Ɛho nhia bere a wode data-api no auto-initialization redi dwuma no.)
$().alert('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ɔ.
$().alert('dispose') Ɔsɛe element bi ani a ɛwɔ hɔ no. 
$(".alert").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 Saa adeyɛ yi tow ntɛm ara bere a closewɔfrɛ instance kwan no.
closed.bs.alert Wɔtow saa adeyɛ yi bere a wɔato kɔkɔbɔ no mu (bɛtwɛn ma CSS nsakrae ahorow no awie). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})