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

BootStrap grid row-columns class كلاس row-columns مع grid في bootstrap

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

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

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

الصف 1 شرح توضيحي
  • يتم اضافة كلاس  row-cols-x. الى row الصف لتحديد عدد العناصر التي يمكن ان يحتويها كل صف.
  • القيمة x تمثل عدد العناصر التي يمكن وضعها داخل كل صف, فمثلا row-cols-2. تعني ان الصف يمكن ان يحتوي على عنصرين فقط وكل عنصر عرضه 6 اعمدة. 
  • للتحكم في عدد العناصر فقط داخل كل صف بدون التحكم في عرض كل عنصر نستخدم الكلاس row-cols-auto.


row-columns class

استخدام كلاس row-cols. لتحديد عدد العناصر داخل الصف الواحد.

HTML
<div class="row row-cols-3"></div>
<div class="row row-cols-auto"></div>