آموزش Bootstrap > کار با CSS و Bootstrap
آموزش ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap
آموزش ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap :
با استفاده از کلاس alert. در Bootstrap می توانید کادرهای رنگی مختلفی را ایجاد کرده و باه وسیله آنها پیام یا هشدار مورد نظر خود را به کاربر نمایش دهید .
هر کدام از این کادر ها دارای یک رنگ متفاوت بوده که با مضمون پیام همخوانی دارند . مثلا برای کادر نمایش اطلاعات رنگ ملایم آبی و برای کادر پیام هشدار ، رنگ قرمز در نظر
گرفته شده است .
برای ایجاد یک کادر هشدار ، ابتدا بایستی کلاس alert. را به عنصر مورد نظر خود داده و سپس یکی از کلاس های زیر را در ادامه آن اضافه نمایید :
- alert-success. : این کادر برای نمایش پیام موفقیت ، پس از یک رخداد ، استفاده شده و به رنگ سبز ملایم است .
- alert-info. : این کادر جهت نمایش اطلاعات به کار رفته و دارای رنگ آبی ملایم است .
- alert-warnning. : این کادر جهت نمایش یک هشدار به کار رفته و رنگ آن نارنجی کم رنگ می باشد .
- alert-danger. : این کادر نیز جهت نمایش یک پیام خطر به کار رفته و به رنگ قرمز است .
مثال : کد زیر ، نحوه ایجاد وخروجی هر یک از کادرهای هشدار Bootstrap را نشان می دهد :
<div class="alert alert-success">
<strong>Success!</strong> پیام موفقیت
</div>
<div class="alert alert-info">
<strong>Info!</strong> پیام جهت نمایش اطلاعات
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> پیام هشدار
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> پیام خطر
</div>
|
|
|
آموزش اضافه کردن یک دکمه جهت بستن کادر هشدار :
ممکن است بخواهید دکمه یا علامتی قرار داده تا کاربر بتواند با کلیک بر روی آن ، کادر پیام یا هشدار نمایش داده شده را ببندد .
برای این منظور بایستی یک تگ <a> یا دکمه Button ای را به عنصر خود اضافه کرده و خواص زیر را برای آن تعریف کنید :
- کلاس آن close باشد .
-
مقدار "data-dismiss="alert .
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> پیام موفقیت.
</div>
|
|
|
نکته 1 : برای کمک به افرادی که از دستگاه های مخصوص برای کم بینایان یا نا بینایان استفاده می کنند ( Screen Readers ) و سهولت استفاده آنها ، بایستی خاصیت " aria-label = " close را به دکمه یا لینک خود اضافه نمایید .
نکته 2 : همچنین کاراکتر ;times& ، یک کاراکتر خاص HTML بوده که خروجی به صورت ( X ) تولید می کند و استفاده از آن به عنوان یک ICON بهتر از به کار بردن حرف x ، جهت ایجاد دکمه بستن کادر است .
اضافه کردن افکت ملایم برای بسته شدن کادر هشدار ( fade in ) :
به وسیله کلاس های fade. و in. می توانید یک افکت را به کادر هشدار خود اضافه کرده تا در هنگام بسته شدن توسط کاربر ، به آرامی از روی صفحه محو شود( نه به صورت یک باره ) .
مثال : نحوه استفاده از افکت fade in و خروجی آن را در مثال زیر نشان داده ایم :
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> پیام موفقیت.
</div>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :