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

התראות

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

בעמוד זה

דוגמאות

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

html 
<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בכיתה.

דוגמה חיה

לחץ על הלחצן למטה כדי להציג התראה (מוסתרת עם סגנונות מוטבעים כדי להתחיל), ולאחר מכן בטל (והרוס) אותה באמצעות כפתור הסגירה המובנה.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

אנו משתמשים ב-JavaScript הבא כדי להפעיל את הדגמת ההתראה החיה שלנו:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

html 
<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 נוספים כמו כותרות, פסקאות ומפרידים.

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 כדי ליצור התראות עם סמלים. בהתאם לסמלים ולתוכן שלך, ייתכן שתרצה להוסיף עוד כלי עזר או סגנונות מותאמים אישית.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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 מקומי כמו כך כדי להתייחס בקלות לאותם סמלים שוב ושוב.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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

אתה יכול לראות את זה בפעולה עם הדגמה חיה:

html 
<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"לאלמנט.

CSS

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, ההתראות משתמשות כעת במשתני CSS מקומיים .alertלהתאמה אישית משופרת בזמן אמת. הערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

משתנים Sass

$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) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .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

לְאַתחֵל

אתחול אלמנטים כהתראות

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

למטרה היחידה של ביטול התראה, אין צורך לאתחל את הרכיב באופן ידני דרך ה-API של JS. על ידי שימוש ב- data-bs-dismiss="alert", הרכיב יאותחל באופן אוטומטי וייסגר כהלכה.

עיין בסעיף הטריגרים לפרטים נוספים.

טריגרים

ניתן להשיג הדחה באמצעות dataהתכונה בלחצן בתוך ההתראה כפי שמוצג להלן:

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

או על כפתור מחוץ להתראה באמצעות הלחצן data-bs-targetכפי שמוצג להלן:

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

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

שיטות

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

const 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).

שימוש בסיסי:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

אירועים

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

מִקרֶה תיאור
close.bs.alert נורה מיד כאשר closeשיטת המופע נקראת.
closed.bs.alert נורה כאשר ההתראה נסגרה והסתיימו מעברי CSS. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})