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>

מבטל

באמצעות תוסף ההתראה 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">&times;</span>
  </button>
</div>

התנהגות JavaScript

טריגרים

אפשר ביטול של התראה באמצעות JavaScript:

$('.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"התכונה. (לא הכרחי בעת שימוש באתחול האוטומטי של הנתונים-API.)
$().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…
})