نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3872
تاریخ بروزرسانی ۲۹ فروردین ۱۴۰۱

آموزش نکات مهم درباره هشدارها در بوت استرپ

هشدارها در بوت استرپ

در مبحث آموزش بوت استرپ، در این بخش میخوایم با آموزش مبحث هشدارها در بوت استرپ ادامه دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن آن ها و کلاس alert-link آشنا خواهید شد. هشدارها برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا نحوه تنظیم هشدارها را باهم بیاموزیم.

 

انواع هشدارها در بوت استرپ

برای ایجاد هشدار از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید.

alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است.
alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد.
alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد.
alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است.

در کد زیر می توانید نحوه استفاده از این کلاس ها را مشاهده کنید.

خروجی این کد در تصویر زیر نمایش داده شده است.

هشدارها در بوت استرپ

بستن هشدارها

برای بستن هشدارها کافی است یک لینک یا دکمه به هشدار اضافه کنید. سپس کلاس close و عبارت  “data-dismiss=”alert را به دکمه یا لینکی که ایجاد کرده اید، اضافه نمایید.
کد زیر برای بستن هشدارها در بوت استرپ نوشته شده است.

در کد بالا خصوصیت “aria-label = “close بهتر است، به دکمه ی بستن اضافه شود. زیرا موجب دسترسی کسانی می شود که از صفحه خوان ها استفاده می کنند. دستور times& که در کد بالا استفاده شده، برای ایجاد علامت بستن (X) است.
لازم به ذکر است که می توان هنگام بستن هشدار به آن انیمیشن افزود. استفاده از کلاس fade in  افکت محو شدن را هنگام بستن هشدار به آن اضافه می کند.

خروجی کد بالا به صورت زیر است. همانطور که مشاهده می کنید علامت بستن به هشدار اضافه شده است.

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

کلاس alert-link

اگر قصد دارید در پیغام هشدار، لینک قرار دهید از کلاس alert-link استفاده کنید. استفاده از این کلاس در لینک باعث می شود تا لینکی که در باکس هشدار قرار می دهید با باکس هشدار تطابق رنگی داشته باشد.
با دقت به کد زیر می توانید با نحوه استفاده از این کلاس آشنا شوید.

خروجی کد بالا در تصویر زیر نشان داده شده است.

کلاس alert-link

 

خب دوستان، آموزش هشدارها در بوت استرپ به پایان رسید. اکنون شما با انواع هشدارها در بوت استرپ، بستن آن ها و کلاس alert-link آشنا شدید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید آموزش های استایل دهی به متن در بوت استرپ ، جدول در بوت استرپ  و تصاویر در بوت استرپ را هم مطالعه بفرمایید.

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.