مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar )
آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar )

یکی از مهم ترین عناصر در برای نشان دادن پیشرفت یک پروژه ،  نمودار میله ای جهت آمارگیری و … نوار پیشرفت می باشد. نوار پیشرفت ( Progress Bar ) همان تگ <progress> در html5 می باشد که بوت استرپ با ترکیب این المان با css و کمی جاوااسکریپت، به جذابیت بصری آن افزوده است و علاوه بر این، آن را به صورت ریسپانسیو نیز درآورده است.

نکته: نوارهای پیشرفت در اینترنت اکسپلورر۹ و ورژن های قبلی آن پشتیبانی نمی شود ( زیرا آنها از transition ها و animation ها برای ایجاد بعضی افکت های خود استفاده می کنند ).

با استفاده از کلاس .progress در <div> اصلی و استفاده از .progress-bar در تگ های والد می توان یک نوار پیشرفت در بوت استرپ تعریف کرد:

درصدی که در اینجا مشاهده می شود، درصد پیشرفتی است که توسط این المان نشان داده می شود. همانطور که در کد زیر مشاهده میشود، می توان از label هم برای نمایش درصد پیشرفت در این المان اسفاده کرد.

نوار پیشرفت به صورت راه راه striped

با استفاده از کلاس .progress-bar-striped می توان این المان به صورت راه راه استفاده کرد.

مثلاً:

تغییر رنگ نوارهای پیشرفت:

با استفاده از رنگ های از پیش تعریف شده، می توان رنگ پس زمینه نوارها را تغیییر داد.

نوار پیشرفت ترکیبی

می توانید در مواردی که نیاز دارید، این المان را به صورت ترکیبی از چند نوار استفاده کنید. به مثال زیر توجه کنید:

در این مثال، progress bar از سه قسمت به صورت ترکیبی ساخته شده است.


 

 

تاریخ آخرین بروزرسانی : ۲۴ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.