أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap Progress Bars

❮ السابق التالي الفصل ❯

الأساسية شريط التقدم

شريط تقدم يمكن أن تستخدم لإظهار المستعمل مدى طول هو / هي في العملية.

Bootstrap يوفر عدة أنواع من أشرطة التقدم.

شريط تقدم الافتراضي في Bootstrap يبدو مثل هذا:

70٪ كاملة

إنشاء شريط التقدم الافتراضي، إضافة .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-* الصفات.

شريط التقدم مع تسمية

شريط تقدم مع تسمية يبدو مثل هذا:

70٪

إزالة .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
40٪ كاملة (النجاح)
50٪ كاملة (مزيد من التفاصيل)
60٪ كاملة (تحذير)
70٪ كاملة (خطر)

يوضح المثال التالي كيفية إنشاء أشرطة التقدم مع الطبقات السياقية مختلفة:

مثال

<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>
انها محاولة لنفسك »

البارات مخطط التقدم

ويمكن أيضا أشرطة التقدم أن مخطط:

40٪ كاملة (النجاح)
50٪ كاملة (مزيد من التفاصيل)
60٪ كاملة (تحذير)
70٪ كاملة (خطر)

إضافة طبقة .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>
انها محاولة لنفسك »

الرسوم المتحركة شريط التقدم

هنا هو "animated" شريط التقدم:

40٪

إضافة الطبقة .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>
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»


❮ السابق التالي الفصل ❯