Bootstrap Progress Bars
اشرطة التقدم في BootStrap
ستتعلم في هذا الدرس كيفية استخدام progress bars اشرطة التقدم بطريقة سهلة تمكن المطورين من انجاز مهام معينة مثل معرفة الى اي مدى وصل المستخدم في شئ معين باستخدام 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
