خاصية العرض
يمكنك التبديل بسرعة واستجابة بين قيمة عرض المكونات والمزيد باستخدام أدوات العرض الخاصة بنا. يتضمن دعمًا لبعض القيم الأكثر شيوعًا ، بالإضافة إلى بعض الإضافات للتحكم في العرض عند الطباعة.
كيف تعمل
غيّر قيمة 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
يمكن تغيير قيم العرض عن طريق تغيير $displays
المتغير وإعادة تجميع SCSS.
تؤثر استعلامات الوسائط على عرض الشاشة بنقطة توقف معينة أو أكبر . على سبيل المثال ، .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 |
<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-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>