Source

Dagiti Alerto

Mangted kadagiti mensahe ti konteksto a feedback para kadagiti gagangay nga aramid ti agar-aramat nga addaan kadagiti sumagmamano a magun-od ken nalaka a maibagay a mensahe ti alerto.

Dagiti pagarigan

Dagiti alerto ket magun-od para iti ania man a kaatiddog ti teksto, ken kasta met ti opsional a buton ti panangilaksid. Para iti umno nga estilo, usaren ti maysa kadagiti walo a kasapulan a klase ti konteksto (kas pagarigan, .alert-success). Para iti inline a pannakaikkat, usaren ti alerto a jQuery plugin .

Maysa a simple a kangrunaan nga alerto—kitaem dayta!

Maysa a simple a segundario nga alerto—kitaem dayta!

Simple nga alerto ti balligi—kitaem dayta!

Simple nga alerto maipapan iti peggad—kitaem dayta!

Simple a pakdaar nga alerto—kitaem dayta!

Simple nga info alert—kitaem dayta!

Simple nga alerto ti lawag—kitaem dayta!

Simple a dark alert—kitaem dayta!

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

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Isilpo ti kolor

Usaren ti .alert-linkklase ti utilidad tapno napardas a mangipaay kadagiti agpapada a namaris a silpo iti uneg ti ania man nga alerto.

Ti simple a kangrunaan nga alerto nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Ti simple a sekondario nga alerto nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Maysa a simple nga alerto ti balligi nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Maysa a simple nga alerto ti peggad nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Ti simple nga alerto ti pakdaar nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Ti simple nga alerto ti impormasion nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Maysa a simple nga alerto ti lawag nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

Maysa a simple a nasipnget nga alerto nga addaan iti pagarigan a silpo . Ikkam iti click no kayatmo.

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

Kanayonan a linaon

Dagiti alerto ket mabalin pay nga aglaon kadagiti kanayonan nga elemento ti HTML a kas dagiti paulo, parapo ken dagiti mangbingbingay.

Naglaing!

Aww yeah, sibaballigi a nabasam daytoy napateg nga alert message. Daytoy a pagarigan a teksto ket mapan nga agtaray iti bassit nga at-atiddog tapno makitam no kasano nga agtrabaho ti panagsisina iti uneg ti maysa nga alerto iti daytoy a kita ti linaon.

Tunggal kasapulam, siguraduem nga agusarka kadagiti margin utilities tapno nasayaat ken naurnos dagiti bambanag.

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

Panangikkat iti trabaho

Babaen ti panagusar ti plugin ti alerto a JavaScript, mabalin a mailaksid ti ania man nga alerto iti inline. Kastoy ti kasano:

Siguraduenyo a naikargayo ti plugin ti alerto, wenno ti naurnong a Bootstrap JavaScript.
No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js . Ti naurnong a bersion ket mangiraman iti daytoy.
Manginayon iti dismiss button ken ti .alert-dismissibleklase, a mangnayon iti ekstra a padding iti kannawan ti alerto ken mangiposision iti .closebuton.
Iti buton ti panangilaksid, inayon ti data-dismiss="alert"attribute, a mangtignay ti panagandar ti JavaScript. Siguraduen nga usaren ti <button>elemento a kaduana para iti umno a kababalin iti ballasiw dagiti amin nga alikamen.
Tapno ma-animate dagiti alerto no ilaksid dagitoy, siguraduen nga inayon ti .fadeken .showdagiti klase.

Mabalinmo a makita daytoy nga agtigtignay babaen ti live demo:

Nasantuan a guacamole! Rumbeng nga ag-check in-ka iti sumagmamano kadagita a tay-ak iti baba.

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

Kababalin ti JavaScript

Dagiti mangtignay

Pagbalinen ti pannakaikkat ti maysa nga alerto babaen ti JavaScript:

$('.alert').alert()

Wenno addaan kadagiti dataattribute iti maysa a buton iti uneg ti alerto , kas naipakita iti ngato:

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

Imutektekanyo a ti panangserra iti alerto ket mangikkat iti dayta manipud iti DOM.

Dagiti Pamay-an

Wagas	Panangiladawan
`$().alert()`	Mangaramid ti maysa nga alerto a dumngeg para kadagiti pasamak ti panagpidut kadagiti kaputotan nga elemento nga addaan ti `data-dismiss="alert"`attribute. (Saan a kasapulan no agus-usar ti auto-initialization ti data-api.)
`$().alert('close')`	Serraan ti maysa nga alerto babaen ti panangikkat iti dayta manipud iti DOM. No ti `.fade`ken `.show`dagiti klase ket adda iti elemento, ti alerto ket agkupas sakbay a maikkat daytoy.
`$().alert('dispose')`	Dadaelenna ti alerto ti maysa nga elemento.

$(".alert").alert('close')

Dagiti Pasamak

Ti plugin ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.

Pasamak	Panangiladawan
`close.bs.alert`	Daytoy a pasamak ket agputok a dagus no ti `close`pamay-an ti pagarigan ket maawagan.
`closed.bs.alert`	Daytoy a pasamak ket mapaputok no ti alerto ket naiserra (urayenna dagiti panagbalbaliw ti CSS a malpas).

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})