021-20483015

هشدار در Bootstrap ورژن 4

هشدار در bootstrap

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

×با موفقیت انجام شد! این باکس برای نمایش پیام های موفقیت آمیز بودن عملیات و یا ثبت استفاده می شود.
×اطلاعیه! این باکس برای تمایش اطلاعیه ها استفاده می شود.
×هشدار! این باکس برای نمایش هشدار استفاده می شود.
×اخطار! این باکس برای نمایش پیام های اخطار استفاده می شود.
×مهم! این باکس برای نمایش پیام های مهم استفاده می شود.
×ثانویه! این باکس برای پیام های که زیاد مهم نیستند استفاده می شود.
×تیره! پیامی با زمینه طوسی رنگ و فونت تیره.
×روشن! پیامی با زمینه طوسی کمرنگ و و فونت تیره.

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

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

هشدار در bootstrap
<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
مشاهده مثال

لینک هشدار

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

 

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.

هشدار لینک
<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
مشاهده مثال

بستن هشدارها

× Click on the "x" symbol to the right to close me.

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

نکته: &times; (×) عنصر 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>
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط