Source

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 .

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

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

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

<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 gamit ang usa ka live demo:

<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 .fadeug ang .showmga 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 closepamaagi 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…
})