Source

Twissijiet

Ipprovdi messaġġi ta' feedback kuntestwali għal azzjonijiet tipiċi tal-utent b'numru żgħir ta' messaġġi ta' twissija disponibbli u flessibbli.

Eżempji

L-allerti huma disponibbli għal kwalunkwe tul ta' test, kif ukoll buttuna mhux obbligatorja għat-tkeċċija. Għal stil xieraq, uża waħda mit-tmien klassijiet kuntestwali meħtieġa.alert-success (eż, ). Għat-tkeċċija inline, uża t- twissijiet 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>
Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Uża l .alert-link-klassi ta 'utilità biex tipprovdi malajr links ikkuluriti li jaqblu fi kwalunkwe twissija.

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

Kontenut addizzjonali

It-twissijiet jista' jkun fihom ukoll elementi HTML addizzjonali bħal intestaturi, paragrafi u dividers.

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

Tkeċċija

Bl-użu tal-plugin JavaScript ta' twissija, huwa possibbli li titwarrab kwalunkwe twissija inline. Ara kif:

  • Kun żgur li għabbejt il-plugin tat-twissija, jew il-Bootstrap JavaScript miġbur.
  • Jekk qed tibni JavaScript tagħna mis-sors, teħtieġutil.js . Il-verżjoni miġbura tinkludi dan.
  • Żid buttuna tkeċċi u l- .alert-dismissibleklassi, li żżid padding żejjed fuq il-lemin tat-twissija u tpoġġi l- .closebuttuna.
  • Fuq il-buttuna tkeċċi, żid l- data-dismiss="alert"attribut, li jqajjem il-funzjonalità JavaScript. Kun żgur li tuża l- <button>element miegħu għal imġieba xierqa fl-apparati kollha.
  • Biex tanima twissijiet meta twarrabhom, kun żgur li żżid il- klassijiet .fadeu ..show

Tista' tara dan fl-azzjoni b'demo live:

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

Imġieba JavaScript

Triggers

Ippermetti t-tkeċċija ta' twissija permezz ta' JavaScript:

$('.alert').alert()

Jew datab'attributi fuq buttuna fi ħdan it-twissija , kif muri hawn fuq:

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

Innota li meta tagħlaq twissija tneħħiha mid-DOM.

Metodi

Metodu Deskrizzjoni
$().alert() Jagħmel twissija tisma 'għal avvenimenti ikklikkja fuq elementi dixxendenti li għandhom l- data-dismiss="alert"attribut. (Mhux meħtieġ meta tuża l-awto-inizjalizzazzjoni tad-data-api.)
$().alert('close') Jagħlaq twissija billi tneħħiha mid-DOM. Jekk il- klassijiet .fadeu .showhuma preżenti fuq l-element, it-twissija tisparixxi qabel ma titneħħa.
$().alert('dispose') Jeqred twissija ta' element. 
$(".alert").alert('close')

Avvenimenti

Il-plugin ta' twissija ta' Bootstrap jesponi ftit avvenimenti biex wieħed iqabbad mal-funzjonalità ta' twissija.

Avveniment Deskrizzjoni
close.bs.alert Dan l-avveniment jispara immedjatament meta closejissejjaħ il-metodu tal-istanza.
closed.bs.alert Dan l-avveniment jiġi sparat meta t-twissija tkun ingħalaq (se jistenna li t-tranżizzjonijiet CSS jitlestew). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})