Source

Dagiti Alerto

Mangted kadagiti mensahe ti konteksto a feedback para kadagiti gagangay nga aramid ti agar-aramat nga addaan kadagiti sumagmamano a magun-od ken nalaka a maibagay a mensahe ti alerto.

Dagiti pagarigan

Dagiti alerto ket magun-od para iti ania man a kaatiddog ​​ti teksto, ken kasta met ti opsional a buton ti panangilaksid. Para iti umno nga estilo, usaren ti maysa kadagiti walo a kasapulan a klase ti konteksto (kas pagarigan, .alert-success). Para iti inline a pannakaikkat, usaren ti alerto a 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>
Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.

Usaren ti .alert-linkklase ti utilidad tapno napardas a mangipaay kadagiti agpapada a namaris a silpo iti uneg ti ania man nga alerto.

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

Kanayonan a linaon

Dagiti alerto ket mabalin pay nga aglaon kadagiti kanayonan nga elemento ti HTML a kas dagiti paulo, parapo ken dagiti mangbingbingay.

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

Panangikkat iti trabaho

Babaen ti panagusar ti plugin ti alerto a JavaScript, mabalin a mailaksid ti ania man nga alerto iti inline. Kastoy ti kasano:

  • Siguraduenyo a naikargayo ti plugin ti alerto, wenno ti naurnong a Bootstrap JavaScript.
  • No mangbangbangonka iti JavaScript-mi manipud iti gubuayan, kasapulanna tiutil.js . Ti naurnong a bersion ket mangiraman iti daytoy.
  • Manginayon iti dismiss button ken ti .alert-dismissibleklase, a mangnayon iti ekstra a padding iti kannawan ti alerto ken mangiposision iti .closebuton.
  • Iti buton ti panangilaksid, inayon ti data-dismiss="alert"attribute, a mangtignay ti panagandar ti JavaScript. Siguraduen nga usaren ti <button>elemento a kaduana para iti umno a kababalin iti ballasiw dagiti amin nga alikamen.
  • Tapno ma-animate dagiti alerto no ilaksid dagitoy, siguraduen nga inayon ti .fadeken .showdagiti klase.

Mabalinmo a makita daytoy nga agtigtignay babaen ti live demo:

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

Kababalin ti JavaScript

Dagiti mangtignay

Pagbalinen ti pannakaikkat ti maysa nga alerto babaen ti JavaScript:

$('.alert').alert()

Wenno addaan kadagiti dataattribute iti maysa a buton iti uneg ti alerto , kas naipakita iti ngato:

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

Imutektekanyo a ti panangserra iti alerto ket mangikkat iti dayta manipud iti DOM.

Dagiti Pamay-an

Wagas Panangiladawan
$().alert() Mangaramid ti maysa nga alerto a dumngeg para kadagiti pasamak ti panagpidut kadagiti kaputotan nga elemento nga addaan ti data-dismiss="alert"attribute. (Saan a kasapulan no agus-usar ti auto-initialization ti data-api.)
$().alert('close') Serraan ti maysa nga alerto babaen ti panangikkat iti dayta manipud iti DOM. No ti .fadeken .showdagiti klase ket adda iti elemento, ti alerto ket agkupas sakbay a maikkat daytoy.
$().alert('dispose') Dadaelenna ti alerto ti maysa nga elemento. 
$('.alert').alert('close')

Dagiti Pasamak

Ti plugin ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.

Pasamak Panangiladawan
close.bs.alert Daytoy a pasamak ket agputok a dagus no ti closepamay-an ti pagarigan ket maawagan.
closed.bs.alert Daytoy a pasamak ket mapaputok no ti alerto ket naiserra (urayenna dagiti panagbalbaliw ti CSS a malpas). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})