Source

אַלערץ

צושטעלן קאָנטעקסטואַל באַמערקונגען אַרטיקלען פֿאַר טיפּיש באַניצער אַקשאַנז מיט אַ האַנדפול פון בנימצא און פלעקסאַבאַל פלינק אַרטיקלען.

ביישפילן

אַלערץ זענען בנימצא פֿאַר קיין לענג פון טעקסט, ווי געזונט ווי אַ אַפּשאַנאַל אָפּזאָגן קנעפּל. פֿאַר געהעריק סטילינג, נוצן איינער פון די אַכט פארלאנגט קאָנטעקסטואַל קלאסן (למשל, .alert-success). פֿאַר ינלינע דיסמיסאַל, נוצן די אַלערץ 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>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .sr-onlyקלאַס.

ניצן די .alert-linkנוצן קלאַס צו געשווינד צושטעלן וואָס ריכטן בונט לינקס אין קיין פלינק.

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

נאָך אינהאַלט

אַלערץ קענען אויך אַנטהאַלטן נאָך HTML עלעמענטן ווי כעדינגז, פּאַראַגראַפס און דיווידערס.

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

דיסמיסינג

ניצן די פלינק דזשאַוואַסקריפּט פּלוגין, עס איז מעגלעך צו אָפּזאָגן קיין פלינק ינלינע. ווי אזוי:

  • זייט זיכער אַז איר האָט לאָודיד די פלינק פּלוגין אָדער די קאַמפּיילד Bootstrap דזשאַוואַסקריפּט.
  • אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js . די קאַמפּיילד ווערסיע כולל דעם.
  • לייג אַ אָפּזאָגן קנעפּל און די .alert-dismissibleקלאַס, וואָס מוסיף עקסטרע וואַטן צו די רעכט פון די פלינק און שטעלעס דעם .closeקנעפּל.
  • אויף די אָפּזאָגן קנעפּל, לייגן די data-dismiss="alert"אַטריביוט, וואָס טריגערז די דזשאַוואַסקריפּט פאַנגקשאַנאַליטי. זייט זיכער צו נוצן דעם <button>עלעמענט מיט אים פֿאַר געהעריק נאַטור אויף אַלע דעוויסעס.
  • צו ופלעבן אַלערץ ווען דיסמיסט זיי, זיין זיכער צו לייגן די .fadeאון .showקלאסן.

איר קענען זען דעם אין קאַמף מיט אַ לעבן דעמאָ:

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

דזשאַוואַסקריפּט נאַטור

טריגערס

געבן דיסמיסאַל פון אַ פלינק דורך דזשאַוואַסקריפּט:

$('.alert').alert()

אָדער מיט dataאַטריביוץ אויף אַ קנעפּל אין די פלינק , ווי דעמאַנסטרייטיד אויבן:

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

באַמערקונג אַז קלאָוזינג אַ פלינק וועט באַזייַטיקן עס פון די DOM.

מעטהאָדס

מעטאָד באַשרייַבונג
$().alert() מאכט אַ פלינק צו הערן פֿאַר קליק געשעענישן אויף אָפּשטאַמלינג עלעמענטן וואָס האָבן די data-dismiss="alert"אַטריביוט. (ניט נייטיק ווען ניצן די דאַטן-אַפּי ס אַוטאָ-ינטאַליאַזיישאַן.)
$().alert('close') קלאָוזיז אַ פלינק דורך רימוווינג עס פון די DOM. אויב די .fadeאון .showקלאסן זענען פאָרשטעלן אויף דעם עלעמענט, די פלינק וועט וועלקן אויס איידער עס איז אַוועקגענומען.
$().alert('dispose') דיסטרויז אַן עלעמענט ס פלינק.
$(".alert").alert('close')

געשעענישן

Bootstrap ס פלינק פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.

געשעעניש באַשרייַבונג
close.bs.alert דער געשעעניש פירט גלייך ווען דער closeבייַשפּיל אופֿן איז גערופן.
closed.bs.alert דער געשעעניש איז פייערד ווען די פלינק איז פארמאכט (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})