انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: الادوات المساعدة في BootStrap

BootStrap Border Radius نصف قطر الاطار في bootstrap

ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.

1 صفوف تعليمية
Bootstrap
3,170 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لاضافة border-radius دوارن في حواف اي عنصر يتم استخدام كلاس rounded ويمكن تخصيصه كالاتي:

  • كلاس rounded: لعمل دوارن قليل في حواف العنصر.
  • كلاس *-rounded: لتحديد الحافة التي تريد عمل border-radius لها حيث * هي top او bottom او start او end.
  • كلاس $-rounded: لتحديد حجم border-radius حيث $ هي رقم من 1 الى 5.
  • كلاس rounded-circle: لعمل border-radius بقيمة 50% لتحويل العنصر الى دائرة.
  • كلاس circle-pill: لتحويل الجانبين الى انصاف دائرة.
جرّب بنفسك

Border Radius

عمل border-radius باستخدام bootstrap utilities.

HTML 
<span class="rounded"> </span>
<span class="rounded-top"> </span>
<span class="rounded-end"> </span>
جرّب بنفسك

جميع فقرات هذا الدرس (الادوات المساعدة في BootStrap)