أشرطة تقدم التمهيد
شريط التقدم الأساسي
يمكن استخدام شريط التقدم لإظهار مدى تقدم المستخدم في العملية.
يوفر Bootstrap عدة أنواع من أشرطة التقدم.
يبدو شريط التقدم الافتراضي في Bootstrap كما يلي:
لإنشاء شريط تقدم افتراضي ، أضف .progressفئة إلى <div>عنصر:
مثال
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
ملاحظة: أشرطة التقدم غير مدعومة في Internet Explorer 9 والإصدارات الأقدم (لأنها تستخدم انتقالات CSS3 والرسوم المتحركة لتحقيق بعض تأثيراتها).
ملاحظة: للمساعدة في تحسين إمكانية الوصول للأشخاص الذين يستخدمون برامج قراءة الشاشة ، يجب عليك تضمين سمات aria- *.
شريط التقدم مع التسمية
يبدو شريط التقدم الذي يحمل تسمية كما يلي:
قم بإزالة .sr-onlyالفصل من شريط التقدم لإظهار نسبة مئوية مرئية:
مثال
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
أشرطة التقدم الملونة
تُستخدم الفئات السياقية لتوفير "المعنى من خلال الألوان".
الفئات السياقية التي يمكن استخدامها مع أشرطة التقدم هي:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
يوضح المثال التالي كيفية إنشاء أشرطة تقدم بفئات سياقية مختلفة:
مثال
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
أشرطة تقدم مخططة
يمكن أيضًا تخطيط أشرطة التقدم:
أضف فئة .progress-bar-stripedلإضافة خطوط إلى أشرطة التقدم:
مثال
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
شريط التقدم المتحرك
أضف فئة .activeلتحريك شريط التقدم:
مثال
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
أشرطة تقدم مكدسة
يمكن أيضًا تكديس أشرطة التقدم:
قم بإنشاء شريط تقدم مكدس عن طريق وضع عدة أشرطة في نفس <div class="progress">:
مثال
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>