پیشرفت‌های Bootstrap 5

نوار پیشرفت پایه

نوار پیشرفت برای نمایش پیشرفت کاربر در یک فرآیند خاص استفاده می‌شود.

برای ایجاد نوار پیشرفت پیش‌فرض، .progress به عنصر کانتینر اضافه کنید و .progress-bar به فرزندان خود کلاس اضافه کنید. برای تنظیم عرض نوار پیشرفت از ویژگی width CSS استفاده کنید:

مثال

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

به طور شخصی امتحان کنید

ارتفاع نوار پیشرفت

ارتفاع پیش‌فرض نوار پیشرفت 1rem(معمولاً 16px）。 لطفاً از CSS استفاده کنید height برای تغییر آن استفاده کنید.

نکته:لطفاً توجه داشته باشید که باید ارتفاع کانتینر پیشرفت و نوار پیشرفت را یکسان تنظیم کنید:

مثال

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

به طور شخصی امتحان کنید

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

برای نمایش درصد قابل مشاهده، متنی را در داخل نوار پیشرفت اضافه کنید:

مثال

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

به طور شخصی امتحان کنید

نوار پیشرفت رنگی

در حالت پیش‌فرض، نوار پیشرفت به رنگ آبی ( اصلی ) است. از هر کدام از کلاس‌های پس‌زمینه محیطی برای تغییر رنگ آن استفاده کنید:

مثال

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- خاکستری -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- خاکستری روشن -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- خاکستری تیره -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

به طور شخصی امتحان کنید

لوگوی پیشرفت با خطوط

لطفاً استفاده کنید .progress-bar-striped کلاس برای اضافه کردن خطوط به لوگوی پیشرفت:

مثال

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

به طور شخصی امتحان کنید

انیمیشن لوگوی پیشرفت

لطفاً اضافه کنید .progress-bar-animated کلاس برای ایجاد انیمیشن لوگوی پیشرفت:

مثال

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

به طور شخصی امتحان کنید

لوگوی پیشرفت‌های چندگانه

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

مثال

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    فضای آزاد
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    اخطار
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    خطرناک
  </div>
</div>

به طور شخصی امتحان کنید