في هذا الدرس 5تصفّح المواضيع
- يمكن استخدام progress bar شريط التقدم لإظهار مدى تقدم المستخدم في العمليات او المهام.
- لانشاء progress bars يتم انشاء container وله كلاس progress ثم ننشئ child element داخل container ونضيف له كلاس progress-bar.
- نقوم باضافة width لهذا child element لاظهار مدى التقدم فيه.
Progress Bars
عمل 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>لاستخدام اشرطة التقدم المخططة 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>يمكن تحريك الخطوط الموجودة في 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>يمكن عمل عدة 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>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.