Source

Alertak

Eman erabiltzailearen ohiko ekintzetarako testuinguruko iritzi-mezuak alerta-mezu erabilgarri eta malgu gutxi batzuekin.

Adibideak

Alertak eskuragarri daude edozein testu luzerako, baita aukerako baztertzeko botoia ere. Estilo egokia lortzeko, erabili behar diren zortzi testuinguru-klaseetako bat (adibidez, .alert-success). Lineako kaleratzea egiteko, erabili alertak jQuery plugina .

<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>
Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .sr-onlyklasearekin ezkutatuta dagoen testu gehigarria.

Erabili .alert-linkerabilgarritasun-klasea edozein alertaren barruan bat datozen koloretako estekak azkar emateko.

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

Eduki gehigarriak

Alertak HTML elementu osagarriak ere izan ditzakete, hala nola goiburuak, paragrafoak eta zatitzaileak.

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

Baztertuz

Alerta JavaScript plugina erabiliz, posible da edozein alerta linean baztertzea. Hona hemen nola:

  • Ziurtatu alerta-plugin-a edo konpilatutako Bootstrap JavaScript kargatu duzula.
  • Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da . Konpilatutako bertsioak hau barne hartzen du.
  • Gehitu baztertzeko botoia eta .alert-dismissibleklasea, alertaren eskuinaldean betegarri gehigarria gehitzen duena eta .closebotoia kokatzeko.
  • Baztertu botoian, gehitu data-dismiss="alert"atributua, eta horrek JavaScript funtzionaltasuna abiarazten du. Ziurtatu <button>elementua harekin erabiltzen duzula gailu guztietan portaera egokia izateko.
  • Baztertzean alertak animatzeko, ziurtatu .fadeeta .showklaseak gehitzen dituzula.

Hau ekintzan ikus dezakezu zuzeneko demo batekin:

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

JavaScript portaera

Abiarazleak

Gaitu alerta bat baztertzeko JavaScript bidez:

$('.alert').alert()

Edo alertaren barrukodata botoi bateko atributuekin , goian erakutsi bezala:

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

Kontuan izan alerta bat ixteak DOMetik kenduko duela.

Metodoak

Metodoa Deskribapena
$().alert() data-dismiss="alert"Atributua duten ondorengo elementuetan klik-gertaerak entzuten dituen alerta bat egiten du . (Ez da beharrezkoa data-api-ren hasierako automatikoki erabiltzean.)
$().alert('close') Alerta bat ixten du DOMetik kenduta. Elementuan .fadeeta .showklaseak badaude, alerta desagertuko da kendu aurretik.
$().alert('dispose') Elementu baten alerta suntsitzen du. 
$(".alert").alert('close')

Gertaerak

Bootstrap-en alerta-pluginak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.

Gertaera Deskribapena
close.bs.alert Gertaera hau berehala abiarazten da closeinstantzia-metodoa deitzen denean.
closed.bs.alert Gertaera hau alerta itxi denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})