אַלערץ
צושטעלן קאָנטעקסטואַל באַמערקונגען אַרטיקלען פֿאַר טיפּיש באַניצער אַקשאַנז מיט אַ האַנדפול פון בנימצא און פלעקסאַבאַל פלינק אַרטיקלען.
אַלערץ זענען בנימצא פֿאַר קיין לענג פון טעקסט, ווי געזונט ווי אַ אַפּשאַנאַל אָפּזאָגן קנעפּל. פֿאַר געהעריק סטילינג, נוצן איינער פון די אַכט פארלאנגט קאָנטעקסטואַל קלאסן (למשל, .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">×</span>
</button>
</div>
געבן דיסמיסאַל פון אַ פלינק דורך דזשאַוואַסקריפּט:
אָדער מיט data
אַטריביוץ אויף אַ קנעפּל אין די פלינק , ווי דעמאַנסטרייטיד אויבן:
באַמערקונג אַז קלאָוזינג אַ פלינק וועט באַזייַטיקן עס פון די DOM.
מעטאָד | באַשרייַבונג |
---|---|
$().alert() |
מאכט אַ פלינק צו הערן פֿאַר קליק געשעענישן אויף אָפּשטאַמלינג עלעמענטן וואָס האָבן די data-dismiss="alert" אַטריביוט. (ניט נייטיק ווען ניצן די דאַטן-אַפּי ס אַוטאָ-ינטאַליאַזיישאַן.) |
$().alert('close') |
קלאָוזיז אַ פלינק דורך רימוווינג עס פון די DOM. אויב די .fade און .show קלאסן זענען פאָרשטעלן אויף דעם עלעמענט, די פלינק וועט וועלקן אויס איידער עס איז אַוועקגענומען. |
$().alert('dispose') |
דיסטרויז אַן עלעמענט ס פלינק. |
Bootstrap ס פלינק פּלוגין יקספּאָוזיז עטלעכע געשעענישן פֿאַר כוקינג אין פלינק פאַנגקשאַנאַליטי.
געשעעניש | באַשרייַבונג |
---|---|
close.bs.alert |
דער געשעעניש פירט גלייך ווען דער close בייַשפּיל אופֿן איז גערופן. |
closed.bs.alert |
דער געשעעניש איז פייערד ווען די פלינק איז פארמאכט (וועט וואַרטן פֿאַר CSS טראַנזישאַנז צו פאַרענדיקן). |