דלג לתוכן הראשי דלג לניווט במסמכים
in English

התראות

ספק הודעות משוב קונטקסטואלי עבור פעולות משתמש טיפוסיות עם קומץ הודעות ההתראה הזמינות והגמישות.

דוגמאות

התראות זמינות עבור כל אורך טקסט, כמו גם לחצן סגירה אופציונלי. לעיצוב נכון, השתמש באחת משמונה המחלקות ההקשריות הנדרשות.alert-success (למשל, ). לביטול מוטבע, השתמש בתוסף JavaScript של התראות .

<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>
העברת משמעות לטכנולוגיות מסייעות

שימוש בצבע להוספת משמעות מספק רק אינדיקציה ויזואלית, שלא תועבר למשתמשים בטכנולוגיות מסייעות - כמו קוראי מסך. ודא שהמידע המסומן בצבע ברור מהתוכן עצמו (למשל הטקסט הגלוי), או כלול באמצעים חלופיים, כגון טקסט נוסף מוסתר .visually-hiddenבכיתה.

השתמש .alert-linkבמחלקת השירות כדי לספק במהירות קישורים צבעוניים תואמים בכל התראה.

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

תוכן נוסף

התראות יכולות להכיל גם רכיבי 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>

אייקונים

באופן דומה, אתה יכול להשתמש בכלי עזר flexbox ובאייקוני Bootstrap כדי ליצור התראות עם סמלים. בהתאם לסמלים ולתוכן שלך, ייתכן שתרצה להוסיף עוד כלי עזר או סגנונות מותאמים אישית.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

צריך יותר מסמל אחד להתראות שלך? שקול להשתמש בעוד אייקוני Bootstrap וליצור ספרייט SVG מקומי כמו כך כדי להתייחס בקלות לאותם סמלים שוב ושוב.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

מבטל

באמצעות תוסף התראה JavaScript, ניתן לבטל כל התראה מוטבעת. כך:

  • ודא שטענת את תוסף ההתראה, או את ה-Bootstrap JavaScript המהודר.
  • הוסף כפתור סגירה ואת .alert-dismissibleהכיתה, שמוסיף ריפוד נוסף מימין להתראה וממקם את כפתור הסגירה.
  • בלחצן הסגירה, הוסף את data-bs-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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
כאשר התראה נמחקת, האלמנט מוסר לחלוטין ממבנה העמוד. אם משתמש במקלדת מבטל את ההתראה באמצעות כפתור הסגירה, המיקוד שלו יאבד לפתע ובהתאם לדפדפן, יתאפס לתחילת העמוד/המסמך. מסיבה זו, אנו ממליצים לכלול JavaScript נוסף שמאזין closed.bs.alertלאירוע ומגדיר באופן פרוגרמטי focus()את המיקום המתאים ביותר בדף. אם אתה מתכנן להעביר את המיקוד לאלמנט לא אינטראקטיבי שבדרך כלל אינו מקבל מיקוד, הקפד להוסיף tabindex="-1"לאלמנט.

סאס

משתנים

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

וריאנט מיקסין

משמש בשילוב עם $theme-colorsכדי ליצור מחלקות שינוי הקשרים להתראות שלנו.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

לוּלָאָה

לולאה שיוצרת את מחלקות השינוי עם alert-variant()המיקסין.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

התנהגות JavaScript

טריגרים

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

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

או עם dataתכונות על כפתור בתוך ההתראה , כפי שהודגם למעלה:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

שימו לב שסגירת התראה תסיר אותה מה-DOM.

שיטות

אתה יכול ליצור מופע התראה עם בנאי ההתראה, לדוגמה:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

זה גורם להתראה להאזין לאירועי קליק על רכיבים צאצאים שיש להם את data-bs-dismiss="alert"התכונה. (לא הכרחי בעת שימוש באתחול האוטומטי של הנתונים-API.)

שיטה תיאור
close סוגר התראה על ידי הסרתה מה-DOM. אם המחלקות .fadeוהן .showקיימות באלמנט, ההתראה תדעך לפני שהיא תוסר.
dispose הורס התראה של אלמנט. (מסיר נתונים מאוחסנים ברכיב ה-DOM)
getInstance שיטה סטטית המאפשרת לך לקבל את מופע ההתראה המשויך לרכיב DOM, אתה יכול להשתמש בה כך:bootstrap.Alert.getInstance(alert)
getOrCreateInstance שיטה סטטית המחזירה מופע התראה המשויך לרכיב DOM או יצירת מופע חדש למקרה שהוא לא אותחל. אתה יכול להשתמש בו כך:bootstrap.Alert.getOrCreateInstance(element)
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

אירועים

תוסף ההתראה של Bootstrap חושף כמה אירועים לחיבור לפונקציונליות ההתראה.

מִקרֶה תיאור
close.bs.alert נורה מיד כאשר closeשיטת המופע נקראת.
closed.bs.alert נורה כאשר ההתראה נסגרה והסתיימו מעברי CSS.
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})