باسلام بسیاری از مواقع در سایت ها نیازمند این بوده اید که باکسی برای هشدارها و اطلاع رسانی ها تعریف کنید ! Alerts یا هشدارها در بوت استرپ 4 این کمک را به شما عزیزان خواهند کرد تا بتوانید باکس هایی به این منظور طراحی کنید.
پیشنهاد میشود پیش از ورود به این قسمت ، قسمت های پیشین دوره بوت استرپ را دنبال کنید.
هشدارهای بوت استرپ 4
بوت استرپ 4 راه اسانی برای شما عزیزان برای طراحی کردن هشدارهای از پیش تعریف شده که به شکل زیر می باشند فراهم کرده است :
برای ساخت هشدارها از کلاس .alert و بلافاصله برای ظاهر گرفتن از کلاس های .alert-success , .alert-info , .alert-warning , .alert-danger , .alert-primary , .alert-secondary , .alert-light یا .alert-dark استفاده میشود ، برای درک بهتر این موضوع مثال زیر را مورد بررسی قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="alert alert-success"> تست پیام هشدار </div> <div class="alert alert-info"> تست پیام هشدار </div> <div class="alert alert-warning"> تست پیام هشدار </div> <div class="alert alert-danger"> تست پیام هشدار </div> <div class="alert alert-primary"> تست پیام هشدار </div> <div class="alert alert-secondary"> تست پیام هشدار </div> <div class="alert alert-dark"> تست پیام هشدار </div> <div class="alert alert-light"> تست پیام هشدار </div> |
افزودن لینک به هشدارها
با افزودن یک کلاس ساده به مثال بالا میتوانید از لینک در هشدارها استفاده کنید ، برای این کار کافی است کلاس .alert-link استفاده کنید تا یک رنگ متناسب برای لینک ، براساس طرح هشدار شما قرار داده شود. به مثال زیر توجه کنید:
|
1 2 3 |
<div class="alert alert-success"> <strong>موفق!</strong> پیشنهاد میشود » <a href="#" class="alert-link">این متن را بخوانید</a>. </div> |
برای سایر پیام های هشدار نیز با تعریف تگ a و افزودن کلاس مربوطه ( .alert-link ) میتوانید یک لینک به پیام هشدارها اضافه کنید.
هشدارهای بسته شونده
برای تعریف اینکه هشدارها بعد از نمایش بسته شوند میتوانید از کلاس .alert-dismissible استفاده کنید و سپس تگ button با کلاس .close و data-dismiss=”alert” میتواند طراحی شود به طوری که هنگامی که روی دکمه کلیک شود هشدار شما بسته شود به مثال زیر توجه کنید.
|
1 2 3 4 |
<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>موفق!</strong> تست هشدار. </div> |
نکته : × نمایش دهنده ی ایکون “x” در html هست و خروجی ان به صورت حرف x در امده و به عنوان علامتی برای نشان دادن مفهوم بستن استفاده میشود.
افزودن انیمیشن به هشدارها
کلاسهای .fade و .show هنگام بستن پیام هشدار ، یک اثر محو می کند به مثال زیر توجه کنید :
|
1 |
<div class="alert alert-danger alert-dismissible fade show"> |
ویدیوی قسمت هشتم
امیدوارم این اموزش برای شما عزیزان مفید و کاربردی واقع شده باشد ، پیشنهاد میشود برای خواندن مطالب بیشتر به سایت getbootstrap مراجعه فرمایید.
موفق و پیروز باشید.
