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

خانه » بلاگ » bootstrap » آموزش نکات مهم درباره هشدارها در بوت استرپ

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

در مبحث آموزش بوت استرپ، در این بخش میخوایم با آموزش مبحث هشدارها در بوت استرپ ادامه دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن آن ها و کلاس 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 آشنا شدید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید آموزش های استایل دهی به متن در بوت استرپ ، جدول در بوت استرپ  و تصاویر در بوت استرپ را هم مطالعه بفرمایید.