پیشنهاد دوره:

هشدار Bootstrap 5

هشدار

Bootstrap 5 روش ساده‌ای برای ایجاد پیام‌های هشدار پیش‌تعریف شده ارائه می‌دهد:

  • جعبه‌های هشدار با استفاده از کلاس .alert ایجاد می‌شوند و پس از آن یکی از کلاس‌های محتوایی اضافه می‌شوند:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

مثال

<div class="alert alert-success">
  <strong>موفقیت!</strong> این جعبه هشدار نشان‌دهنده یک عمل موفق یا مثبت است.
</div>

خودتان امتحان کنید

.alert-dark

لینک هشدار .alert-link کلاس به هر لینک در جعبه هشدار اضافه شود تا یک "لینک رنگی هماهنگ" ایجاد شود:

مثال

<div class="alert alert-success">
  <strong>موفقیت!</strong> شما باید<a href="#" class="alert-link">این پیام را بخوانید</a>.
</div>

خودتان امتحان کنید

بستن هشدار

برای بستن پیام هشدار، .alert-dismissible کلاس به مخزن هشدار اضافه شود. سپس class="btn-close" و data-bs-dismiss="alert" افزودن به لینک یا عنصر دکمه (وقتی روی آن کلیک می‌کنید، جعبه هشدار از بین می‌رود).

مثال

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>موفقیت!</strong> این جعبه هشدار نشان‌دهنده یک عمل موفق یا مثبت است.
</div>

خودتان امتحان کنید

آنی‌میشن‌های جعبه هشدار

.fade و .show کلاس‌ها برای افزودن اثر فades in/fade out به هنگام بستن پیام‌های هشدار اضافه می‌شوند:

مثال

<div class="alert alert-danger alert-dismissible fade show">

خودتان امتحان کنید