Source

Ba alertes

Pesa ba messages ya réaction contextuel pona ba actions typiques ya usager na loboko ya ba messages ya alerte oyo ezali pe flexible.

Bandakisa

Ba alertes ezali mpo na bolai nyonso ya makomi, mpe lisusu bouton ya koboya oyo okoki kopona. Mpo na kosala lolenge malamu, salelá moko ya bakelasi mwambe oyo esengeli.alert-success na makambo oyo ezali na kati (ndakisa, ). Mpo na bolongolami na kati ya molongo, salelá plugin ya ba alertes jQuery .

<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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .sr-onlykelasi.

Salelá .alert-linkkelasi ya utilitaire mpo na kopesa nokinoki ba liens ya langi oyo ekokani na kati ya likebisi nyonso.

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

Makambo mosusu oyo ezali na kati

Ba alertes ekoki pe kozala na ba éléments HTML ya kobakisa lokola ba têtes, ba paragraphes na ba diviseur.

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

Kobengana na mosala

Na kosalelaka plugin ya JavaScript ya alerte, ezali possible ya koboya alerte nionso na kati ya ligne. Talá ndenge oyo:

  • Sala makasi o charger plugin ya alerte, to JavaScript ya Bootstrap oyo e compilé.
  • Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js . Version oyo esangisi yango ezali na likambo yango.
  • Bakisa bouton ya kolongolama mpe .alert-dismissiblekelasi, oyo ebakisi padding ya likolo na loboko ya mobali ya alerte mpe etie .closebouton.
  • Na bouton ya koboya, bakisa data-dismiss="alert"attribut, oyo e déclencher fonctionnement ya JavaScript. Bozala sûr ya kosalela <button>élément na yango pona comportement propre na kati ya ba appareils nionso.
  • Pona ko animer ba alertes tango ozali ko rejeter yango, sala makasi obakisa ba .fadeclasses na .show.

Okoki komona yango na action na démonstration en direct:

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

Etamboli ya JavaScript

Ba déclencheur

Bofungola bolongolami ya likebisi na nzela ya JavaScript:

$('.alert').alert()

To na ba dataattributs na bouton moko na kati ya alerte , ndenge elakisami likolo:

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

Yeba ete kokanga alerte ekolongola yango na DOM.

Ba méthodes ya kosala

Metode Ndimbola
$().alert() Esalaka alerte koyoka ba événements ya clic na ba éléments descendants oyo ezali na data-dismiss="alert"attribut. (Ezali na ntina te ntango ozali kosalela auto-initialisation ya data-api.)
$().alert('close') Ekangaka alerte na kolongola yango na DOM. Soki ba classes .fadempe .showezali na élément, alerte ekosila liboso ya kolongola yango.
$().alert('dispose') Ebebisaka alerte ya élément moko. 
$(".alert").alert('close')

Makambo oyo esalemaki

Plugin ya alerte ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya alerte.

Likambo Ndimbola
close.bs.alert Evenement oyo ezo beta mbala moko tango closeméthode ya instance ebengami.
closed.bs.alert Evenement oyo ezo beta tango alerte ekangami (ekozela ba transitions ya CSS esila). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})