Bootstrap/utilities for layout

يتضمّن إطار العمل Bootstrap عشرات الأصناف الخدمية لإظهار المحتوى، وإخفائه، ومحاذاته ومباعدته. تساعد هذه الأصناف كثيرًا في تسريع تطوير صفحات متجاوبة ومُوجَّهة إلى الجوّال أولا.

تغيير قيمة الخاصيّة display

استخدم أدوات العرض للتبديل بين القيم الشائعة للخاصيّة display بطريقة متجاوبة. اجمع بين استخدام هذه الأدوات من أجل إظهار أو إخفاء عناصر نظام الشبكة، أو المحتوى أو المكوّنات الأخرى لإطار العمل حسب إطارات عرض Viewports مُحدَّدة.

خيارات Flexbox

بُنِي الإصدار 4 من Bootstrap باستخدام Flexbox، إلّا أنّه توجد عناصر لم تُغيَّر قيمة الخاصيّة display بالنسبة لها لتكون display: flex؛ إذ أنّ تفعيل هذه القيمة على جميع العناصر سيُلغي الكثير من القيم المبدئية لغير ضرورة؛ كما أنّه يغيّر السلوك الأساسي للمتصفّحات على نحو غير متوقَّع. أُنشِئت أغلب مكوّنات إطار العمل Bootstrap بحيث يكون تخطيط Flexbox مُفعّلًا مبدئيّا.

أضف الصّنف ‎.d-flex أو أحد تنويعاته المتجاوبة (مثلًا: ‎.d-sm-flex) إن احتجت لإضافة display: flex إلى عنصُر. يتطلّب استخدام أدوات Flexbox وجودَ الصّنف المذكور أو القيمة display.

الحاشيّات والهوامش

استخدم قيم الخاصيّتيْن margin و padding في أدوات التباعد للتحكّم في قياس العناصر والمكوّنات والتباعد بينها. يتضمّن الإصدار 4 من إطار العمل Bootstrap تدرجًا من خمسة مستويات لأدوات التباعد، اعتمادًا على القيمة المبدئية للمتغيّر ‎$spacer والتي هي 1rem. اختر قيمًا لجميع إطارات العرض (مثلًا الصّنف ‎.mr-3 للحصول على خاصيّة margin-right: 1rem) أو اختر من بين التنويعات المتجاوبة لاستهداف إطار عرض مُحدَّد (مثلًا: ‎.mr-md-3 للحصول على margin-right: 1rem ابتداءً من النقطة الحدّية md).

التبديل بين قيم الخاصيّة visibility

يمكن تبديل قيمة الخاصيّة visibility عن طريق أداة قابليّة الرؤية عندما يكون تبديل قيمة الخاصيّة display غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار.

المصادر

• صفحة Utilities for layout في توثيق Bootstrap.