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

Progress Labels and Height تسميات وارتفاع شريط التقدم

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

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

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

لإظهار النسبة المئوية مكتوبة داخل الشريط، اكتب النص مثل 65% مباشرةً داخل عنصر .progress-bar، وأضف .overflow-visible .text-dark إذا كانت النسبة ضئيلة جداً مثل 8% حتى لا ينقصّ النص الطويل. أما لتغيير سُمك الشريط فاضبط الارتفاع على الغلاف الأب .progress فقط عبر style="height: 20px" ليتمدد الشريط الداخلي تلقائياً بنفس الارتفاع.

الصف 2 كود برمجي
HTML 
<div class="progress" role="progressbar"
  aria-label="Disk usage" aria-valuenow="75"
  aria-valuemin="0" aria-valuemax="100"
  style="height: 22px">
  <div class="progress-bar" style="width: 75%">75%</div>
</div>
جرّب بنفسك

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