התראות
ספק הודעות משוב קונטקסטואלי עבור פעולות משתמש טיפוסיות עם קומץ הודעות ההתראה הזמינות והגמישות.
התראות זמינות עבור כל אורך טקסט, כמו גם לחצן סגור אופציונלי. לעיצוב נכון, השתמש באחת משמונה המחלקות ההקשריות הנדרשות.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>
באמצעות תוסף ההתראה JavaScript, ניתן לבטל כל התראה מוטבעת. כך:
- ודא שטענת את תוסף ההתראה, או את ה-Bootstrap JavaScript המהודר.
- אם אתה בונה את JavaScript שלנו מהמקור, זה דורש
util.js
. הגרסה המהודרת כוללת את זה. - הוסף כפתור ביטול ואת
.alert-dismissible
הכיתה, שמוסיף ריפוד נוסף מימין להתראה וממקם את.close
הכפתור. - בלחצן הביטול, הוסף את
data-dismiss="alert"
התכונה, אשר מפעילה את פונקציונליות ה-JavaScript. הקפד להשתמש<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>
אפשר ביטול של התראה באמצעות JavaScript:
או עם data
תכונות על כפתור בתוך ההתראה , כפי שהודגם למעלה:
שימו לב שסגירת התראה תסיר אותה מה-DOM.
שיטה | תיאור |
---|---|
$().alert() |
גורם להתראה להאזין לאירועי קליק על רכיבים צאצאים שיש להם את data-dismiss="alert" התכונה. (לא הכרחי בעת שימוש באתחול האוטומטי של הנתונים-API.) |
$().alert('close') |
סוגר התראה על ידי הסרתה מה-DOM. אם המחלקות .fade והן .show קיימות באלמנט, ההתראה תדעך לפני שהיא תוסר. |
$().alert('dispose') |
הורס התראה של אלמנט. |
תוסף ההתראה של Bootstrap חושף כמה אירועים לחיבור לפונקציונליות ההתראה.
מִקרֶה | תיאור |
---|---|
close.bs.alert |
אירוע זה מופעל מיד כאשר close שיטת המופע נקראת. |
closed.bs.alert |
אירוע זה מופעל כאשר ההתראה נסגרה (יחכה לסיום מעברי CSS). |