نمایش پیام های واکنشگرا
خطر!
رنگ قرمز نمایش دهنده خطر و موقعیت منفی است
هشدار!
زرد و نارنجی معمولا نشان دهنده موضوعی حائز اهمیت هستند.
موفقیت!
رنگ سبز نمایش دهنده مورد موفقیت آمیز و مثبت است.
اطلاع رسانی!
آبی نمایش دهنده تغییر یا عمل اطلاع رسانی طبیعی است.
نمایش هشدارها
کلاس w3-panel برای نمایش هشدارها بسیار مناسب است.
هشدارها اغلب با یک رنگ پررنگ نمایش داده میشود:
مثال
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
کلاس w3-container میتواند همچنین برای نمایش هشدارها استفاده شود:
مثال
<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 ایجادمیکنیم:
مثال
نکته : ماهیت × درHTML آیکون مناسب تری نسبت به کلمه X به عنوان دکمه بستن است.
هشدار های با لبه های گرد
اگر بخواهید از لبه های گرد داشته باشید،از کلاس هایw3-round استفاده کنید:
موفقیت!
اینجا از کلاس w3-round استفاده شده است.
موفقیت!
اینجا از کلاس w3-round-large استفاده شده است.
موفقیت!
اینجا از کلاس w3-round-xxlarge استفاده شده است.
هشدار و کارت
اگر میخواهید هشدار به صورت یک کارت نمایش داده شود از کلاس w3-card استفاده کنید :
هشدار!
رنگ زرد نشان دهنده موردی حائز اهمیت است.
- نوشته شده توسط زهرا داوودی
- بازدید: 3535
