تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
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الفصل.

مثال حي

انقر فوق الزر أدناه لإظهار تنبيه (مخفي باستخدام أنماط مضمنة للبدء) ، ثم قم برفضه (وإتلافه) باستخدام زر الإغلاق المدمج.

لغة البرمجة 
<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فئة الأداة المساعدة لتوفير روابط ملونة مطابقة بسرعة داخل أي تنبيه.

لغة البرمجة 
<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" 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" 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

يمكنك رؤية هذا في العمل من خلال عرض توضيحي مباشر:

لغة البرمجة 
<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};

متغيرات ساس

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

لغرض وحيد هو رفض تنبيه ، ليس من الضروري تهيئة المكون يدويًا عبر JS API. من خلال الاستفادة من 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"السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ data-api.)

طريقة وصف
close يغلق تنبيهًا بإزالته من DOM. في حالة وجود الفئات .fadeو .showعلى العنصر ، سيتلاشى التنبيه قبل إزالته.
dispose يدمر تنبيه عنصر. (يزيل البيانات المخزنة على عنصر DOM)
getInstance الأسلوب الثابت الذي يسمح لك بالحصول على مثيل التنبيه المرتبط بعنصر DOM. على سبيل المثال bootstrap.Alert.getInstance(alert):.
getOrCreateInstance طريقة Static تُرجع مثيل تنبيه مرتبط بعنصر 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()
})