Source

Fa'aliga

Tuuina atu fe'au fa'amatalaga fa'atatau mo fa'atinoga masani a tagata fa'aoga fa'atasi ai ma le lima o fe'au mataala avanoa ma fetu'una'i.

Faataitaiga

E avanoa fa'aaliga mo so'o se umi o tusitusiga, fa'apea fo'i ma se fa'amau fa'ate'a. Mo le fa'avasega lelei, fa'aaoga se tasi o vasega fa'atatau e valu e mana'omia (fa'ata'ita'iga, .alert-success). Mo le fa'ate'aina i totonu, fa'aoga le fa'alilolilo jQuery plugin .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Tu'uina atu le uiga i tekinolosi fesoasoani

O le fa'aogaina o le lanu e fa'aopoopo ai le uiga e na'o se fa'aaliga va'aia, e le fa'ailoa atu i tagata fa'aoga o tekonolosi fesoasoani - e pei o le au faitau mata. Ia fa'amautinoa o fa'amatalaga o lo'o fa'ailogaina i le lanu e manino mai le anotusi lava ia (fa'ata'ita'iga o tusitusiga va'aia), pe fa'aofi mai i isi auala, e pei o tusitusiga fa'aopoopo natia i le .sr-onlyvasega.

Fa'aoga le .alert-linkvasega aoga e vave tu'uina atu ai so'otaga lanu tutusa i totonu o so'o se mataala.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Fa'aopoopo anotusi

E mafai fo'i ona iai fa'amatalaga HTML fa'aopoopo e pei o ulutala, parakalafa ma vaeluaga.

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

Fa'ate'aina

I le fa'aogaina o le fa'apipi'i JavaScript alert, e mafai ona fa'ate'aina so'o se mataala i totonu. O le auala lenei:

  • Ia mautinoa ua e utaina le masini mataala, poʻo le Bootstrap JavaScript ua tuufaatasia.
  • Afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js . O le lomiga tuufaatasia e aofia ai lenei.
  • Fa'aopoopo i ai le fa'amau fa'ate'a ma le .alert-dismissiblevasega, lea e fa'aopoopoina ai le fa'ailoga fa'aopoopo i le itu taumatau o le mataala ma fa'atulaga le .closeki.
  • I luga o le fa'ate'a fa'amau, fa'aopoopo le data-dismiss="alert"uiga, lea e fa'aoso ai le fa'atinoga o le JavaScript. Ia mautinoa e faʻaaoga le <button>elemene mo le amio talafeagai i masini uma.
  • Ina ia fa'aola fa'aaliga pe a fa'ate'aina, ia mautinoa e fa'aopoopo le .fadema .showvasega.

E mafai ona e vaʻaia lenei mea i le gaioiga ma se faʻaaliga ola:

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

Amioga JavaScript

Fa'aoso

Fa'aaga le fa'ate'aina o se mataala e ala i le JavaScript:

$('.alert').alert()

Po'o fa'atasi ma datauiga i luga o se fa'amau i totonu o le mataala , e pei ona fa'aalia i luga:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Manatua o le tapunia o se mataala o le a aveesea mai le DOM.

Metotia

Metotia Fa'amatalaga
$().alert() Faia se mataala e fa'alogo mo kiliki mea e tutupu i elemene tupuaga o lo'o iai le data-dismiss="alert"uiga. (E le manaʻomia pe a faʻaaogaina le faʻamatalaga-autometi a le data-api.)
$().alert('close') Tapuni se mataala e ala i le aveese mai le DOM. Afai o le .fadema .showvasega o loʻo i ai i luga o le elemene, o le mataala o le a mou ese atu aʻo leʻi aveesea.
$().alert('dispose') Fa'aleagaina le mataala o se elemene. 
$(".alert").alert('close')

Mea na tutupu

O le plugin alert a Bootstrap e fa'aalia ai ni nai mea na tutupu mo le fa'aogaina i galuega mataala.

Mea na tupu Fa'amatalaga
close.bs.alert E mu vave lenei mea pe a closevalaʻau le auala faʻataʻitaʻiga.
closed.bs.alert O lenei mea e tupu pe a tapunia le mataala (o le a faʻatali mo suiga CSS e maeʻa). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})