هشدارها
هشدارهای بوت استرپ ۴
بوت استرپ ۴ برای ایجاد پیامهای هشدار از پیش تعیین شده راه آسانی را فراهم کردهاست:[۱]
هشدارها به استفاده از کلاس .alert
به همراه یکی از کلاسهای متنی .alert-success
,.alert-info
,.alert-warning
,.alert-danger
,.alert-primary
, .alert-secondary
,.alert-light
یا .alert-dark
ایجاد میشوند:
مثال
1 <div class="alert alert-success">
2 <strong>Success!</strong> Indicates a successful or positive action.
3 </div>
لینک های هشدار
برای ایجاد «لینکهای همرنگ» کلاس alert-link
را به هر یک از لینکهای درون کادر هشدار اضافه کنید:
مثال
1 <div class="alert alert-success">
2 <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
3 </div>
هشدارهای بسته شونده (به انگلیسی: Closing)
بر روی دکمه “x” در سمت راست لیک کنید تا من را ببندید.
برای بستن پیام هشدار، یک کلاس .alert-dismissible
به ظرف هشدار اضافه کنید. سپس class="close"
و data-dismiss="alert"
را به یک لینک یا عنصر دکمه اضافه کنید (زمانیکه روی این کلیک کنید کادر هشدار ناپدید میشود).
مثال
1 <div class="alert alert-success alert-dismissible">
2 <button type="button" class="close" data-dismiss="alert">×</button>
3 <strong>Success!</strong> Indicates a successful or positive action.
4 </div>
نکته: × (×)
یک موجودیت HTML است که بجای حرف “x” بعنوان آیکون برای کلیدهای بستن در نظر گرفته میشود.
هشدارهای متحرک
کلاسهای .fade
و .show
نوعی حالت محو شوندگی در هنگام بسته شدن پیام هشدار به آن اضافه میکنند:
مثال
<div class="alert alert-danger alert-dismissible fade show">
مرجع کامل هشدار در بوت استرپ 4
منابع آموزشی