Source

Mga alerto

Magbigay ng mga mensahe ng feedback ayon sa konteksto para sa mga karaniwang pagkilos ng user na may kakaunting available at flexible na mensahe ng alerto.

Mga halimbawa

Available ang mga alerto para sa anumang haba ng text, pati na rin ang opsyonal na button na i-dismiss. Para sa tamang pag-istilo, gumamit ng isa sa walong kinakailangang mga klase sa konteksto (hal., .alert-success). Para sa inline na dismissal, gamitin ang mga alerto 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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.

Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.

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

Karagdagang nilalaman

Ang mga alerto ay maaari ding maglaman ng mga karagdagang elemento ng HTML tulad ng mga heading, paragraph at 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>

Tinatanggal

Gamit ang alertong JavaScript plugin, posibleng i-dismiss ang anumang alerto sa linya. Ganito:

  • Tiyaking na-load mo ang alerto plugin, o ang pinagsama-samang Bootstrap JavaScript.
  • Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng . Kasama sa pinagsama-samang bersyon ito.
  • Magdagdag ng dismiss na button at ang .alert-dismissibleklase, na nagdaragdag ng karagdagang padding sa kanan ng alerto at iposisyon ang .closebutton.
  • Sa button na i-dismiss, idagdag ang data-dismiss="alert"attribute, na nagti-trigger sa functionality ng JavaScript. Tiyaking gamitin ang <button>elemento kasama nito para sa wastong pag-uugali sa lahat ng device.
  • Upang i-animate ang mga alerto kapag dini-dismiss ang mga ito, tiyaking idagdag ang .fadeat mga .showklase.

Makikita mo ito sa pagkilos gamit ang isang live na 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>

Pag-uugali ng JavaScript

Mga nag-trigger

Paganahin ang pag-dismiss ng isang alerto sa pamamagitan ng JavaScript:

$('.alert').alert()

O may mga datakatangian sa isang button sa loob ng alerto , tulad ng ipinakita sa itaas:

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

Tandaan na ang pagsasara ng alerto ay mag-aalis nito sa DOM.

Paraan

Pamamaraan Paglalarawan
$().alert() Gumagawa ng alerto sa pakikinig para sa mga kaganapan sa pag-click sa mga descendant na elemento na may data-dismiss="alert"katangian. (Hindi kinakailangan kapag ginagamit ang auto-initialization ng data-api.)
$().alert('close') Nagsasara ng alerto sa pamamagitan ng pag-alis nito sa DOM. Kung ang .fadeat mga .showklase ay naroroon sa elemento, ang alerto ay maglalaho bago ito alisin.
$().alert('dispose') Sinisira ang alerto ng isang elemento. 
$(".alert").alert('close')

Mga kaganapan

Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook sa pagpapaandar ng alerto.

Kaganapan Paglalarawan
close.bs.alert Agad na gagana ang kaganapang ito kapag closetinawag ang paraan ng instance.
closed.bs.alert Ang kaganapang ito ay gagana kapag ang alerto ay sarado na (maghihintay para sa CSS transitions upang makumpleto). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})