Source

Alarmet

Siguroni mesazhe reagimi kontekstual për veprimet tipike të përdoruesit me një numër të vogël mesazhesh alarmi të disponueshme dhe fleksibël.

Shembuj

Sinjalizimet janë të disponueshme për çdo gjatësi të tekstit, si dhe një buton opsional për shkarkim. Për stilimin e duhur, përdorni një nga tetë klasat e kërkuara kontekstuale (p.sh., .alert-success). Për shkarkimin në linjë, përdorni shtesën e alarmeve 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>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Përdorni .alert-linkklasën e shërbimeve për të siguruar shpejt lidhjet me ngjyra që përputhen brenda çdo sinjalizimi.

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

Përmbajtje shtesë

Alarmet mund të përmbajnë gjithashtu elementë shtesë HTML si tituj, paragrafë dhe ndarës.

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

Duke hedhur poshtë

Duke përdorur shtojcën JavaScript të alarmit, është e mundur të anuloni çdo sinjalizim në linjë. Ja se si:

  • Sigurohuni që të keni ngarkuar shtojcën e alarmit ose JavaScript të përpiluar Bootstrap.
  • Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js . Versioni i përpiluar e përfshin këtë.
  • Shto një buton heqjeje dhe .alert-dismissibleklasën, e cila shton mbushje shtesë në të djathtë të sinjalizimit dhe pozicionon .closebutonin.
  • Në butonin e heqjes, shtoni data-dismiss="alert"atributin, i cili aktivizon funksionalitetin JavaScript. Sigurohuni që të përdorni <button>elementin me të për sjelljen e duhur në të gjitha pajisjet.
  • Për të animuar sinjalizimet kur i hiqni ato, sigurohuni që të shtoni klasat .fadedhe ..show

Ju mund ta shihni këtë në veprim me një demonstrim të drejtpërdrejtë:

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

Sjellja JavaScript

Shkaqet

Aktivizo heqjen e një sinjalizimi nëpërmjet JavaScript:

$('.alert').alert()

Ose me dataatributet në një buton brenda alarmit , siç tregohet më sipër:

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

Vini re se mbyllja e një sinjalizimi do ta heqë atë nga DOM.

Metodat

Metoda Përshkrim
$().alert() Bën një alarm të dëgjojë për ngjarjet e klikimeve në elementët pasardhës që kanë data-dismiss="alert"atributin. (Nuk është e nevojshme kur përdorni inicializimin automatik të data-api.)
$().alert('close') Mbyll një alarm duke e hequr atë nga DOM. Nëse klasat .fadedhe .showjanë të pranishme në element, sinjalizimi do të shuhet përpara se të hiqet.
$().alert('dispose') Shkatërron alarmin e një elementi. 
$(".alert").alert('close')

Ngjarjet

Shtojca e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

Ngjarje Përshkrim
close.bs.alert Kjo ngjarje ndizet menjëherë kur closethirret metoda e shembullit.
closed.bs.alert Kjo ngjarje aktivizohet kur sinjalizimi është mbyllur (do të presë që kalimet CSS të përfundojnë). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})