Bootstrap

Bootstrap Progress Bars
اشرطة التقدم في BootStrap

ستتعلم في هذا الدرس كيفية استخدام progress bars اشرطة التقدم بطريقة سهلة تمكن المطورين من انجاز مهام معينة مثل معرفة الى اي مدى وصل المستخدم في شئ معين باستخدام bootstrap.

التاريخ

02 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1082

المواضيع

6
الشروحات chevron_left Bootstrap Progress Bars chevron_left Bootstrap

Bootstrap Progress Bars
اشرطة التقدم في BootStrap

</> Bootstrap Progress Bars
اشرطة التقدم في bootstrap

  • يمكن استخدام progress bar شريط التقدم لإظهار مدى تقدم المستخدم في العمليات او المهام.
  • لانشاء progress bars يتم انشاء container وله كلاس progress ثم ننشئ child element داخل container ونضيف له كلاس progress-bar.
  • نقوم باضافة width لهذا child element لاظهار مدى التقدم فيه.
Progress Bars

عمل progress bars باستخدام bootstrap.

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

</> BootStrap Colored Progress Bars
اشرطة التقدم الملونة في bootstrap

  • لون اي progress bar في الوضع الافتراضي هو primary اللون الازرق ولكي نقوم بتغييره يمكننا استخدام contextual background classes كلاسات الخلفية السياقية.
  • تكتب كلاسات الخلفية بهذا الشكل *-bg حيث * تاخذ القيم (primary - secondary - info - success - danger - warning - dark- light).
BootStrap Colored Progress Bars

التحكم في لون خلفية progress bars

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

</> BootStrap Striped Progress Bars
اشرطة التقدم الملونة في BootStrap

لاستخدام اشرطة التقدم المخططة striped progress bars يجب اضافة كلاس progress-bar-striped الى عنصر progress bar داخل container.

Striped Progress Bras

تخطيط اشرطة التقدم باستخدام bootstrap

<div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>

</> BootStrap Animated Progress Bars
اشرطة التقدم المتحركة في bootstrap

يمكن تحريك الخطوط الموجودة في striped progress bars اشرطة التقدم المخططة لتتحرك من اليمن الى اليسار عن طريق اضافة كلاس progress-bar-animated بجوار كلاس progress-bar.

Animated Progress Bar

مثال على عمل animation لشريط التقدم باستخدام كلاس progress-bar-animated.

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%"></div>
  </div>

</> BootStrap Multiple Progress Bars
اشرطة تقدم متعددة في bootstrap

يمكن عمل عدة progress bars اشرطة تقدم متجاورين عن طريقة اضافة كلاس progress-bar لاكثر من child element داخل الحاوية التي اضيف لها كلاس progress وتقسيم عرض الحاوية عليهم جميعا.

Multiple Progress Bars

عمل عدة اشرطة تقدم متجاورة.

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
</div>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.