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

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

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

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

 

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

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

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

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

<div class="container">
<div class="alert alert-success">
 This alert box could indicate a successful or positive action. 
</div>
<div class="alert alert-info">
 This alert box could indicate a neutral informative change or action
</div>
<div class="alert alert-warning">
 This alert box could indicate a warning that might need attention. 
</div>
<div class="alert alert-danger">
 This alert box could indicate a dangerous or potentially negative action. 
</div>
</div>

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

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

بستن هشدارها

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

<div class="container">
<div class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   success alert
</div>
<div class="alert alert-danger alert-dismissable fade in">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   danger alert
</div>
</div>

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

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

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

کلاس alert-link

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

<div class="container">
<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  this is a success alert.<a href="#" class="alert-link">read this massage</a>
</div>
<div class="alert alert-info">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
   this is a info alert.<a href="#" class="alert-link">read this massage</a>
</div>
</div>

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

کلاس alert-link

 

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

 

مقالات مرتبط
هک و امنیت
3 زبان برنامه نویسی صدرنشین برای هک و امنیت

چرا دانش برنامه نویسی برای هک و امنیت اهمیت دارد؟چه زبانی را برای شروع باید انتخاب کنیم؟ هک واژه ای است که این روز ها برای همه افراد ، به خصوص افرادی که در حوزه IT و فناوری اطلاعات فعالیت می کنند بسیار جالب و هیجان انگیز است.  به یک هکر یک اسباب بازی جدید بده، اولین کاری که می کنه جدا کردن قطعاتش و…

بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

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

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…