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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

خروجی این کد در تصویر زیر نمایش داده شده است.
https://www.webyar.net/wp-content/up...ap-300x160.png
بستن هشدارها در بوت استرپ

برای بستن هشدارها در بوت استرپ کافی است یک لینک یا دکمه به هشدار اضافه کنید. سپس کلاس close و عبارت “data-dismiss=”alert را به دکمه یا لینکی که ایجاد کرده اید، اضافه نمایید.
کد زیر برای بستن هشدارها در بوت استرپ نوشته شده است.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> success alert </div> <div class="alert alert-danger alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> danger alert </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
success alert
</div>
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
danger alert
</div>
</div>

در کد بالا خصوصیت “aria-label = “close بهتر است، به دکمه ی بستن اضافه شود. زیرا موجب دسترسی کسانی می شود که از صفحه خوان ها استفاده می کنند. دستور times& که در کد بالا استفاده شده، برای ایجاد علامت بستن (X) است.
لازم به ذکر است که می توان هنگام بستن هشدار به آن انیمیشن افزود. استفاده از کلاس fade in افکت محو شدن را هنگام بستن هشدار به آن اضافه می کند.
خروجی کد بالا به صورت زیر است. همانطور که مشاهده می کنید علامت بستن به هشدار اضافه شده است.
https://www.webyar.net/wp-content/up...ap-300x104.png
کلاس alert-link

اگر قصد دارید در پیغام هشدار، لینک قرار دهید از کلاس alert-link استفاده کنید. استفاده از این کلاس در لینک باعث می شود تا لینکی که در باکس هشدار قرار می دهید با باکس هشدار تطابق رنگی داشته باشد.
با دقت به کد زیر می توانید با نحوه ی استفاده از این کلاس آشنا شوید.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</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">×</a> this is a info alert.<a href="#" class="alert-link">read this massage</a> </div> </div>

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</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">×</a>
this is a info alert.<a href="#" class="alert-link">read this massage</a>
</div>
</div>

خروجی کد بالا در تصویر زیر نشان داده شده است.
https://www.webyar.net/wp-content/up...ass-300x99.png

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

هشدارها در بوت استرپ – آموزش bootstrap