آموزش ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap
با استفاده از کلاس alert. در Bootstrap می توانید کادرهای رنگی مختلفی را ایجاد کرده و باه وسیله آنها پیام یا هشدار مورد نظر خود را به کاربر نمایش دهید .
هر کدام از این کادر ها دارای یک رنگ متفاوت بوده که با مضمون پیام همخوانی دارند . مثلا برای کادر نمایش اطلاعات رنگ ملایم آبی و برای کادر پیام هشدار ، رنگ قرمز در نظر گرفته شده است .
برای ایجاد یک کادر هشدار ، ابتدا بایستی کلاس alert. را به عنصر مورد نظر خود داده و سپس یکی از کلاس های زیر را در ادامه آن اضافه نمایید :
- alert-success. : این کادر برای نمایش پیام موفقیت ، پس از یک رخداد ، استفاده شده و به رنگ سبز ملایم است .
- alert-info. : این کادر جهت نمایش اطلاعات به کار رفته و دارای رنگ آبی ملایم است .
- alert-warnning. : این کادر جهت نمایش یک هشدار به کار رفته و رنگ آن نارنجی کم رنگ می باشد .
- alert-danger. : این کادر نیز جهت نمایش یک پیام خطر به کار رفته و به رنگ قرمز است .
مثال : کد زیر ، نحوه ایجاد وخروجی هر یک از کادرهای هشدار Bootstrap را نشان می دهد :
آموزش اضافه کردن یک دکمه جهت بستن کادر هشدار :
ممکن است بخواهید دکمه یا علامتی قرار داده تا کاربر بتواند با کلیک بر روی آن ، کادر پیام یا هشدار نمایش داده شده را ببندد .
برای این منظور بایستی یک تگ < a> یا دکمه Button ای را به عنصر خود اضافه کرده و خواص زیر را برای آن تعریف کنید :
- کلاس آن close باشد .
- مقدار "data-dismiss="alert .
نکته 1 :
برای کمک به افرادی که از دستگاه های مخصوص برای کم بینایان یا نا بینایان استفاده می کنند ( Screen Readers ) و سهولت استفاده آنها ، بایستی خاصیت " aria-label = " close را به دکمه یا لینک خود اضافه نمایید .
نکته 2 :
همچنین کاراکتر ;times& ، یک کاراکتر خاص HTML بوده که خروجی به صورت ( X ) تولید می کند و استفاده از آن به عنوان یک ICON بهتر از به کار بردن حرف x ، جهت ایجاد دکمه بستن کادر است .
ضافه کردن افکت ملایم برای بسته شدن کادر هشدار ( fade in )
به وسیله کلاس های fade. و in. می توانید یک افکت را به کادر هشدار خود اضافه کرده تا در هنگام بسته شدن توسط کاربر ، به آرامی از روی صفحه محو شود( نه به صورت یک باره ) .
مثال : نحوه استفاده از افکت fade in و خروجی آن را در مثال زیر نشان داده ایم :