هشدار در bootstrap

بوت استرپ 4 یک راه آسان برای ایجاد پیام های هشدار از قبل تعریف می کند:

هشدارها با کلاس .alert ایجاد می شوند و به دنبال آن یکی از کلاس های متنی قرار می گیرد است

.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light یا.alert-dark

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

لینک هشدار

کلاس alert-lin را به هر پیوند درون جعبه هشدار اضافه کنید تا "لینک های رنگی مطابق با مثال" ایجاد کنید:

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

بستن هشدارها

برای بستن پیام هشدار، یک کلاس .alert-dismissable را به تگ هشدار اضافه کنید. سپس class="close" و data-dismiss="alert" را به یک پیوند یا یک عنصر دکمه اضافه کنید (وقتی روی این کلیک میکنید کادر هشدار ناپدید می شود).

نکته: × (×) عنصر HTML است که نماد مورد نظر برای دکمه های نزدیک است، به جای حرف "x" کاربرد دارد.

هشدارهای متحرک

روی نماد "x" کلیک راست کنید تا من را ببندید محو خواهد شد

کلاسهای fade و. show در هنگام بستن پیام هشدار محو می شود:

<div class="alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>