باسلام بسیاری از مواقع در سایت ها نیازمند این بوده اید که باکسی برای هشدارها و اطلاع رسانی ها تعریف کنید ! 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 مراجعه فرمایید.
موفق و پیروز باشید.
