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

Multi Tier Responsive Grids تعدد طبقات الشبكة المتجاوبة

إتقان نظام الشبكة ذي 12 عموداً في بوتستراب 5: تسلسل الحاوية والصف والعمود، الأعمدة المتساوية والرقمية والمتكيفة، الطبقات المتجاوبة، row-cols، وتداخل الشبكات.
3 صفوف تعليمية
بوتستراب 5
2 مشاهدة

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

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

تظهر القوة الحقيقية لشبكة Bootstrap 5 عند دمج عدة كلاسات متجاوبة على العمود الواحد لبناء واجهات تتشكل بذكاء عبر الأجهزة. فعند كتابة class="col-12 col-sm-6 col-lg-4" على بطاقة منتج، ستمتد البطاقة بعرض الشاشة الكامل (12 عموداً) على الهواتف، وتتحول إلى عمودين في السطر (6 أعمدة لكل بطاقة) بدءاً من نقطة التوقف sm، ثم تستقر على ثلاث بطاقات في السطر (4 أعمدة لكل بطاقة) على الشاشات الكبيرة lg فما فوق.

اختبر أنماط الشبكة الأربعة عملياً في المختبر الحي التالي:

الصف 2 كود برمجي
HTML 
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4">Item 1</div>
    <div class="col-12 col-sm-6 col-lg-4">Item 2</div>
    <div class="col-12 col-sm-12 col-lg-4">Item 3</div>
  </div>
</div>
جرّب بنفسك
الصف 3 معاينة حية

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