Source

ʻO nā makaʻala

Hāʻawi i nā memo manaʻo hoʻopuka no nā hana maʻamau o ka mea hoʻohana me ka liʻiliʻi o nā memo makaʻala i loaʻa a maʻalahi.

Nā laʻana

Loaʻa nā mākaʻikaʻi no kēlā me kēia lōʻihi o ke kikokikona, a me kahi pihi hoʻokuʻu koho. No ke kāhili pono ʻana, e hoʻohana i kekahi o nā ʻewalu mau papa pōʻaiapili e pono ai (e laʻa, .alert-success). No ka hoʻokuʻu ʻana i ka laina, e hoʻohana i ka plugin jQuery alerts .

<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>
Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua

ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ke kala i ʻike ʻia mai ka ʻike ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa.

E hoʻohana i ka .alert-linkpapa hana pono e hāʻawi koke i nā loulou kala like ʻole i loko o kekahi makaʻala.

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

Maʻiʻo hou aku

Hiki ke loaʻa i nā ʻōlelo aʻoaʻo nā mea HTML hou e like me nā poʻo, nā paukū a me nā mea hoʻokaʻawale.

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

Hoʻokuʻu

Me ka hoʻohana ʻana i ka plugin JavaScript makaʻala, hiki ke hoʻokuʻu i kekahi makaʻala inline. Penei:

  • E ʻike pono ua hoʻouka ʻoe i ka plugin alert, a i ʻole ka Bootstrap JavaScript i hōʻuluʻulu ʻia.
  • Inā ʻoe e kūkulu nei i kā mākou JavaScript mai ke kumu, ponoutil.js ia . ʻO ka mana i hui pū ʻia me kēia.
  • E hoʻohui i kahi pihi hoʻokuʻu a me ka .alert-dismissiblepapa, e hoʻohui i ka padding hou ma ka ʻākau o ka makaʻala a hoʻonoho i ke .closepihi.
  • Ma ke pihi hoʻokuʻu, e hoʻohui i ke data-dismiss="alert"ʻano, ka mea e hoʻoulu ai i ka hana JavaScript. E hoʻohana pono i ka <button>mea me ia no ka hana kūpono ma nā ʻaoʻao āpau.
  • No ka hoʻoulu ʻana i nā makaʻala i ka wā e haʻalele ai iā lākou, e hōʻoia e hoʻohui i nā papa .fadea me .shownā papa.

Hiki iā ʻoe ke ʻike i kēia i ka hana me kahi demo 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>

ʻO ka hana JavaScript

Nā mea hoʻoulu

E ʻae i ka wehe ʻana i kahi makaʻala ma o JavaScript:

$('.alert').alert()

A i ʻole me nā datahiʻohiʻona ma kahi pihi i loko o ka makaʻala , e like me ka mea i hōʻike ʻia ma luna nei:

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

E hoʻomaopopo ʻo ka pani ʻana i kahi makaʻala e wehe ia mai ka DOM.

Nā ʻano hana

Kaʻina hana wehewehe
$().alert() E hoʻolohe i nā hanana kaomi ma nā ʻano mamo nona ka data-dismiss="alert"ʻano. (ʻAʻole pono i ka wā e hoʻohana ai i ka hoʻomaka ʻana o ka data-api.)
$().alert('close') Pani i kahi makaʻala ma ka wehe ʻana iā ia mai ka DOM. Inā loaʻa ka .fadea me .shownā papa ma ka mea, e mae ka makaʻala ma mua o ka wehe ʻana.
$().alert('dispose') Hoʻopau i ka makaʻala o kahi mea. 
$(".alert").alert('close')

Nā hanana

Hōʻike ka plugin alert a Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana makaʻala.

Hanana wehewehe
close.bs.alert Hoʻomaka koke kēia hanana i ke closekāhea ʻia ʻana o ke ʻano hana.
closed.bs.alert Hoʻopau ʻia kēia hanana i ka wā i pani ʻia ai ka makaʻala (e kali no ka hoʻopau ʻana o CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})