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

هشدارها

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

مثال ها

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

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

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

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    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 Icons برای ایجاد هشدار با آیکون ها استفاده کنید. بسته به نمادها و محتوای خود، ممکن است بخواهید برنامه های کاربردی یا سبک های سفارشی بیشتری اضافه کنید.

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

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

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

رد کردن

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

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

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

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

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

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return 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 حذف می کند.

مواد و روش ها

روش شرح
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()

مناسبت ها

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

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