عرض مصدر Bootstrap/utilities for layout

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

== تغيير قيمة الخاصيّة <code>display</code> ==
استخدم [[Bootstrap/display|أدوات العرض]] للتبديل بين القيم الشائعة للخاصيّة <code>[[CSS/display|display]]</code> بطريقة متجاوبة. اجمع بين استخدام هذه الأدوات من أجل إظهار أو إخفاء عناصر نظام الشبكة، أو المحتوى أو المكوّنات الأخرى لإطار العمل حسب إطارات عرض Viewports مُحدَّدة.

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

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

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

== التبديل بين قيم الخاصيّة <code>visibility</code> ==
يمكن تبديل قيمة الخاصيّة <code>[[CSS/visibility|visibility]]</code> عن طريق [[Bootstrap/visibility|أداة قابليّة الرؤية]] عندما يكون تبديل قيمة الخاصيّة <code>[[CSS/display|display]]</code> غير ضروريّ. تؤثّر العناصر غير المرئيّة على مُخطَّط الصفحة، إلا أنّها تبقى مخفيةً بصريًّا عن الزوّار.

== مصادر ==
* [https://getbootstrap.com/docs/4.5/layout/utilities-for-layout/ صفحة Utilities for layout في توثيق Bootstrap].
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap layout|{{SUBPAGENAME}}]]