الأدوات المساعدة للتخطيط (Utilities for layout)
من أجل تطوير أسرع ومتجاوب وصديق للهواتف المحمولة، يتضمن Bootstrap العشرات من الفئات (classes) المساعدة لإظهار المحتوى وإخفائه ومحاذاته وتحديد المسافات بينه.
تغيير display
استخدم أدوات العرض المساعدة (display utilities) لتبديل القيم الشائعة لخاصية display بشكل متوافق مع الشاشات (Responsive). ادمجها مع نظام الشبكة (grid system) الخاص بنا، أو المحتوى، أو المكونات لإظهارها أو إخفائها عبر منافذ عرض (viewports) محددة.
خيارات Flexbox
تم بناء Bootstrap باستخدام flexbox، ولكن لم يتم تغيير display لكل عنصر إلى display: flex لأن ذلك سيضيف العديد من التجاوزات غير الضرورية ويغير سلوكيات المتصفح الرئيسية بشكل غير متوقع. معظم مكوناتنا مبنية مع تفعيل flexbox.
إذا كنت بحاجة إلى إضافة display: flex إلى عنصر ما، فافعل ذلك باستخدام .d-flex أو أحد المتغيرات المتوافقة مع الشاشات (على سبيل المثال، .d-sm-flex). ستحتاج إلى هذه الفئة (class) أو قيمة display للسماح باستخدام أدوات flexbox المساعدة الإضافية الخاصة بنا لتحديد الحجم والمحاذاة والتباعد وغيرها.
الهامش الخارجي والداخلي
استخدم أدوات التباعد المساعدة (spacing utilities) الخاصة بـ margin و padding للتحكم في كيفية توزيع العناصر والمكونات وتحديد أحجامها. يتضمن Bootstrap مقياساً من ستة مستويات لأدوات التباعد المساعدة، بناءً على قيمة 1rem لمتغير $spacer الافتراضي. اختر القيم لجميع منافذ العرض (على سبيل المثال، .me-3 لـ margin-right: 1rem في نظام LTR)، أو اختر متغيرات متوافقة مع الشاشات (Responsive) لاستهداف منافذ عرض محددة (على سبيل المثال، .me-md-3 لـ margin-right: 1rem —في نظام LTR— بدءاً من نقطة التوقف md).
تبديل visibility
عندما لا يكون تبديل display مطلوباً، يمكنك تبديل visibility لعنصر ما باستخدام أدوات الرؤية المساعدة (visibility utilities). ستظل العناصر غير المرئية تؤثر على تخطيط الصفحة، ولكنها ستكون مخفية بصرياً عن الزوار.