Bootstrap

Bootstrap Spinners
العناصر الدوار في BootStrap

ستتعلم في هذا الدرس اضافة spinners عناصر وازرار دوارة كالتي تظهر في ازرار تحميل الصفحات لينتظر الزائر حتي اختفاءه باستخدام bootstrap.

التاريخ

03 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

928

المواضيع

6
الشروحات chevron_left Bootstrap Spinners chevron_left 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-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 خاليا من اي نص.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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