أدوات مساعدة في إطار العمل Bootstrap لإدارة المحتوى
يتضمّن إطار العمل 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
غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار.