انتقل إلى محتوى الدرس

BootStrap Grid Nesting انشاء grid متداخلة في bootstrap

ستتعلم في هذا الدرس grid system structure وتقسيمة صفحات الويب الى rows صفوف وتقسيم الصفوف الى columns اعمدة بواسطة اطار عمل bootstrap.

1 صفوف تعليمية
Bootstrap
3,709 مشاهدة

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

الصف 1 شرح توضيحي
  • يعمل bootstrap grid system عن طريق انشاء صف داخل الحاوية ثم انشاء اعمدة داخل هذا الصف.
  • يمكن تكرار هذه العملية داخل اي عمود حيث يمكن تقسيم العمود الى عدة صفوف عن طريقة اضافة كلاس row. لاي عنصر داخل العمود.
  • ويمكن ايضا عمل container واضافة row. صفوف بداخل اي عمود *-col حيث * هي رقم متغير من 1 الى 12. 

Grid Nesting

مثال على استخدام grid nesting.

HTML
<div class="container-fluid">
    <div class="row"> 
        <div class="col-md-6"> 
           <div class="row"></div> 
       </div>
    </div> 
</div>