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

دسته‌ها: دوره آموزش رایگان bootstrap4، دوره‌های رایگان

شنبه 17 آبان 1399

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

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

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

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

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

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

<div class="container">
  <h2>Basic Progress Bar</h2>
  <p> progress bar: </p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

<h2>Basic Progress Bar</h2>

<p> progress bar: </p>

</div>

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

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

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

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

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

<div class="container">
  <h2>Progress Bar Height</h2>
  <p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:</p> 
  <div class="progress" style="height:10px">
    <div class="progress-bar" style="width:40%;height:10px"></div>
  </div>
  <br>
  <div class="progress" style="height:20px">
    <div class="progress-bar" style="width:50%;height:20px"></div>
  </div>
  <br>
  <div class="progress" style="height:30px">
    <div class="progress-bar" style="width:60%;height:30px"></div>
  </div>
</div>

<h2>Progress Bar Height</h2>

<p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:</p>

</div>

<br>

</div>

<br>

</div>

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

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

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

<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>

<h2>Progress Bar With Label</h2>

</div>

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

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

progress-bar-success.
progress-bar-info.
progress-bar-warning.
progress-bar-danger.

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

<div class="container">
  <h2>Colored Progress Bars</h2>
  <p>Use any of the contextual color classes to change the color of the progress bar:</p> 
  <!-- Blue -->
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>

  <!-- Green -->
  <div class="progress">
    <div class="progress-bar bg-success" style="width:20%"></div>
  </div><br>

  <!-- Turquoise -->
  <div class="progress">
    <div class="progress-bar bg-info" style="width:30%"></div>
  </div><br>

  <!-- Orange -->
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:40%"></div>
  </div><br>

  <!-- Red -->
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"></div>
  </div><br>

  <!-- White -->
  <div class="progress border">
    <div class="progress-bar bg-white" style="width:60%"></div>
  </div><br>

  <!-- Grey -->
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"></div>
  </div><br>

  <!-- Light Grey -->
  <div class="progress border">
    <div class="progress-bar bg-light" style="width:80%"></div>
  </div><br>

  <!-- Dark Grey -->
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"></div>
  </div>
</div>

<h2>Colored Progress Bars</h2>

<p>Use any of the contextual color classes to change the color of the progress bar:</p>

</div><br>

</div><br>

</div><br>

</div><br>

</div><br>

</div><br>

</div><br>

</div><br>

</div>

Progress Bar راه راه

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

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

<div class="container">
  <h2>Striped Progress Bars</h2>
  <p>The .progress-bar-striped class adds stripes to the progress bars:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
  </div>
</div>

<h2>Striped Progress Bars</h2>

<p>The .progress-bar-striped class adds stripes to the progress bars:</p>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

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

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

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>Add the .progress-bar-animated class to animate the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>

<h2>Animated Progress Bar</h2>

<p>Add the .progress-bar-animated class to animate the progress bar:</p>

</div>

Progress Bar چندمنظوره

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

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

<div class="container">
  <h2>Multiple Progress Bars</h2>
  <p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p> 
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      Warning
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      Danger
    </div>
  </div>
</div>

<h2>Multiple Progress Bars</h2>

<p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p>

Free Space

</div>

Warning

</div>

Danger

</div>

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

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

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

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

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

Progress Bar راه راه

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

Progress Bar چندمنظوره

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

دیدگاهتان را بنویسید لغو پاسخ