انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: أشرطة التقدم في بوتستراب 5

Stacked Progress Bars الأشرطة المتعددة المكدسة

أتقن بناء أشرطة التقدم في بوتستراب 5.3 ببنيتها المحدثة لسمات الإتاحة، وضبط التسميات والارتفاعات والألوان، والأشرطة المكدسة والمخططة المتحركة، والتحديث البرمجي الحي.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند تقسيم سعة التخزين الواحدة إلى شرائح متعددة — مثل «النظام 30%» و«الوسائط 25%» و«النسخ الاحتياطي 15%» — قدّم Bootstrap 5.3 الحاوية المبتكرة .progress-stacked! نضع بداخلها عدة عناصر .progress مستقلة يحمل كل منها عرض شريحته وسمات aria-label وaria-valuenow الخاصة به، فيدمجها بوتستراب في شريط واحد متلاصق ومقروء بالكامل لقارئات الشاشة.

الصف 2 كود برمجي
HTML 
<div class="progress-stacked">
  <div class="progress" role="progressbar"
    aria-valuenow="30" style="width: 30%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar"
    aria-valuenow="25" style="width: 25%">
    <div class="progress-bar bg-success"></div>
  </div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (أشرطة التقدم في بوتستراب 5)