Source

هشدارها

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

مثال ها

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

<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>
انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.

از .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>

رد کردن

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

  • مطمئن شوید که افزونه هشدار یا جاوا اسکریپت بوت استرپ کامپایل شده را بارگذاری کرده اید.
  • اگر جاوا اسکریپت ما را از منبع می‌سازید، به آن نیاز داردutil.js . نسخه کامپایل شده شامل این است.
  • یک دکمه رد کردن و .alert-dismissibleکلاس اضافه کنید، که بالشتک اضافی را در سمت راست هشدار اضافه می کند و .closeدکمه را در موقعیت قرار می دهد.
  • در دکمه رد کردن، data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

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

محرک ها

رد کردن هشدار از طریق جاوا اسکریپت را فعال کنید:

$('.alert').alert()

یا با dataویژگی های روی یک دکمه در هشدار ، همانطور که در بالا نشان داده شد:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

توجه داشته باشید که بستن یک هشدار آن را از DOM حذف می کند.

مواد و روش ها

روش شرح
$().alert() هشداری را برای رویدادهای کلیک بر روی عناصر نسلی که دارای data-dismiss="alert"ویژگی هستند گوش می دهد. (در هنگام استفاده از مقداردهی اولیه خودکار data-api ضروری نیست.)
$().alert('close') یک هشدار را با حذف آن از DOM می بندد. اگر کلاس های .fadeو .showروی عنصر وجود داشته باشد، هشدار قبل از حذف محو می شود.
$().alert('dispose') هشدار یک عنصر را از بین می برد.
$(".alert").alert('close')

مناسبت ها

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

رویداد شرح
close.bs.alert این رویداد بلافاصله پس از closeفراخوانی متد نمونه فعال می شود.
closed.bs.alert این رویداد زمانی فعال می شود که هشدار بسته شده باشد (منتظر تکمیل انتقال CSS می شود).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})