كلاسات العرض والطباعة المتجاوبة | العرض والتموضع والفيضان في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تتيح لك كلاسات خاصية العرض .d-{value} ونسخها المتجاوبة .d-{breakpoint}-{value} تبديل طريقة رسم العنصر أو إخفاءه تماماً حسب عرض الشاشة دون كتابة استعلام وسائط واحد؛ ومن أشهر قيمها none وinline وinline-block وblock وgrid.

فإذا أردت إخفاء شريط جانبي على الهواتف وإظهاره بدءاً من الشاشات المتوسطة فما فوق، تجمع ببساطة d-none d-md-block. كما يوفر الإطار عائلة .d-print-* مثل .d-print-none لإخفاء قوائم التنقل وأزرار الإجراءات تلقائياً عندما يطبع المستخدم الفاتورة أو التقرير ورقياً.

الصف 2 صورة توضيحية

الشكل 1: منظومة التحكم بالظهور المتجاوب وإحداثيات التموضع والفيضان والطبقات في Bootstrap 5.3.

مخطط أدوات العرض والتموضع والفيضان وترتيب الطبقات في بوتستراب 5.3

الصف 3 كود برمجي

HTML

<div class="d-block d-md-none p-2 text-bg-info rounded">
  Visible on Mobile Only (&lt;768px)
</div>
<div class="d-none d-md-block p-2 text-bg-primary rounded">
  Visible on Tablet &amp; Desktop (&gt;=768px)
</div>
<div class="d-print-none mt-2 small text-body-secondary">
  Hidden automatically when printing paper PDF
</div>

جرّب بنفسك

Display and Print Classes كلاسات العرض والطباعة المتجاوبة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (العرض والتموضع والفيضان في بوتستراب 5)