رفتن به محتوای اصلی به پیمایش اسناد بروید
Check
in English

هشدارها

پیام های بازخورد متنی را برای اقدامات معمول کاربر با تعداد انگشت شماری از پیام های هشدار در دسترس و انعطاف پذیر ارائه دهید.

در این صفحه

مثال ها

هشدارها برای هر طول متن و همچنین یک دکمه بسته اختیاری در دسترس هستند. برای استایل مناسب، از یکی از هشت کلاس متنی مورد نیاز.alert-success (به عنوان مثال، استفاده کنید). برای اخراج درون خطی، از افزونه جاوا اسکریپت هشدارها استفاده کنید .

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>

ما از جاوا اسکریپت زیر برای راه اندازی دمو هشدار زنده خود استفاده می کنیم:

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 Icons برای ایجاد هشدار با آیکون ها استفاده کنید. بسته به نمادها و محتوای خود، ممکن است بخواهید برنامه های کاربردی یا سبک های سفارشی بیشتری اضافه کنید.

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>

به بیش از یک نماد برای هشدارهای خود نیاز دارید؟ استفاده از آیکون های بوت استرپ بیشتری را در نظر بگیرید و یک SVG sprite محلی مانند آن بسازید تا به راحتی به همان نمادها به طور مکرر ارجاع دهید.

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>

رد کردن

با استفاده از پلاگین جاوا اسکریپت هشدار، می‌توان هرگونه هشدار درون خطی را رد کرد. در اینجا به این صورت است:

  • مطمئن شوید که افزونه هشدار یا جاوا اسکریپت بوت استرپ کامپایل شده را بارگذاری کرده اید.
  • یک دکمه بستن و .alert-dismissibleکلاس اضافه کنید، که بالشتک اضافی را به سمت راست هشدار اضافه می کند و دکمه بستن را در موقعیت مکانی قرار می دهد.
  • در دکمه بستن، data-bs-dismiss="alert"ویژگی را اضافه کنید که عملکرد جاوا اسکریپت را فعال می کند. حتماً از <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>
هنگامی که یک هشدار رد می شود، عنصر به طور کامل از ساختار صفحه حذف می شود. اگر کاربر صفحه کلید با استفاده از دکمه بستن هشدار را رد کند، فوکوس او ناگهان از بین می رود و بسته به مرورگر، به ابتدای صفحه/سند بازنشانی می شود. به همین دلیل، توصیه می کنیم جاوا اسکریپت اضافی را اضافه کنید که به 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%);
  }
}

حلقه Sass

حلقه ای که کلاس های اصلاح کننده را با alert-variant()mixin تولید می کند.

// 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);
  }
}

رفتار جاوا اسکریپت

مقدار دهی اولیه کنید

عناصر را به عنوان هشدار راه اندازی کنید

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 روش ایستا که یک نمونه هشدار مرتبط با یک عنصر DOM را برمی گرداند یا در صورتی که اولیه نشده بود، یک نمونه جدید ایجاد می کند. می توانید از آن به این صورت استفاده کنید: bootstrap.Alert.getOrCreateInstance(element).

استفاده اولیه:

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

مناسبت ها

پلاگین هشدار بوت استرپ چند رویداد را برای اتصال به عملکرد هشدار افشا می کند.

رویداد شرح
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()
})