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 .
Isang simpleng pangunahing alerto—tingnan ito!
Isang simpleng pangalawang alerto—tingnan ito!
Isang simpleng alerto sa tagumpay—tingnan ito!
Isang simpleng alerto sa panganib—tingnan ito!
Isang simpleng alerto ng babala—tingnan ito!
Isang simpleng alerto ng impormasyon—tingnan ito!
Isang simpleng light alert—tingnan ito!
Isang simpleng madilim na alerto—tingnan ito!
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.
Kulay ng link
Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.
Isang simpleng pangunahing alerto na may
isang halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng pangalawang alerto na may
halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng alerto sa tagumpay na may
isang halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng alerto sa panganib na may
halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng alerto ng babala na may
isang halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng alerto ng impormasyon na may
isang halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng light alert na may
isang halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
Isang simpleng madilim na alerto na may
halimbawang link . Bigyan ito ng isang pag-click kung gusto mo.
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.
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:
Banal na guacamole! Dapat kang mag-check in sa ilan sa mga field na iyon sa ibaba.
Pag-uugali ng JavaScript
Mga nag-trigger
Paganahin ang pag-dismiss ng isang alerto sa pamamagitan ng JavaScript:
O may mga datakatangian sa isang button sa loob ng alerto , tulad ng ipinakita sa itaas:
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.
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).