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>