Mga alerto

Paghatag ug konteksto nga feedback nga mga mensahe alang sa kasagarang mga aksyon sa user uban sa pipila ka anaa ug flexible alert nga mga mensahe.

Mga pananglitan

Ang mga alerto magamit alang sa bisan unsang gitas-on sa teksto, ingon man usa ka opsyonal nga buton sa pagtangtang. Alang sa hustong pag-istilo, gamita ang usa sa walo ka gikinahanglang mga klase sa konteksto (pananglitan, .alert-success). Alang sa inline nga pagtangtang, gamita ang mga alerto nga jQuery plugin .

Usa ka yano nga pangunang alerto—susiha kini!

Usa ka yano nga sekundaryong alerto—susiha kini!

Usa ka yano nga alerto sa kalampusan-susiha kini!

Usa ka yano nga alerto sa peligro—susiha kini!

Usa ka yano nga alerto sa pasidaan—susiha kini!

Usa ka yano nga alerto sa impormasyon—susiha kini!

Usa ka yano nga alerto sa kahayag-susiha kini!

Usa ka yano nga ngitngit nga alerto-susiha kini!

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor klaro gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.

Kolor sa link

Gamita ang .alert-linkklase sa utility aron dali nga mahatagan ang parehas nga kolor nga mga link sa sulod sa bisan unsang alerto.

Usa ka yano nga panguna nga alerto nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga ikaduhang alerto nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga alerto sa kalampusan nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga alerto sa peligro nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga alerto sa pasidaan nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga alerto sa impormasyon nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga alerto sa kahayag nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

Usa ka yano nga ngitngit nga alerto nga adunay usa ka pananglitan nga link . Hatagi kini og usa ka pag-klik kung gusto nimo.

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

Dugang nga sulod

Ang mga alerto mahimo usab nga adunay dugang nga mga elemento sa HTML sama sa mga ulohan, paragraph ug mga divider.

Maayong pagkabuhat!

Aww oo, malampuson nimo nga nabasa kining hinungdanon nga mensahe sa alerto. Kini nga pananglitan nga teksto modagan ug gamay aron imong makita kung giunsa ang gilay-on sa sulod sa usa ka alerto nga molihok sa kini nga klase sa sulud.

Bisan kanus-a nimo kinahanglan, siguruha nga mogamit mga margin utilities aron mapadayon ang mga butang nga matahum ug hapsay.

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

Gipalagpot

Gamit ang alerto nga JavaScript plugin, posible nga i-dismiss ang bisan unsang alert inline. Ania kung giunsa:

Siguroha nga imong gikarga ang alert plugin, o ang gihugpong nga Bootstrap JavaScript.
Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js . Ang gihugpong nga bersyon naglakip niini.
Idugang ang dismiss nga buton ug ang .alert-dismissibleklase, nga magdugang og dugang nga padding sa tuo sa alerto ug ibutang ang .closebuton.
Sa dismiss nga buton, idugang ang data-dismiss="alert"hiyas, nga nagpalihok sa pagpaandar sa JavaScript. Siguroha nga gamiton ang <button>elemento uban niini alang sa husto nga kinaiya sa tanang mga himan.
Aron ma-animate ang mga alerto kung i-dismiss kini, siguruha nga idugang ang .fadeug .showmga klase.

Makita nimo kini sa aksyon nga adunay live demo:

Balaan nga guacamole! Kinahanglan nga imong susihon ang pipila sa mga natad sa ubos.

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

Panggawi sa JavaScript

Mga trigger

I-enable ang pagtangtang sa usa ka alerto pinaagi sa JavaScript:

$('.alert').alert()

O adunay datamga hiyas sa usa ka buton sulod sa alerto , sama sa gipakita sa ibabaw:

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

Timan-i nga ang pagsira sa usa ka alerto magtangtang niini gikan sa DOM.

Pamaagi

Pamaagi	Deskripsyon
`$().alert()`	Naghimo usa ka alerto sa pagpamati sa mga panghitabo sa pag-klik sa mga elemento sa kaliwat nga adunay `data-dismiss="alert"`hiyas. (Dili kinahanglan kung gamiton ang auto-initialization sa data-api.)
`$().alert('close')`	Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang `.fade`ug ang `.show`mga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.
`$().alert('dispose')`	Makaguba sa alerto sa usa ka elemento.

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

Mga panghitabo

Ang alert plugin sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa alert functionality.

Panghitabo	Deskripsyon
`close.bs.alert`	Kini nga panghitabo nagdilaab dayon kung ang `close`pamaagi sa pananglitan gitawag.
`closed.bs.alert`	Kini nga panghitabo gipabuto kung ang alerto sirado na (maghulat alang sa mga transisyon sa CSS nga makompleto).

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