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">
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>
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-only
klase.
Kulay ng link
Gamitin ang .alert-link
utility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang 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>
Karagdagang nilalaman
Ang mga alerto ay maaari ding maglaman ng mga karagdagang elemento ng HTML tulad ng mga heading, paragraph at divider.
Magaling!
Aww oo, matagumpay mong nabasa itong mahalagang mensahe ng alerto. Ang halimbawang teksto na ito ay tatakbo nang medyo mas mahaba upang makita mo kung paano gumagana ang espasyo sa loob ng isang alerto sa ganitong uri ng nilalaman.
Sa tuwing kailangan mo, siguraduhing gumamit ng mga margin utility upang mapanatiling maganda at maayos ang mga bagay.
<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, nangangailangan
util.js
ito ng . Kasama sa pinagsama-samang bersyon ito. - Magdagdag ng dismiss na button at ang
.alert-dismissible
klase, na nagdaragdag ng karagdagang padding sa kanan ng alerto at iposisyon ang.close
button. - 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
.fade
at mga.show
klase.
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">×</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 data
katangian 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">×</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 .fade at mga .show klase 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 close tinawag 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...
})