هشدارها (Alerts)
هشدار (Alert) یعنی جعبه پیام رنگی برای جلب توجه. با آن پیام های مهم را واضح نشان می دهیم. در پروژه مدرسه هم مثل کارت اخطار عمل می کند.
ساخت هشدار پایه
برای هشدار پایه از کلاس .alert همراه یک رنگ زمینه استفاده کن. «کلاس (Class)» یعنی نامی برای استایل های آماده.
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
لینک داخل هشدار
برای هماهنگی رنگ لینک، کلاس .alert-link را به لینک بده. بنابراین لینک هم رنگ هشدار می شود.
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
بستن هشدارها
برای بستن، به ظرف هشدار .alert-dismissible بده. سپس دکمه بستن با .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>Success!</strong> This alert box could indicate a positive action.
</div>
افکت محوشدن
برای محوشدن نرم، کلاس های .fade و .show را اضافه کن. «افکت فِید (Fade)» یعنی ظاهر و ناپدیدشدن تدریجی.
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Warning!</strong> Please check your input.
</div>
نکته: برای دسترس پذیری، متن هشدار را واضح بنویس. همچنین کنتراست رنگ را بررسی کن.
ادامه مرتبط: جمبوترون (Jumbotron) برای اعلان های بزرگ؛ و دکمه ها (Buttons) برای اکشن ها کنار هشدار.
جمع بندی سریع
.alertبا رنگ های مختلف استفاده کن..alert-linkلینک هم رنگ می دهد..alert-dismissibleو.btn-closeبرای بستن است..fadeو.showافکت محوشدن می دهند.