in English

خاصية العرض

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

على هذه الصفحة

كيف تعمل

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

الرموز

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

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

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

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

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

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

تؤثر استعلامات الوسائط على عرض الشاشة بنقطة توقف معينة أو أكبر . على سبيل المثال ، .d-lg-noneتعيين ، والشاشات .display: none;lgxlxxl

أمثلة

د مضمنة

لغة البرمجة

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

د بلوك د بلوك

لغة البرمجة

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

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

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

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

لإظهار عنصر فقط في فترة زمنية معينة من أحجام الشاشة ، يمكنك دمج .d-*-noneفئة واحدة مع .d-*-*فئة ، على سبيل المثال .d-none .d-md-block .d-xl-none .d-xxl-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`
مخفي فقط في XL	`.d-xl-none`
مخفي فقط على xxl	`.d-xxl-none .d-xxl-block`
مرئي للجميع	`.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`

إخفاء على شاشات LG وشاشات أوسع

إخفاء على شاشات أصغر من إل جي

لغة البرمجة

<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-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

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

شاشة فقط (إخفاء عند الطباعة فقط)

طباعة فقط (إخفاء على الشاشة فقط)

إخفاء ما يصل إلى حجم كبير على الشاشة ، ولكن تظهر دائمًا عند الطباعة

لغة البرمجة

<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>

ساس

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات العرض في واجهة برمجة التطبيقات الخاصة بالمرافق في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

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