امتیاز دهید:
ایجاد کادر های هشدار یا پیام ( Alerts ) در Bootstrap

alert  در بوت استرپ چیست؟

با استفاده از کلاس alert. در Bootstrap می توانید کادرهای رنگی مختلفی را ایجاد کرده و به وسیله آنها پیام یا هشدار مورد نظر خود را به کاربر نمایش دهید .
هر کدام از این کادر ها دارای یک رنگ متفاوت بوده که با مضمون پیام همخوانی دارند.

برای استفاده از این پیغام ها، کافیست کلاس alert را به همراه یکی از کلاس های زیر استفاده کنید:

alert-success : برای پیام های موفقیت و نتایج مثبت

alert-info : برای نمایش اطلاعاتی در مورد یک موضوع

alert-warning : برای نمایش پیغام های اخطار

alert-danger : برای نمایش پیغام های عدم موفقیت و شکست

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

 

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

نحوه بستن پیغام ها:

بوت استرپ کلاسی بنام alert-dismissable دارد که به شکل زیر، همراه با کلاس close استفاده می شود و باعث می شود با زدن روی دکمه × ، باکس پیغام بسته شود.

<div class="alert alert-success alert-dismissable">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

 

times& یک المان html ای است که نشانگر دکمه بستن است (×)

ایجاد انیمیشن در هنگام نمایش پیغام:

بوت استرپ کلاسی به نام fade دارد که همراه با کلاس هایی مثل in و out کمک میکند که پیغام ها با حالت انیمیشن ملایم بسته و باز شوند.

نحوه استفاده به شکل زیر است:

<div class="alert alert-danger fade in">

نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )