تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

نمایش پیام های واکنشگرا

 

خطر!

رنگ قرمز نمایش دهنده خطر و موقعیت منفی است

×

هشدار!

 زرد و نارنجی معمولا نشان دهنده موضوعی حائز اهمیت  هستند.

×

موفقیت!

رنگ سبز نمایش دهنده مورد موفقیت آمیز و مثبت است.

×

اطلاع رسانی!

آبی نمایش دهنده تغییر یا عمل اطلاع رسانی طبیعی است.


نمایش هشدارها

کلاس  w3-panel برای نمایش هشدارها بسیار مناسب است.

هشدارها اغلب با یک رنگ پررنگ نمایش داده میشود:

مثال

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 
خودتان امتحان کنيد »

کلاس w3-container میتواند همچنین برای نمایش هشدارها استفاده شود:

مثال

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 
خودتان امتحان کنيد »

هشدارها در رنگ های مختلف

هشدارها اغلب با یک رنگ پررنگ نمایش داده می شوند،اما هر رنگی میتواند استفاده شود:

خطر!

اینجا  w3-pale-red استفاده میشود.

w3-pink

Warning!

اینجا  w3-pale-yellow استفاده میشود.

w3-orange

موفقیت!

اینجا  w3-pale-green استفاده میشود..

w3-blue-grey


هشدار های بسته شونده

برای ایجاد X  که هشدار را می بندد یک <span>  با کلاس w3-closebtn و یک رویداد onclick ایجادمیکنیم:

مثال

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
خودتان امتحان کنيد »

نکته : ماهیت   &times درHTML آیکون مناسب تری نسبت به کلمه X  به عنوان دکمه بستن است.


هشدار های با لبه های گرد

اگر بخواهید از لبه های گرد داشته باشید،از کلاس هایw3-round استفاده کنید:

موفقیت!

اینجا از کلاس w3-round استفاده شده است.

موفقیت!

اینجا از کلاس w3-round-large استفاده شده است.

موفقیت!

اینجا از کلاس w3-round-xxlarge استفاده شده است.

مثال

<div class="w3-panel w3-green w3-round">
خودتان امتحان کنيد »

هشدار و کارت

اگر میخواهید هشدار به صورت یک کارت نمایش داده شود از کلاس w3-card استفاده کنید :

هشدار!

رنگ زرد نشان دهنده موردی حائز اهمیت است.

مثال

<div class="w3-panel w3-yellow w3-card-8">
خودتان امتحان کنيد »