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

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

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

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

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

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

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

برای ساخت هشدارها از کلاس .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 مراجعه فرمایید.

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

برچسب ها : alert box، اطلاع رسان

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