نظام شبكة التمهيد
نظام شبكة التمهيد
يسمح نظام شبكة Bootstrap بما يصل إلى 12 عمودًا عبر الصفحة.
إذا كنت لا تريد استخدام كل الأعمدة الاثني عشر بشكل فردي ، فيمكنك تجميع الأعمدة معًا لإنشاء أعمدة أوسع:
| تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 |
| تمتد 4 | تمتد 4 | تمتد 4 | |||||||||
| تمتد 4 | تمتد 8 | ||||||||||
| تمتد 6 | تمتد 6 | ||||||||||
| تمتد 12 | |||||||||||
نظام شبكة Bootstrap سريع الاستجابة ، وستتم إعادة ترتيب الأعمدة وفقًا لحجم الشاشة: على شاشة كبيرة ، قد يبدو أفضل مع المحتوى المنظم في ثلاثة أعمدة ، ولكن على شاشة صغيرة سيكون من الأفضل أن تكون عناصر المحتوى مكدسة على رأس كل منهما الآخر.
نصيحة: تذكر أن عدد أعمدة الشبكة يجب أن يصل إلى اثني عشر لكل صف. أكثر من ذلك ، سوف تتكدس الأعمدة بغض النظر عن منفذ العرض.
فئات الشبكة
يتكون نظام شبكة Bootstrap من أربع فئات:
xs(للهواتف - الشاشات التي يقل عرضها عن 768 بكسل)sm(للأجهزة اللوحية - الشاشات التي يزيد عرضها عن 768 بكسل)md(لأجهزة الكمبيوتر المحمولة الصغيرة - الشاشات التي يزيد عرضها عن 992 بكسل)lg(لأجهزة الكمبيوتر المحمولة وأجهزة سطح المكتب - الشاشات التي تساوي أو تزيد عن 1200 بكسل)
يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تلميح: يتم قياس كل فصل ، لذلك إذا كنت ترغب في تعيين نفس العرض لـ xs و sm ، فأنت تحتاج فقط إلى تحديد xs.
قواعد نظام الشبكة
بعض قواعد نظام شبكة Bootstrap:
- يجب وضع الصفوف داخل
.container(عرض ثابت) أو.container-fluid(عرض كامل) من أجل المحاذاة والتعبئة الصحيحة - استخدم الصفوف لإنشاء مجموعات أفقية من الأعمدة
- يجب وضع المحتوى داخل أعمدة ، ويمكن أن تكون الأعمدة فقط عناصر فرعية مباشرة للصفوف
- الفئات المحددة مسبقًا مثل
.rowومتاحة.col-sm-4لعمل تخطيطات الشبكة بسرعة - تنشئ الأعمدة مزاريب (فجوات بين محتوى العمود) عبر الحشو. يتم إزاحة هذه المساحة المتروكة في صفوف للعمود الأول والأخير عبر الهامش السالب في
.rows - يتم إنشاء أعمدة الشبكة عن طريق تحديد عدد 12 عمودًا متاحًا ترغب في تمديدها. على سبيل المثال ، ثلاثة أعمدة متساوية تستخدم ثلاثة
.col-sm-4 - تكون عروض الأعمدة بالنسبة المئوية ، لذا فهي دائمًا مائعة وحجم بالنسبة للعنصر الأصلي
الهيكل الأساسي لشبكة التمهيد
ما يلي هو الهيكل الأساسي لشبكة Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
لذلك ، لإنشاء التخطيط الذي تريده ، قم بإنشاء حاوية ( <div
class="container">). بعد ذلك ، قم بإنشاء صف ( <div
class="row">). بعد ذلك ، أضف العدد المطلوب من الأعمدة (العلامات ذات
.col-*-*الفئات المناسبة). لاحظ أن الأرقام الواردة .col-*-*يجب أن تضيف دائمًا ما يصل إلى 12 لكل صف.
خيارات الشبكة
يلخص الجدول التالي كيفية عمل نظام شبكة Bootstrap عبر أجهزة متعددة:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
أمثلة
توضح الفصول التالية أمثلة على أنظمة الشبكة للأجهزة المختلفة: