ایجاد پنجره alert در Bootstrap

ایجاد پنجره alert در Bootstrap

تاریخ انتشار: 26 دی 1394

تعداد بازدید: 0 نفر

در این بخش نحوه ایجاد پیام های هشدار (alert) را در بوت استرپ خواهید آموخت.

پنجره های هشدار ( alert ) معمولاً برای نشان دادن اطلاعات مهم که نیاز به توجه فوری کاربر دارند مانند هشدار، خطا یا پیام های تأیید، به کار میروند.
با استفاده از بوت استرپ به راحتی میتوان پنجره های زیبا برای پیام های alert ایجاد کرد. همچنین میتوانید دکمه بستن ( close ) هم به آن اضافه نمایید.

پیام های هشدار :

با اضافه کردن کلاس alert-warning. به کلاس پایه alert. ، میتوانید یک پیام هشدار ساده ایجاد نمایید.






خروجی مثال بالا به شکل زیر خواهد بود :






نکته : چنانچه میخواهید هنگام بسته شدن پنجره افکت fade هم به آن اعمال شود، کلاس های fade. و in. را در کنار کلاس alert-warning. به آن ها اعمال کنید.






 

پیام های خطر یا خطا :

کلاس alert-danger. را به کلاس پایه alert. اضافه کنید تا پیام های خطر یا خطا ایجاد نمایید.






خروجی مثال بالا به شکل زیر خواهد بود :


 

پیام های موفقیت یا تأیید :

برای ایجاد پیام های موفقیت و تأیید کافیست کلاس alert-success. را به کلاس پایه alert. اضافه کنید.




خروجی مثال بالا به شکل زیر خواهد بود :


 

پیام های اطلاعاتی :

برای ایجاد این پیام ها کلاس alert-info. را به کلاس پایه alert. اضافه کنید.




خروجی مثال بالا به شکل زیر خواهد بود :


 

بستن alert با استفاده از ویژگی -data :

با استفاده از ویژگی -data میتوانیم به راحتی قابلیت بستن را به پنجره های alert اضافه نماییم. برای این کار، "data-dismiss="alert را به دکمه close اضافه کنید. به طور اتوماتیک عملکرد بستن روی پنجره alert فعال خواهد شد.



 

بستن alert با استفاده از جاوا اسکریپت :

همچنین میتوانید این کار را با استفاده از جاوا اسکریپت انجام دهید.





 

توابع :

توابع زیر، توابع استاندارد بوت استرپ برای پیام های هشدار ( alert ) میباشند.

( )alert.( )$

این تابع قابلیت بسته شدن (close) را به کلیه پنجره های alert اضافه می نماید.




 

(' tooltip ('close.

این تابع یک پنجره alert را می بندد.







 

رویدادها (Event):

رویداد توضیحات
close.bs.alert این رویداد به محض فراخوانی تابع close ، فعال میشود.
closed.bs.alert این رویداد زمانی که پنجره alert کاملاً بسته شد، فعال میشود. این رویداد تا پایان کامل عملیات transition در CSS منتظر میماند و بعد فعال میشود.

مثال زیر زمانی که عملیات fade out یک پنجره  alert پایان می یابد، یک پیام هشدار به کاربر نشان میدهد.








مطلب بعدی -> ایجاد دکمه های trigger و دکمه های رادیویی در Bootstrap
اشتراک گذاری:
021-41658