خاصية العرض

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

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

كيف تعمل

غيّر قيمة 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

يمكن تغيير قيم العرض عن طريق تغيير $displaysالمتغير وإعادة تجميع SCSS.

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

أمثلة

د مضمنة

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

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

<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

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

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

Print Only (Hide on screen only)

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

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