خاصية العرض (Display property)

قم بتغيير قيمة العرض (display) للمكونات وغيرها بسرعة وبشكل متجاوب باستخدام أدوات العرض الخاصة بنا. تتضمن الدعم لبعض القيم الأكثر شيوعاً، بالإضافة إلى بعض الإضافات للتحكم في العرض عند الطباعة.

في هذه الصفحة

كيف يعمل ؟

قم بتغيير قيمة خاصية العرض (display) باستخدام الفئات (classes) المساعدة للعرض المتوافقة مع الشاشات (Responsive). نحن ندعم قصداً مجموعة فرعية فقط من جميع القيم الممكنة لـ display. يمكن دمج الفئات (classes) لتحقيق تأثيرات متنوعة حسب حاجتك.

نظام التسمية

الفئات (classes) المساعدة للعرض التي تنطبق على جميع نقاط التوقف (breakpoints)، من xs إلى xxl، لا تحتوي على اختصار لنقطة التوقف. وذلك لأن هذه الفئات يتم تطبيقها بدءاً من min-width: 0; وما فوق، وبالتالي فهي غير مقيدة باستعلام وسائط (media query). أما نقاط التوقف المتبقية، فهي تتضمن اختصاراً لنقطة التوقف.

وبناءً على ذلك، يتم تسمية الفئات باستخدام التنسيق التالي:

.d-{value} لـ xs
.d-{breakpoint}-{value} لـ sm و md و lg و xl و xxl.

حيث تكون قيمة واحدة من:

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

يمكن تغيير قيم العرض عن طريق تغيير قيم display المحددة في $utilities وإعادة تجميع الـ SCSS.

تؤثر استعلامات الوسائط (media queries) على عرض الشاشات التي تحتوي على نقطة التوقف المحددة أو أكبر. على سبيل المثال، .d-lg-none تضبط display: none; على شاشات lg و xl و xxl.

أمثلة

d-inline

html

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

d-block d-block

html

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

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

لتطوير أسرع متوافق مع الجوال، استخدم الفئات (classes) المساعدة للعرض المتوافقة مع الشاشات (Responsive) لإظهار وإخفاء العناصر حسب الجهاز. تجنب إنشاء إصدارات مختلفة تماماً من نفس الموقع، وبدلاً من ذلك قم بإخفاء العناصر بشكل متجاوب لكل حجم شاشة.

لإخفاء العناصر، ببساطة استخدم الفئة .d-none أو إحدى الفئات .d-{sm,md,lg,xl,xxl}-none لأي تباين متجاوب للشاشة.

لإظهار عنصر فقط في نطاق معين من أحجام الشاشات، يمكنك دمج فئة .d-*-none واحدة مع فئة .d-*-*، على سبيل المثال .d-none .d-md-block .d-xl-none ستخفي العنصر لجميع أحجام الشاشات باستثناء الأجهزة المتوسطة والكبيرة.

حجم الشاشة	الفئة (Class)
مخفي في الكل	`.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`
مخفي فقط في xl	`.d-xl-none .d-xxl-block`
مخفي فقط في xxl	`.d-xxl-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`
مرئي فقط في xl	`.d-none .d-xl-block .d-xxl-none`
مرئي فقط في xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

hide on screens smaller than lg

html

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

العرض عند الطباعة

قم بتغيير قيمة display للعناصر عند الطباعة باستخدام الفئات المساعدة للعرض عند الطباعة. تتضمن الدعم لنفس قيم display الموجودة في أدوات .d-* المتوافقة مع الشاشات.

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

يمكن دمج فئات الطباعة والعرض.

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

html

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

CSS

Sass utilities API

يتم التصريح عن أدوات العرض في الـ utilities API الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام الـ utilities API.

scss/_utilities.scss

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),