انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: العرض والتموضع والفيضان في بوتستراب 5

Logical Floats Object Fit التعويم المنطقي وملاءمة الوسائط

تحكّم في سلوك التخطيط في بوتستراب 5.3 عبر كلاسات العرض والطباعة المتجاوبة، وإحداثيات التموضع المطلق والنسبي، والتوسيط بـ translate-middle، وتثبيت الأشرطة والفيضان وملاءمة الوسائط والطبقات.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

عند التفاف فقرة مقالية حول صورة صغيرة، استخدم التعويم المنطقي .float-start أو .float-end (أو المتجاوب .float-md-start) مع إضافة .clearfix على الأب لاحتواء الطفو، وتجنب استخدام التعويم لبناء أعمدة الصفحة الكاملة طالما لديك نظام الشبكة الحديث.

أما عندما تضطر لتوحيد أبعاد بطاقات الصور بارتفاع ثابت مثل 180px دون تمطيط الصور أو ضغطها، فإن عائلة .object-fit-cover تقص أطراف الصورة بذكاء لتملأ الإطار مع الحفاظ الكامل على نسبة أبعادها الأصلية، بجانب خيارات .object-fit-contain و.object-fit-scale.

الصف 2 كود برمجي
HTML 
<div class="row g-3">
  <div class="col-6">
    <img src="/images/examples/laptop-pro.webp"
      height="130" class="w-100 object-fit-cover rounded-3"
      alt="Distortion-free cover crop">
  </div>
  <div class="col-6">
    <img src="/images/examples/laptop-pro.webp"
      height="130" class="w-100 object-fit-contain border"
      alt="Full contain fit"></div></div>
جرّب بنفسك
الصف 3 معاينة حية

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