جلسه ۰۹ : طراحی هشدارها در Bootstrap 4

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند. در این قسمت ، ما به یکی از بخش های مهمی که در اکثر وب سایت ها استفاده می شود. اشاره خواهیم کرد. در این بخش به مبحث طراحی هشدارها در Bootstrap 4 یا طراحی باکس هشدار ، می پردازیم. هشدارها ، از بخش های مهمی و بسیار کاربردی خصوصا در  بخش هایی وب سایت ها، که ورودی از کاربران دریافت می کنند. محسوب می شود.

البته در بخش قبلی ، ما به یک ویژگی کاربردی که تقریبا مانند هشدارها ،که با یک جعبه رنگی متن را پر می کرد. اشاره کردیم. البته اهمیت آن، به بخش های مهمی از جمله کار با تصاویر در Bootstrap 4  و رنگ ها در Bootstrap 4 ، نمی رسد. اما در جای خودش کاربرد دارد.

در ادامه این بخش ، به چگونگی استفاده از طراحی هشدار ها ی Bootstrap 4 ، در قالب وب سایت ، می پردازیم.

طراحی هشدارها در Bootstrap 4

Bootstrap 4 ، روش آسانی را برا ی، طراحی بخش هشدارها در وب سایت ، ارائه کرده است:

Bootstrap 4 Alerts

هشدارها با کلاس .alert ، طراحی شده اند. و به دنبال آن یکی از کلاس های متنی زیر استفاده می شود:

Alert Links Bootstrap 4

مثال:

بستن هشدارها

بریا اینکه کاربر بتواند ، پس از مشاهده هشداری ، آن را ببندد،  Bootstrap 4 ، کلاس های .alert-dismissible برای بستن عنصر هشدار ، سپس class=”close” و data-dismiss=”alert” ، برای عناصر button و لینک ها را ارائه کرده است.

مثال:

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

Closing Alerts

کلام آخر

در ادامه آموزش های Bootstrap 4 ، ما در این بخش ، به کار با طراحی های آماده برای هشدارها در Bootstrap 4 ، در قالب موضوع طراحی هشدارها در Bootstrap 4 ، پرداختیم.