Source

پیش رفتن

مستندات و مثال‌هایی برای استفاده از نوارهای پیشرفت سفارشی بوت استرپ با پشتیبانی از نوارهای انباشته، پس‌زمینه‌های متحرک و برچسب‌های متنی.

چگونه کار می کند

کامپوننت های Progress با دو عنصر HTML، مقداری CSS برای تنظیم عرض و چند ویژگی ساخته شده اند. ما از عنصر HTML5<progress> استفاده نمی‌کنیم و اطمینان می‌دهیم که می‌توانید نوارهای پیشرفت را روی هم قرار دهید، آنها را متحرک کنید و برچسب‌های متنی را روی آنها قرار دهید.

.progressبرای نشان دادن حداکثر مقدار نوار پیشرفت از علامت به عنوان بسته بندی استفاده می کنیم .
ما از درونی .progress-barبرای نشان دادن پیشرفت تاکنون استفاده می کنیم.
برای تنظیم عرض .progress-barآنها به یک سبک درون خطی، کلاس ابزار یا CSS سفارشی نیاز دارد.
همچنین .progress-barبه برخی ویژگی ها roleو ariaویژگی ها نیاز دارد تا آن را در دسترس قرار دهد.

همه اینها را کنار هم بگذارید و نمونه های زیر را خواهید داشت.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

بوت استرپ تعدادی ابزار کمکی برای تنظیم عرض فراهم می کند . بسته به نیاز شما، اینها ممکن است به پیکربندی سریع پیشرفت کمک کنند.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

برچسب ها

با قرار دادن متن در نوار پیشرفت، برچسب‌ها را به نوارهای پیشرفت خود اضافه کنید .progress-bar.

25%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ارتفاع

ما فقط یک heightمقدار را بر روی تنظیم می کنیم .progress، بنابراین اگر آن مقدار را تغییر دهید، اندازه داخلی .progress-barبه طور خودکار مطابق با آن تغییر می کند.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

پس زمینه ها

از کلاس های ابزار پس زمینه برای تغییر ظاهر نوارهای پیشرفت فردی استفاده کنید.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

میله های متعدد

در صورت نیاز، چندین نوار پیشرفت را در یک جزء پیشرفت قرار دهید.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

راه راه

برای اعمال یک نوار از طریق گرادیان CSS روی رنگ پس‌زمینه نوار پیشرفت، .progress-bar-stripedبه هرکدام اضافه کنید..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

راه راه های متحرک

گرادیان راه راه نیز می تواند متحرک شود. .progress-bar-animatedبرای .progress-barمتحرک سازی نوارها از راست به چپ از طریق انیمیشن های CSS3 به آن اضافه کنید.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>