في هذا الدرس 5تصفّح المواضيع
bootstrap's grid system نظام الشبكات في bootstrap يتكون من سلسلة من الحاويات والصفوف والاعمدة المتجاوبة بشكل كامل والتي تمكنك من تقسيم صفحة الويب الى عدد من الصفوف وكل صف يتكون من 12 column عمود مهما كان عرض هذه الصفحة. وهذا النظام مبني اعتمادا على تقنية CSS flexbox.
classes الرئيسية المستخدمة في bootstrap:
classes الرئيسية المستخدمة في bootstrap:
- container: صفحة الويب في bootstrap تتكون من container حاوية كبيرة, عندما نقوم ببناء صفحة ويب نضع جميع العناصر بداخل عنصر مضاف له كلاس container.
- كلاس container: يتم تقسيمه الي rows صفوف كل صف في bootstrap يضاف له كلاس row.
- كلاس row: يتم تقسيمه الي columns اعمدة ويضاف لكل صف كلاس col-x , حيث x رقم متغير من 1 الي 12.
ليس بالضرورة استخدام 12 عمود داخل الصف فيمكن استخدام عدد اعمده اقل مع دمجهم وتقسيمهم الى groups مجموعات.
يطلق علي كل column اسم span, ويتم تغيير حجم كل span حسب كل شاشة وحجمها.
الكلاسات الخاصة بتحديد عدد اعمدة كل element عنصر حسب نوع الجهاز المستخدم :
| xxl ≥ 1400px | xl ≥ 1200px | lg ≥ 992px | md ≥ 768px | sm ≥ 576px | xs < 576px | الحجم Size |
| .col-xxl- | .col-xl- | .col-lg- | .col-md- | .col-sm- | .col- | الكلاس Class |
| الشاشات الكبير جدا جدا | الشاشات الكبير جدا | الشاشات الكبير | الشاشات المتوسطة | الشاشات الصغيرة | الشاشات الصغيرة جدا | الجهاز Device |
col class.
استخدام كلاس -col. داخل عناصر HTML.
HTML
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>لعمل جميع الاعمدة متساوية فيجب اضافة كلاس col. وسيقوم bootstrap بتوزيع عرض الصفحة (12 عمود) على عدد العناصر الموجودة بالتساوي.
Equal Columns
استخدام كلاس col. لاعطاء عرض متساوٍ لكل عنصر.
HTML
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>- يتم اضافة كلاس row-cols-x. الى row الصف لتحديد عدد العناصر التي يمكن ان يحتويها كل صف.
- القيمة x تمثل عدد العناصر التي يمكن وضعها داخل كل صف, فمثلا row-cols-2. تعني ان الصف يمكن ان يحتوي على عنصرين فقط وكل عنصر عرضه 6 اعمدة.
- للتحكم في عدد العناصر فقط داخل كل صف بدون التحكم في عرض كل عنصر نستخدم الكلاس row-cols-auto.
row-columns class
استخدام كلاس row-cols. لتحديد عدد العناصر داخل الصف الواحد.
- يعمل 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>رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.