آموزش کار با نوار پیشرفت Progress Bar در بوت‌استرپ 4


نویسنده:
شنبه ۱۷ آبان ۱۳۹۹
نوار Progress Bar در بوت‌استرپ

نوار پیشرفت یا Progress Bar در بوت‌استرپ یکی از کلاس‌هایی است که در قسمت‌های مختلف یک سایت مانند پرکردن یک فرم چندقسمتی، خرید چندمرحله‌ای، اطلاع‌رسانی ظرفیت همایش و …. استفاده می‌شود. در این قسمت از آموزش رایگان بوت‌استرپ به نحوه‌ی کار با این نوار پرداخته‌ایم.

نوار پیشرفت یا Progress Bar چیست؟

یک Progress Bar یا نوار پیشرفت می‌تواند برای نمایش مقدار پیشرفت یک فرایند استفاده شود. در واقع این نوار وضعیت انجام یک فعالیت را در طی پروسه نشان می‌دهد.برای مثال زمانی‌که کاربر می‌خواهد یک فرم چندمرحله‌ای را در وب‌سایتی پر کند، این نوار می‌تواند پروسه پر شدن فرم و پیشرفت آن را نشان دهد.

بوت‌استرپ شامل چندین نوع نوار پیشرفت است. نوار پیشرفت پیش‌فرض در بوت‌استرپ به شکلی است که در زیر آمده است:

Progress Bar در بوت‌استرپ

برای ایجاد Progress Bar، باید به عنصر پدر “کلاس progress.” و به عنصر فرزند نیز “کلاس progress-bar.” بدهید.

سایر جزئیات با مانند width با کلاس‌های Css قابل تنظیم هستند. به کد زیر توجه کنید:

توجه: Progress Bar در مرورگر اینترنت اکسپلورر نسخه 9 و قدیمی‌تر پشتیبانی نمی‌شود.


تعیین ارتفاع برای نوار پیشرفت در بوت‌استرپ

ارتفاع Progress Bar در بوت‌استرپ، به‌طور پیش‌فرض 16 پیکسل می‌باشد. ولی می‌توان با استفاده از قابلیت height در CSS این ارتفاع را تغییر داد.

نکته: هنگام تعیین ارتفاع نوار پیشرفت، حتما باید ارتفاع عنصر پدر و نوار پیشرفت یکسان باشند.

به مثال زیر توجه کنید:

progress bar در بوت‌استرپ


اضافه کردن متن یا تیکت به Progress Bar

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

progress bar در بوت‌استرپ

برای اضافه کردن متن به نوار پیشرفت کافیست، به عنصر متنی را اضافه کنید. همچنین می‌توانید از کلاس sr-only. استفاده کنید. در مثال زیر، متن %70 اضافه شده است:


Progress Bar رنگی در بوت‌استرپ

رنگ پیش‌فرض برای نوارهای پیشرفت رنگ آبی می‌باشد. شما می‌توانید برای ایجاد نوار پیشرفت‌ رنگی از کلاس‌های زیر استفاده کنید:

  • progress-bar-success.
  • progress-bar-info.
  • progress-bar-warning.
  • progress-bar-danger.
نوار پیشرفت

در کد زیر نحوه استفاده از کلاس‌های فوق آمده است :


Progress Bar راه راه

نوار پیشرفت‌های راه راه به شکلی هستند که در زیر آمده است:

نوار پیشرفت در بوت‌استرپ

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

اضافه کردن استایل انیمیشن راه راه به نوار پیشرفت

برای ایجاد انیمیشن در نوار پیشرفت که به اصطلاح به آن نوار پیشرفت متحرک نیز می‌گویند، از کلاس progress-bar-animated. استفاده کنید. با اضافه کردن انیمیشن به این نوارها حس بارگذاری واقعی در کاربر تداعی می‌شود:


Progress Bar چندمنظوره

یکی از موارد کاربردی نوار پیشرفت، امکان تقسیم کردن نوار به قسمت‌های مختلف است. نوارهای پیشرفت می‌توانند به‌دنبال هم قرار بگیرند و به صورت چندمیله‌ای مشاهده شوند:

progress bar

برای ایجاد نوارهای پیشرفت به دنبال هم، چندین نوار پیشرفت را در یک <“div class=”progress> قرار دهید:

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *