خاصيّة العرض display في إطار العمل Bootstrap

استخدم أدوات العرض التي يقدّمها إطار العمل Bootstrap لإبدال قيمة العرض بسرعة وعلى نحو متجاوب. تتضمّن الأدوات دعمَ بعضٍ من القيم الأكثر استخدامًا وأصنافًا إضافيّة للتحكّم في العرض أثناء الطباعة.

آليّة العمل

غيّر قيمة الخاصيّة display باستخدام أصناف العرض المتجاوبة. عمد مطوِّرو Bootstrap إلى دعم مجموعة جزئيّة فقط من القيم الممكنة للخاصيّة display. يمكن المزج بين الأصناف للحصول على تأثيرات متنوّعة حسب الحاجة.

تسميّة الأصناف

لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة (من xs إلى xl). يعود السبب في ذلك إلى أنّ هذه الأصناف تنطبق على العناصر ذات الخاصيّة min-width: 0;‎ فأعلى، وبالتالي لا ترتبط بأي استعلام وسيط. بالنسبة للنقاط الحديّة الأخرى فإن اختصاراتها تظهر في أسماء الأصناف.

من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة:

‎.d-{value}‎ بالنسبة للنقطة الحديّة xs
‎.d-{breakpoint}-{value}‎ بالنسبة للنقاط الحديّة sm، و md، و lg وxl.

حيث value تمثّل إحدى القيّم التاليّة:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

يمكن تغيير قيم العرض عن طريق تغيير قيمة المتغير ‎$displays ثم إعادة تصريف SCSS.

تنطبق استعلامات الوسائط على الشاشات ذات النقطة الحديّة المُحدَّدة أو الأعرض منها. على سبيل المثال، يعيِّن الصنف ‎.d-lg-none الخاصيّة display: none‎;‎ على كلّ من الشاشات العريضة (lg) والعريضة جدّا (xl).

أمثلة

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

إخفاء العناصر

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

استخدم الصنف ‎.d-none أو أيًّا من الأصناف ‎.d-{sm,md,lg,xl}-none لإخفاء العناصر من التنويعات المتجاوبة لشاشات الأجهزة.

يمكن الخلط بين الأصناف ‎.d-*-none و‎.d-*-* لإظهار العناصر على مجال مُحدَّد لعرض الشاشة. على سبيل المثال تخفي الأصناف ‎.d-none .d-md-block .d-xl-none العنصُر على جميع الشاشات ما عدا الشاشات المتوسّطة والعريضة.

النتيجة	الصنف
مخفيّ في جميع الشاشات	`‎.d-none`
مخفيّ في الشاشات الصغيرة جدًّا (xs) فقط	`‎.d-none .d-sm-block`
مخفيّ في الشاشات الصغيرة (sm) فقط	`‎.d-sm-none .d-md-block`
مخفيّ في الشاشات المتوسّطة (md) فقط	`‎.d-md-none .d-lg-block`
مخفيّ في الشاشات العريضة (lg) فقط	`‎.d-lg-none .d-xl-block`
مخفيّ في الشاشات العريضة جدًّا (lg) فقط	‎ `.d-xl-none`‎
مرئيّ على جميع الشاشات	‎ `.d-block`‎
مرئيّ على الشاشات الصغيرة جدًّا (xs) فقط	`‎.d-block .d-sm-none`
مرئيّ على الشاشات الصغيرة (sm) فقط	`‎.d-none .d-sm-block .d-md-none`
مرئيّ على الشاشات المتوسّطة (md) فقط	`‎.d-none .d-md-block .d-lg-none`
مرئيّ على الشاشات العريضة (lg) فقط	`‎.d-none .d-lg-block .d-xl-none`
مرئيّ على الشاشات العريضة جدًّا (lg) فقط	`‎.d-none .d-xl-block`

<div class="d-lg-none">أخف على الشاشات الأعرض من lg</div>
<div class="d-none d-lg-block">أخف على الشاشات الأضيق من lg</div>

العرض أثناء الطباعة

يمكن تحديد قيمة الخاصيّة display أثناء الطباعة باستخدام أدوات العرض أثناء الطباعة. تتضمّن هذه الأدوات دعم نفس قيّم display الموجودة في أصناف ‎.d-*‎ المتجاوبة السابقة.

‎.d-print-none
‎.d-print-inline
‎.d-print-inline-block
‎.d-print-block
‎.d-print-table
‎.d-print-table-row
‎.d-print-table-cell
‎.d-print-flex
‎.d-print-inline-flex

يمكن المزج بين استخدام أصناف العرض على الشاشة وأصناف العرض أثناء الطباعة.

<div class="d-print-none">على الشاشة فقط (مخفيّ فقط في الطباعة)</div>
<div class="d-none d-print-block">في الطباعة فقط (مخفيّ فقط على الشاشات)</div>
<div class="d-none d-lg-block d-print-block">مخفيّ في الشاشات العريضة وأضيق منها، لكنّه مرئيّ دائما في الطباعة</div>

مصادر

صفحة Display property في توثيق Bootstrap.