Source

fanairana

Manomeza hafatra tamberin'andraikitra amin'ny teny manodidina ho an'ny hetsika mahazatra ataon'ny mpampiasa miaraka amin'ireo hafatra fanairana azo ampiasaina sy mora azo.

OHATRA

Ny fanairana dia misy amin'ny halavan'ny lahatsoratra rehetra, ary koa ny bokotra fandroahana tsy voatery. Mba hanaovana endrika araka ny tokony ho izy dia ampiasao ny iray amin'ireo kilasy valo ilaina.alert-success amin'ny teny manodidina (oh, ). Ho an'ny fandroahana an-tserasera, ampiasao ny plugin jQuery fampandrenesana .

<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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

Ampiasao ny .alert-linkkilasin'ny utility mba hanomezana rohy miloko mifanaraka haingana ao anatin'ny fanairana rehetra.

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

Votoaty fanampiny

Ny fampandrenesana dia mety ahitana singa HTML fanampiny toy ny lohateny, fehintsoratra ary fizarana.

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

nandefa

Amin'ny alàlan'ny plugin JavaScript alert, azo atao ny manilika ny fampandrenesana rehetra. Toy izao ny fomba:

  • Ataovy azo antoka fa nampiditra ny plugin fanairana ianao, na ny JavaScript Bootstrap natambatra.
  • Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js . Ny dikan-teny natambatra dia ahitana izany.
  • Manampia bokotra fandroahana sy ny .alert-dismissiblekilasy, izay manampy padding fanampiny eo ankavanan'ny fanairana ary mametraka ny .closebokotra.
  • Ao amin'ny bokotra dismiss, ampio ny data-dismiss="alert"toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay <button>singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra.
  • Mba hanamafisana ny fanairana rehefa manilika azy ireo, ataovy azo antoka fa ampio ny .fadesy .showkilasy.

Azonao atao ny mahita an'ity hetsika ity miaraka amin'ny demo mivantana:

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

Fihetsika JavaScript

Niteraka

Alefaso ny fandroahana fanairana amin'ny alàlan'ny JavaScript:

$('.alert').alert()

Na miaraka amin'ny datatoetra eo amin'ny bokotra iray ao anatin'ny fanairana , araka ny aseho etsy ambony:

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

Mariho fa ny fanakatonana fanairana dia hanala azy amin'ny DOM.

fomba

FOMBA Description
$().alert() Manao fanairana amin'ny fihainoana hetsika kitiho amin'ny singa taranaka manana ny data-dismiss="alert"toetra. (Tsy ilaina amin'ny fampiasana ny fanombohana mandeha ho azy ny data-api.)
$().alert('close') Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fadeand .showclasses ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy.
$().alert('dispose') Manimba ny fanairana singa iray. 
$(".alert").alert('close')

zava-mitranga

Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.

Event Description
close.bs.alert Mirehitra avy hatrany ity hetsika ity rehefa closeantsoina ny fomba fiasa.
closed.bs.alert Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})