انتقل إلى محتوى الدرس

BootStrap Spacing الفراغات في bootstrap

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

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

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

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

يوفر bootstrap كلاسات معدة مسبقا لعمل padding او margin, وتكتب هذه الكلاسات هكذا property{side}-size حيث:

  • property لها قميتين اما m في حالة margin او p في حالة padding.
  • side لها عدة قيم ايضا: t -top & b-bottom & s-start & e-end & x- right and left & y-top and bottom وفي حالة عدم كتابته يتم تطبيق padding و margin على جميع الجوانب.
  • يمكن تحديد حجم الشاشة التي تريد تطبيق padding و margin عليها باضافة -sm- او -md- او -lg- او -xl- او -xxl- بعد side.
  • اما size فله قمية من 0 الى 5 وهي بالترتيب 0 و 4px و 8px و 16px و 24px و 48px ويمكن ايضا ان تكون auto.

Margin and Padding

عمل margin و padding باستخدام كلاسات bootstrap.

HTML
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>