عرض مصدر Bootstrap/display

<noinclude>{{DISPLAYTITLE:خاصيّة العرض display في إطار العمل Bootstrap}}</noinclude>
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap utilities]]
استخدم أدوات العرض التي يقدّمها إطار العمل Bootstrap لإبدال قيمة العرض بسرعة وعلى نحو متجاوب. تتضمّن الأدوات دعمَ بعضٍ من القيم الأكثر استخدامًا وأصنافًا إضافيّة للتحكّم في العرض أثناء الطباعة.

== آليّة العمل ==
غيّر قيمة الخاصيّة <code>[[CSS/display|display]]</code> باستخدام أصناف العرض المتجاوبة. عمد مطوِّرو Bootstrap إلى دعم مجموعة جزئيّة فقط من القيم الممكنة للخاصيّة <code>[[CSS/display|display]]</code>. يمكن المزج بين الأصناف للحصول على تأثيرات متنوّعة حسب الحاجة.

== تسميّة الأصناف ==
لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على [[Bootstrap/layout-overview#.D9.86.D9.82.D8.A7.D8.B7 .D8.AD.D8.AF.D9.91.D9.8A.D9.91.D8.A9 .D9.85.D8.AA.D8.AC.D8.A7.D9.88.D8.A8.D8.A9|جميع النقاط الحديّة]] (من <code>xs</code> إلى <code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تنطبق على العناصر ذات الخاصيّة <code>[[CSS/min-width|min-width]]: 0;‎</code> فأعلى، وبالتالي لا ترتبط بأي استعلام وسيط. بالنسبة للنقاط الحديّة الأخرى فإن اختصاراتها تظهر في أسماء الأصناف.

من هذا المُنطَلق فإنّ أسماء الأصناف تأخذ الصيغة التاليّة:
* <code>‎.d-{value}‎</code> بالنسبة للنقطة الحديّة <code>xs</code>
* <code>‎.d-{breakpoint}-{value}‎</code> بالنسبة للنقاط الحديّة <code>sm</code>، و <code>md</code>، و <code>lg</code> و<code>xl</code>.
حيث ''value'' تمثّل إحدى القيّم التاليّة:
* <code>none</code>
* <code>inline</code>
* <code>inline-block</code>
* <code>block</code>
* <code>table</code>
* <code>table-cell</code>
* <code>table-row</code>
* <code>flex</code>
* <code>inline-flex</code>
تنطبق استعلامات الوسائط على الشاشات ذات النقطة الحديّة المُحدَّدة ''أو الأعرض'' منها. على سبيل المثال، يعيِّن الصنف <code>‎.d-lg-none</code> الخاصيّة <code>[[CSS/display|display]]: none‎;‎</code> على كلّ من الشاشات العريضة (<code>lg</code>) والعريضة جدّا (<code>xl</code>).

== أمثلة ==
<syntaxhighlight lang="html">
<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>
</syntaxhighlight><syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

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

يمكن الخلط بين الأصناف <code>‎.d-*-none</code> و<code>‎.d-*-*</code> لإظهار العناصر على مجال مُحدَّد لعرض الشاشة. على سبيل المثال تخفي الأصناف <code>‎.d-none .d-md-block .d-xl-none</code> العنصُر على جميع الشاشات ما عدا الشاشات المتوسّطة والعريضة.
{| class="wikitable"
!النتيجة
!الصنف
|-
|مخفيّ  في جميع الشاشات
|<code>‎.d-none</code>
|-
|مخفيّ في الشاشات الصغيرة جدًّا (xs) فقط
|<code>‎.d-none .d-sm-block</code>
|-
|مخفيّ في الشاشات الصغيرة (sm) فقط
|<code>‎.d-sm-none .d-md-block</code>
|-
|مخفيّ في الشاشات المتوسّطة (md) فقط
|<code>‎.d-md-none .d-lg-block</code>
|-
|مخفيّ في الشاشات العريضة (lg) فقط
|<code>‎.d-lg-none .d-xl-block</code>
|-
|مخفيّ في الشاشات العريضة جدًّا (lg) فقط
|‎ <code>.d-xl-none</code>‎
|-
|مرئيّ على جميع الشاشات
|‎ <code>.d-block</code>‎
|-
|مرئيّ على الشاشات الصغيرة جدًّا (xs) فقط
|<code>‎.d-block .d-sm-none</code>
|-
|مرئيّ على الشاشات الصغيرة (sm) فقط
|<code>‎.d-none .d-sm-block .d-md-none</code>
|-
|مرئيّ على الشاشات المتوسّطة (md) فقط
|<code>‎.d-none .d-md-block .d-lg-none</code>
|-
|مرئيّ على الشاشات العريضة (lg) فقط
|<code>‎.d-none .d-lg-block .d-xl-none</code>
|-
|مرئيّ على الشاشات العريضة جدًّا (lg) فقط
|<code>‎.d-none .d-xl-block</code>
|}
<syntaxhighlight lang="html">
<div class="d-lg-none">أخف على الشاشات الأعرض من lg</div>
<div class="d-none d-lg-block">أخف على الشاشات الأضيق من lg</div>
</syntaxhighlight>

== العرض أثناء الطباعة ==
يمكن تحديد قيمة الخاصيّة <code>[[CSS/display|display]]</code> أثناء الطباعة باستخدام أدوات العرض أثناء الطباعة. تتضمّن هذه الأدوات دعم نفس قيّم <code>[[CSS/display|display]]</code> الموجودة في أصناف <code>‎.d-*‎</code> المتجاوبة السابقة.
* <code>‎.d-print-none</code>
* <code>‎.d-print-inline</code>
* <code>‎.d-print-inline-block</code>
* <code>‎.d-print-block</code>
* <code>‎.d-print-table</code>
* <code>‎.d-print-table-row</code>
* <code>‎.d-print-table-cell</code>
* <code>‎.d-print-flex</code>
* <code>‎.d-print-inline-flex</code>
يمكن المزج بين استخدام أصناف العرض على الشاشة وأصناف العرض أثناء الطباعة.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== مصادر ==
* [https://getbootstrap.com/docs/4.0/utilities/display/ صفحة Display property في توثيق Bootstrap].