Source

خاصية العرض

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

كيف تعمل

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

الرموز

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

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

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

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

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

تؤثر استعلامات الوسائط على عرض الشاشة بنقطة توقف معينة أو أكبر . على سبيل المثال ، .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`
مخفي فقط في XL	`.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`
مرئي فقط في XL	`.d-none .d-xl-block`

hide on screens wider than lg

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

<div class="d-lg-none">hide on screens wider than lg</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-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>