بوت اسپرینک 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>
