Bootstrap Spinners
العناصر الدوار في BootStrap
ستتعلم في هذا الدرس اضافة spinners عناصر وازرار دوارة كالتي تظهر في ازرار تحميل الصفحات لينتظر الزائر حتي اختفاءه باستخدام bootstrap.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap Spinners
العناصر الدوارة في BootStrap
</>
Bootstrap Spinners
العناصر الدوارة في bootstrap
- عنصر spinner او loader هو زرار انتظار نظهره للزوار قبل حدوث شئ ما ثم نقوم باخفاءه بعد فتره زمنية.
- نقوم باضافة كلاس spinner-border الى العنصر الذي نريد تحويله الى spinner.
Spinners
عمل spinner باستخدام كلاس spinner-border
<div class="spinner-border"></div>
</>
BootSrap Colored Spinners
العناصر الدوارة الملونة في bootstrap
- يمكن استخدام الوان النصوص text color utilities لتغيير الوان spinners العناصر الدوارة.
- يتم اضافة كلاس *-text حيث * هي احد هذه القيم ( primary - secondary - muted - info - success - danger - warning - dark - light ).
Colored Spinners
تغيير الوان اي spinner
<div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div>
</>
BootStrap Growing Spinners
عناصر الدوران النامية في bootstrap
بدلا من عمل spinner يدور حول نفسه فقط, يمكن استخدام شكل اخر لاي spinner element عن طريق اضافة كلاس مختلف وهو spinner-grow الذي يطبق نوعا مختلفا من animation حيث يبدا spinner بشفافية صفر وحجم صفر ثم يزداد تدريجا حتى تصبح الشفافية والحجم 100%.
Growing Spinner
مثال على استخدام كلاس spinner-grow
<div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div>
</>
BootStrap Spinners Size
حجم العناصر الدوراة في bootstrap
Spinner Size
عمل spinner صغير باستخدام كلاس spinner-border-sm و spinner-grow-sm.
<div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div>
</>
BootStrap Spinner Buttons
الازرار الدوارة في bootstrap
Spinner Buttons
استخدام كل كلاسات spinners مع الازرار.
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
