البنية الحديثة لشريط التقدم | أشرطة التقدم في بوتستراب 5

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

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

تمنح أشرطة التقدم المستخدم طمأنينة بصرية فورية أثناء رفع ملف كبير، أو استكمال خطوات التسجيل، أو مراقبة استهلاك مساحة التخزين. يبني Bootstrap 5.3 شريط التقدم بعنصرين من عائلة <div> بدلاً من وسم المتصفح الجامد <progress> لضمان توحيد التصميم والتكديس والحركة عبر جميع المتصفحات: الحاوية الخارجية .progress التي تمثل المسار الكامل وتحمل سمات الإتاحة role="progressbar" وaria-valuenow، والعنصر الداخلي .progress-bar الذي يضبط عرض التعبئة البصري.

الصف 2 صورة توضيحية

مخطط البنية الحديثة لشريط التقدم في بوتستراب 5.3 والأشرطة المكدسة والمخططة

الصف 3 كود برمجي

HTML

<div class="progress" role="progressbar"
  aria-label="Upload progress" aria-valuenow="65"
  aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 65%"></div>
</div>

جرّب بنفسك

الصف 4 ملاحظة هامة

Modern Progress Markup البنية الحديثة لشريط التقدم

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

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