Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

التنبيهات (Alerts)

قدم رسائل تعليقات سياقية لإجراءات المستخدم النموذجية من خلال مجموعة من رسائل التنبيه المتاحة والمرنة.

في هذه الصفحة

أمثلة

التنبيهات متاحة لأي طول من النصوص، بالإضافة إلى زر إغلاق اختياري. للتنسيق الصحيح، استخدم واحدة من الفئات السياقية الثمانية المطلوبة (على سبيل المثال .alert-success). للإغلاق المباشر، استخدم إضافة JavaScript الخاصة بالتنبيهات.

تنبيه! بدءاً من الإصدار v5.3.0، أصبح مزيج Sass المسمى alert-variant() مستبعداً. الآن يتم تجاوز متغيرات CSS الخاصة بمتغيرات التنبيه في حلقة Sass.

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>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

مثال مباشر

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

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

نحن نستخدم الـ JavaScript التالي لتشغيل عرض التنبيه المباشر:

site/src/assets/partials/snippets.js 
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (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', () => {
    appendAlert('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">مثال توضيحي!</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 Icons لإنشاء تنبيهات تحتوي على أيقونات. اعتماداً على الأيقونات والمحتوى الخاص بك، قد ترغب في إضافة المزيد من الأدوات المساعدة أو الأنماط المخصصة.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi 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 Icons وإنشاء SVG sprite محلي كما هو موضح أدناه للإشارة إلى نفس الأيقونات بشكل متكرر بسهولة.

html 
<svg xmlns="http://www.w3.org/2000/svg" class="d-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>

الإغلاق (Dismissing)

باستخدام إضافة الـ JavaScript الخاصة بالتنبيهات، من الممكن إغلاق أي تنبيه بشكل مباشر. إليك كيفية القيام بذلك:

  • تأكد من تحميل إضافة التنبيهات، أو ملف الـ JavaScript المجمّع الخاص بـ Bootstrap.
  • أضف زر إغلاق والفئة .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>

عند إغلاق التنبيه، يتم إزالة العنصر تماماً من بنية الصفحة. إذا قام مستخدم لوحة المفاتيح بإغلاق التنبيه باستخدام زر الإغلاق، فسيُفقد التركيز (focus) فجأة، وبناءً على المتصفح، سيعود إلى بداية الصفحة/المستند. لهذا السبب، نوصي بتضمين JavaScript إضافي يستمع إلى الحدث closed.bs.alert ويقوم برمجياً بتعيين focus() إلى الموقع الأكثر ملاءمة في الصفحة. إذا كنت تخطط لنقل التركيز إلى عنصر غير تفاعلي لا يتلقى التركيز عادةً، فتأكد من إضافة tabindex="-1" إلى العنصر.

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap، تستخدم التنبيهات الآن متغيرات CSS محلية على .alert لتعزيز التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass، لذا لا يزال تخصيص Sass مدعوماً أيضاً.

scss/_alert.scss 
--#{$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};
--#{$prefix}alert-link-color: inherit;

متغيرات الـ (Sass)

scss/_variables.scss 
$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           var(--#{$prefix}border-radius);
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            var(--#{$prefix}border-width);
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

دمج/مزج الـ (Sass mixins)

v5.3.0 مستبعد في الإصدار
scss/mixins/_alert.scss 
@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

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

  .alert-link {
    color: var(--#{$prefix}alert-link-color);
  }
}

حلقات الـ (Sass loops)

حلقة تقوم بتوليد الفئات المعدلة مع تجاوز متغيرات CSS.

scss/_alert.scss 
// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

سلوك الـ (JavaScript behavior)

تهيئة

قم بتهيئة العناصر كتنبيهات

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

لغرض إغلاق تنبيه فقط، ليس من الضروري تهيئة المكون يدوياً عبر الـ JS API. من خلال استخدام data-bs-dismiss="alert"، سيتم تهيئة المكون تلقائياً وإغلاقه بشكل صحيح.

راجع قسم المشغلات لمزيد من التفاصيل.

القداحات/المشغلات (Triggers)

يمكن تحقيق الإغلاق باستخدام سمة data-bs-dismiss على زر داخل الـ alert كما هو موضح أدناه: 

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

أو على زر خارج الـ alert باستخدام data-bs-target الإضافية كما هو موضح أدناه: 

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

لاحظ أن إغلاق التنبيه سيؤدي إلى إزالته من DOM.

الطرق، الأساليب (Methods)

يمكنك إنشاء مثيل تنبيه باستخدام منشئ التنبيه (alert constructor)، على سبيل المثال:

const bsAlert = new bootstrap.Alert('#myAlert')

هذا يجعل التنبيه يستمع إلى أحداث النقر على العناصر المتفرعة التي تحتوي على السمة data-bs-dismiss="alert". (غير ضروري عند استخدام التهيئة التلقائية لـ data-api.)

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

الاستخدام الأساسي:

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

الأحداث (Events)

توفر إضافة التنبيهات في 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()
})