نظام Bootstrap 4 Grid
نظام Bootstrap 4 Grid
يسمح نظام شبكة Bootstrap بما يصل إلى 12 عمودًا عبر الصفحة.
إذا كنت لا تريد استخدام كل الأعمدة الاثني عشر بشكل فردي ، فيمكنك تجميع الأعمدة معًا لإنشاء أعمدة أوسع:
| تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 |
| تمتد 4 | تمتد 4 | تمتد 4 | |||||||||
| تمتد 4 | تمتد 8 | ||||||||||
| تمتد 6 | تمتد 6 | ||||||||||
| تمتد 12 | |||||||||||
نظام شبكة Bootstrap سريع الاستجابة ، وستتم إعادة ترتيب الأعمدة وفقًا لحجم الشاشة: على شاشة كبيرة ، قد يبدو أفضل مع المحتوى المنظم في ثلاثة أعمدة ، ولكن على شاشة صغيرة سيكون من الأفضل أن تكون عناصر المحتوى مكدسة على رأس كل منهما الآخر.
فئات الشبكة
يتكون نظام شبكة Bootstrap 4 من خمس فئات:
.col-(الأجهزة الصغيرة جدًا - عرض الشاشة أقل من 576 بكسل).col-sm-(الأجهزة الصغيرة - عرض الشاشة يساوي أو يزيد عن 576 بكسل).col-md-(الأجهزة المتوسطة - عرض الشاشة يساوي 768 بكسل أو أكبر).col-lg-(الأجهزة الكبيرة - عرض الشاشة يساوي أو يزيد عن 992 بكسل).col-xl-(أجهزة xlarge - عرض الشاشة يساوي أو يزيد عن 1200 بكسل)
يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تلميح: يتم زيادة حجم كل فصل ، لذلك إذا كنت ترغب في تعيين نفس العروض لـ
smو md، ما عليك سوى تحديد sm.
قواعد نظام الشبكة
بعض قواعد نظام شبكة Bootstrap 4:
- يجب وضع الصفوف داخل
.container(عرض ثابت) أو.container-fluid(عرض كامل) من أجل المحاذاة والتعبئة الصحيحة - استخدم الصفوف لإنشاء مجموعات أفقية من الأعمدة
- يجب وضع المحتوى داخل أعمدة ، ويمكن أن تكون الأعمدة فقط عناصر فرعية مباشرة للصفوف
- الفئات المحددة مسبقًا مثل
.rowومتاحة.col-sm-4لعمل تخطيطات الشبكة بسرعة - تنشئ الأعمدة مزاريب (فجوات بين محتوى العمود) عبر الحشو. يتم إزاحة هذه المساحة المتروكة في صفوف للعمود الأول والأخير عبر الهامش السالب في
.rows - يتم إنشاء أعمدة الشبكة عن طريق تحديد عدد 12 عمودًا متاحًا ترغب في تمديدها. على سبيل المثال ، ثلاثة أعمدة متساوية تستخدم ثلاثة
.col-sm-4 - تكون عروض الأعمدة بالنسبة المئوية ، لذا فهي دائمًا مائعة وحجم بالنسبة للعنصر الأصلي
- يتمثل الاختلاف الأكبر بين Bootstrap 3 و Bootstrap 4 في أن Bootstrap 4 يستخدم الآن flexbox بدلاً من العوامات. ميزة واحدة كبيرة مع flexbox هي أن أعمدة الشبكة التي ليس لها عرض محدد سيتم تخطيطها تلقائيًا كـ "أعمدة عرض متساوية" (وارتفاع متساوٍ). مثال:
.col-smسيكون عرض كل عنصر بـ 33.33٪ تلقائيًا من نقطة الإيقاف الصغيرة وما فوق. نصيحة: إذا كنت تريد معرفة المزيد عن Flexbox ، فيمكنك قراءة دروسنا في CSS Flexbox .
لاحظ أن Flexbox غير مدعوم في IE9 والإصدارات السابقة.
إذا كنت بحاجة إلى دعم IE8-9 ، فاستخدم Bootstrap 3. وهو الإصدار الأكثر استقرارًا من Bootstrap ، ولا يزال مدعوماً من قبل الفريق لإصلاح الأخطاء الحرجة وتغييرات الوثائق. ومع ذلك ، لن يتم إضافة ميزات جديدة إليها.
الهيكل الأساسي لشبكة Bootstrap 4
ما يلي هو الهيكل الأساسي لشبكة Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
المثال الأول: قم بإنشاء صف ( <div
class="row">). بعد ذلك ، أضف العدد المطلوب من الأعمدة (العلامات ذات
.col-*-*الفئات المناسبة). تمثل النجمة الأولى (*) الاستجابة: sm ، أو md ، أو lg ، أو xl ، بينما تمثل النجمة الثانية رقمًا ، والذي يجب أن يضيف دائمًا ما يصل إلى 12 لكل صف.
المثال الثاني: بدلاً من إضافة رقم إلى كل منهما col، دع bootstrap يتعامل مع التخطيط ، لإنشاء أعمدة عرض متساوية: "col"عنصران = 50٪ عرض لكل عمود. ثلاثة عواميد = 33.33٪ عرض لكل عمود. أربعة عواميد = 25٪ عرض ، إلخ. يمكنك أيضًا استخدام .col-sm|md|lg|xlلجعل الأعمدة تستجيب.
خيارات الشبكة
يلخص الجدول التالي كيفية عمل نظام شبكة Bootstrap 4 عبر أحجام شاشات مختلفة:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| 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) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
أمثلة
توضح الفصول التالية أمثلة لأنظمة الشبكة للأجهزة المختلفة وعروض الشاشات:
- مكدس إلى أفقي
- تخطيط صغير جدًا
- الأجهزة الصغيرة
- الأجهزة المتوسطة
- أجهزة كبيرة
- أجهزة كبيرة جدًا
- المزيد من أمثلة الشبكة