قسمت هشتم bootstrap : هشدار ها یا Alerts در بوت استرپ چگونه ساخته میشوند ؟

خانه » مقالات اموزشی » css » بوت استرپ » قسمت هشتم bootstrap : هشدار ها یا Alerts در بوت استرپ چگونه ساخته میشوند ؟
قسمت هشتم bootstrap : هشدار ها یا Alerts در بوت استرپ چگونه ساخته میشوند ؟

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

4424

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۲-۱۸

Work time-rafiki

زمان مطالعه:

5 دقیقه

باسلام بسیاری از مواقع در سایت ها نیازمند این بوده اید که باکسی برای هشدارها و اطلاع رسانی ها تعریف کنید ! Alerts یا هشدارها در بوت استرپ 4 این کمک را به شما عزیزان خواهند کرد تا بتوانید باکس هایی به این منظور طراحی کنید.

پیشنهاد میشود پیش از ورود به این قسمت ، قسمت های پیشین دوره بوت استرپ را دنبال کنید.

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

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

تست پیام هشدار
تست پیام هشدار
تست پیام هشدار
تست پیام هشدار
تست پیام هشدار
تست پیام هشدار
تست پیام هشدار
تست پیام هشدار

برای ساخت هشدارها از کلاس .alert و بلافاصله برای ظاهر گرفتن از کلاس های .alert-success , .alert-info , .alert-warning , .alert-danger , .alert-primary , .alert-secondary , .alert-light یا .alert-dark استفاده میشود ، برای درک بهتر این موضوع مثال زیر را مورد بررسی قرار دهید.

افزودن لینک به هشدارها

با افزودن یک کلاس ساده به مثال بالا میتوانید از لینک در هشدارها استفاده کنید ، برای این کار کافی است کلاس .alert-link استفاده کنید تا یک رنگ متناسب برای لینک ، براساس طرح هشدار شما قرار داده شود. به مثال زیر توجه کنید:

برای سایر پیام های هشدار نیز با تعریف تگ a و افزودن کلاس مربوطه ( .alert-link ) میتوانید یک لینک به پیام هشدارها اضافه کنید.

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

برای تعریف اینکه هشدارها بعد از نمایش بسته شوند میتوانید از کلاس .alert-dismissible استفاده کنید و سپس تگ button با کلاس .close و data-dismiss=”alert” میتواند طراحی شود به طوری که هنگامی که روی دکمه کلیک شود هشدار شما بسته شود به مثال زیر توجه کنید.

نکته : × نمایش دهنده ی ایکون “x” در html هست و خروجی ان به صورت حرف x در امده و به عنوان علامتی برای نشان دادن مفهوم بستن استفاده میشود.

افزودن انیمیشن به هشدارها

کلاسهای .fade و .show هنگام بستن پیام هشدار ، یک اثر محو می کند به مثال زیر توجه کنید :

ویدیوی قسمت هشتم

امیدوارم این اموزش برای شما عزیزان مفید و کاربردی واقع شده باشد ، پیشنهاد میشود برای خواندن مطالب بیشتر به سایت getbootstrap مراجعه فرمایید.

موفق و پیروز باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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