Source

Alèt

Bay mesaj fidbak kontèks pou aksyon itilizatè tipik ak ti ponyen mesaj alèt ki disponib ak fleksib.

Egzanp yo

Alèt yo disponib pou nenpòt ki longè tèks, osi byen ke yon bouton anile opsyonèl. Pou bon manier, sèvi ak youn nan uit klas kontèks obligatwa.alert-success yo (egzanp, ). Pou revokasyon an liy, sèvi ak alèt jQuery plugin la .

<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>
Transmèt siyifikasyon nan teknoloji asistans

Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a ​​se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-onlyklas la.

Sèvi ak .alert-linkklas sèvis piblik la byen vit bay lyen ki gen koulè ki matche nan nenpòt alèt.

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

Kontni adisyonèl

Alèt yo kapab genyen tou eleman HTML adisyonèl tankou tit, paragraf ak divize.

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

Ranvwaye

Lè l sèvi avèk plugin JavaScript alèt la, li posib pou ranvwaye nenpòt alèt inline. Men ki jan:

  • Asire w ou te chaje plugin alèt la, oubyen konpile Bootstrap JavaScript.
  • Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js . Vèsyon an konpile gen ladan sa a.
  • Ajoute yon bouton ranvwaye ak .alert-dismissibleklas la, ki ajoute siplemantè padding adwat alèt la ak pozisyon .closebouton an.
  • Sou bouton an ranvwaye, ajoute data-dismiss="alert"atribi a, ki deklanche fonksyonalite JavaScript. Asire ou ke ou sèvi ak <button>eleman nan ak li pou bon konpòtman atravè tout aparèy.
  • Pou anime alèt lè w ap ranvwaye yo, asire w ke ou ajoute .fadeak .showklas yo.

Ou ka wè sa a an aksyon ak yon Demo ap viv:

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

Konpòtman JavaScript

Deklanche

Pèmèt ranvwa yon alèt via JavaScript:

$('.alert').alert()

Oswa ak dataatribi sou yon bouton nan alèt la , jan sa montre pi wo a:

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

Remake byen ke fèmen yon alèt pral retire li nan DOM la.

Metòd

Metòd Deskripsyon
$().alert() Fè yon alèt koute pou evènman klike sou eleman desandan ki gen data-dismiss="alert"atribi a. (Pa nesesè lè w ap itilize oto-inisyalizasyon done-api a.)
$().alert('close') Fèmen yon alèt lè w retire li nan DOM la. Si klas yo .fadeak .showyo prezan sou eleman an, alèt la ap disparèt anvan li retire li.
$().alert('dispose') Detwi alèt yon eleman. 
$(".alert").alert('close')

Evènman

Plugin alèt Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite alèt.

Evènman Deskripsyon
close.bs.alert Evènman sa a dife imedyatman lè yo closerele metòd egzanp lan.
closed.bs.alert Evènman sa a revoke lè alèt la fèmen (ap tann tranzisyon CSS yo fini). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})