في هذا الدرس 6تصفّح المواضيع
تُعرف المسافات الفاصلة بين أعمدة الشبكة باسم الفواصل البينية، وتبلغ قيمتها الافتراضية في Bootstrap 5 مقدار 1.5rem (24px) أفقياً، موزعة بواقع 0.75rem كحشو داخلي أيمن و0.75rem كحشو داخلي أيسر على كل عمود .col-*، بينما يطبّق الصف .row هامشاً سالباً بالقدر نفسه على طرفيه ليظل أول عمود وآخر عمود بمحاذاة حافة الحاوية تماماً.
وبفضل اعتماد الإصدار الخامس على خصائص CSS المخصصة --bs-gutter-x و--bs-gutter-y، أصبح بإمكانك تعديل التباعد الأفقي والرأسي كلٍّ على حدة أو معاً عبر مقياس موحد يمتد من الدرجة 0 حتى الدرجة 5.
لزيادة أو تقليل المسافة الأفقية بين الأعمدة المتجاورة فقط دون المساس بالتباعد الرأسي، أضف أحد كلاسات .gx-0 حتى .gx-5 إلى عنصر الصف .row. وعند اختيار فواصل أفقية عريضة مثل .gx-5 (3rem)، تتجاوز الهوامش السالبة للصف حشو الحاوية القياسي (0.75rem)، لذا نضيف الكلاس .overflow-hidden إلى الحاوية الخارجية لمنع ظهور شريط تمرير أفقي غير مرغوب.
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div>Custom column padding (gx-5)</div>
</div>
<div class="col">
<div>Custom column padding (gx-5)</div>
</div>
</div>
</div>في الصفوف المتجاوبة التي تلتف أعمدتها إلى عدة أسطر (مثل أربع بطاقات بحجم .col-6 تشكل سطرين)، لا يوجد افتراضياً تباعد رأسي بين السطر الأول والسطر الثاني لأن --bs-gutter-y يبدأ من الصفر. تمنحك كلاسات .gy-1 حتى .gy-5 فاصلاً رأسياً أنيقاً ومتناسقاً بين الأسطر الملتفة داخل نفس الصف دون الحاجة لإضافة هوامش سفلية يدوية لكل بطاقة.
<div class="container overflow-hidden">
<div class="row gy-4">
<div class="col-6"><div>Box 1</div></div>
<div class="col-6"><div>Box 2</div></div>
<div class="col-6"><div>Box 3</div></div>
<div class="col-6"><div>Box 4</div></div>
</div>
</div>لتطبيق نفس المسافة البينية في الاتجاهين الأفقي والرأسي بتعليمة واحدة مختصرة، استخدم الكلاسات الموحدة .g-0 حتى .g-5 على عنصر .row؛ حيث يضبط الكلاس .g-3 مثلاً كلاً من التباعد الأفقي والرأسي على 1rem فتظهر شبكات البطاقات والمعارض بتوازن هندسي متطابق في كل الاتجاهات.
اختبر تأثير درجات الفواصل المختلفة في المختبر التفاعلي الحي التالي:
عند تصميم بطاقات أفقية مقسومة نصفين (صورة ملاصقة للنص بدون أي فراغ فاصل) أو شبكات صور متراصة الحواف، أضف الكلاس .g-0 إلى عنصر .row. يقوم .g-0 بتصفير الهوامش الأفقية السالبة على الصف وإزالة الحشو الجانبي والعلوي من جميع الأعمدة الأبناء المباشرين فوراً.
<div class="container">
<div class="row g-0">
<div class="col-sm-6 col-md-8">Flush Main (g-0)</div>
<div class="col-6 col-md-4">Flush Side (g-0)</div>
</div>
</div>تتجلى مرونة الفواصل البينية عند دمجها مع شبكات البطاقات .row-cols-* بصورة متجاوبة: فمن الممارسات الاحترافية تضييق الفواصل على شاشة الهاتف الصغيرة عبر .g-2 لاستغلال مساحة العرض الثمينة، ثم توسيعها تدريجياً على شاشات سطح المكتب الواسعة عبر .g-lg-4 لمنح البطاقات متنفساً بصرياً مريحاً.
<div class="container">
<div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-4">
<div class="col"><div>Card 1</div></div>
<div class="col"><div>Card 2</div></div>
<div class="col"><div>Card 3</div></div>
<div class="col"><div>Card 4</div></div>
</div>
</div>يلخص الجدول التالي منظومة كلاسات الفواصل البينية في Bootstrap 5.3:
| فئة الكلاس | المتغير المتأثر | الوظيفة الدقيقة في التخطيط |
|---|---|---|
.gx-{0..5} | --bs-gutter-x | ضبط المسافة الأفقية الجانبية بين الأعمدة المتجاورة في السطر |
.gy-{0..5} | --bs-gutter-y | ضبط المسافة الرأسية الفاصلة بين أسطر الأعمدة الملتفة داخل الصف |
.g-{0..5} | --bs-gutter-x وy | توحيد قيمة الفاصل الأفقي والرأسي معاً من 0 حتى 3rem |
.g-0 | كلا المتغيرين = 0 | إزالة كافة الفواصل والهوامش السالبة لبناء أعمدة متلاصقة تماماً |
.g{x|y}-{bp}-{0..5} | متجاوب حسب الشاشة | تغيير حجم الفواصل البينية تلقائياً عند نقاط التوقف sm حتى xxl |
.overflow-hidden | الحاوية الأب | منع التمرير الأفقي الزائد عند استخدام فواصل عريضة مثل .gx-5 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على آلية عمل الفواصل البينية عبر الحشو الجانبي والهوامش السالبة، وأتقنت تخصيص الفواصل الأفقية .gx-* والرأسية .gy-* والموحدة .g-*، وتصفيرها عبر .g-0، وتدريجها عبر الشاشات مع .row-cols-*. الخطوة التالية: انتقل الآن إلى درس «نظام الشبكة الحديثة CSS Grid وسلم z-index» لاستكشاف وضع الشبكة ثنائية الأبعاد بكلاسات .grid و.g-col-* و.g-start-*.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Grid Gutter الفاصل البيني للشبكة
- المسافة الأفقية والرأسية الفاصلة بين أعمدة الشبكة والتي تُدار عبر متغيرَي --bs-gutter-x و--bs-gutter-y.
- للمراجعة
- 02 Horizontal Gutter (.gx-*) الفاصل الأفقي الجانبي
- كلاسات من .gx-0 إلى .gx-5 توضع على الصف لتعديل التباعد الجانبي بين الأعمدة المتجاورة.
- للمراجعة
- 03 Vertical Gutter (.gy-*) الفاصل الرأسي للأسطر
- كلاسات من .gy-0 إلى .gy-5 تضيف مسافة رأسية متناسقة بين الأسطر الملتفة داخل الصف الواحد.
- للمراجعة
- 04 Zero Gutter (.g-0) التلاصق الصفري بلا فواصل
- كلاس يوضع على .row لإلغاء الهوامش السالبة وحشو الأعمدة تماماً لبناء تصاميم متلاصقة الحواف.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 REM REM
- Root Em Unit
- وحدة القياس الجذرية — تُقاس بها درجات الفواصل في بوتستراب بدءاً من الصفر وحتى 3rem لضمان التناسب مع خط المتصفح.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — توظف المتغيرات المخصصة لتمرير قيم الفواصل من عنصر الصف الأب إلى الأعمدة الأبناء تلقائياً.
- للمراجعة
- 03 RWD RWD
- Responsive Web Design
- تصميم الويب المتجاوب — يتيح تضييق الفواصل على شاشات الجوال عبر .g-2 وتوسيعها على الشاشات الكبيرة عبر .g-lg-4.
- للمراجعة
- 04 UI UI
- User Interface
- واجهة المستخدم — تحافظ على وضوح الفراغات الفاصلة عبر تنسيق الصناديق الداخلية بدلاً من تلوين عنصر العمود نفسه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ابنِ حاوية تضم صفاً بالكلاسات row row-cols-2 row-cols-lg-4 g-2 g-lg-4 بداخله أربعة أعمدة .col يحتوي كل منها على صندوق داخلي مستقل.
-
أنشئ صفاً بكلاس .row.g-0 يجمع قسماً رئيسياً .col-md-8 وقسماً جانبياً .col-md-4 بدون أي مسافة فاصلة بينهما.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.