Bootstrap Spinners
العناصر الدوار في BootStrap
ستتعلم في هذا الدرس اضافة spinners عناصر وازرار دوارة كالتي تظهر في ازرار تحميل الصفحات لينتظر الزائر حتي اختفاءه باستخدام bootstrap.
التاريخ
03 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1076
المواضيع
6
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-border-sm او spinner-grow-sm بجوار كلاس spinner-grow & spinner-border الاصليين لعمل spinner ذو حجم صغير.
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-grow & spinner-border مع buttons الازار او مع العناصر التي بداخل الزر لعمل spinner buttons باكثر من تصميم.
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>
هام
اذا تم اضافة اي text نص داخل العنصر الذي يحتوي على احد كلاسات spinner سيتم تطبيق animation على النص ايضا لذلك يجب ترك عنصر spinner خاليا من اي نص.