Bootstrap نظام الشبكة
Bootstrap's نظام الشبكة يسمح ما يصل الى 12 عمودا في الصفحة.
إذا كنت لا ترغب في استخدام كل عمود 12 على حدة، يمكنك تجميع الأعمدة معا لخلق الأعمدة أوسع:
| فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 | فترة 1 |
| فترة 4 | فترة 4 | فترة 4 | |||||||||
| فترة 4 | فترة 8 | ||||||||||
| فترة 6 | فترة 6 | ||||||||||
| فترة 12 | |||||||||||
Bootstrap's نظام الشبكة يستجيب، وسوف الأعمدة إعادة ترتيب اعتمادا على حجم الشاشة: على الشاشة الكبيرة قد تبدو أفضل مع المحتوى نظمت في ثلاثة أعمدة، ولكن على الشاشة الصغيرة سيكون من الأفضل إذا كانت مكدسة عناصر المحتوى على رأس كل منهما الآخر.
نصيحة: تذكر أن أعمدة الشبكة يجب أن تضيف ما يصل الى اثني عشر لصف. أكثر من ذلك، سوف أعمدة كومة بغض النظر عن viewport .
فئات الشبكة
في Bootstrap نظام الشبكة لديها أربع فئات:
- xs (للهواتف)
- sm (للأقراص)
- md (لسطح المكتب)
- lg (لسطح المكتب بشكل اكبر)
الطبقات فوق ويمكن الجمع بين لإنشاء تخطيطات أكثر ديناميكية ومرنة.
نصيحة: كل فئة موازين، لذلك إذا كنت ترغب في تعيين نفس الاعراض ل xs و sm ، تحتاج فقط لتحديد xs .
قواعد نظام الشبكة
بعض Bootstrap قواعد نظام الشبكة:
- يجب أن توضع الصفوف داخل
.container(عرض ثابت) أو.container-fluid(العرض الكامل) عن المحاذاة الصحيحة والحشو - استخدام الصفوف لإنشاء مجموعات أفقية من الأعمدة
- يجب وضع المحتوى ضمن أعمدة، والأعمدة الوحيد قد يكون الأطفال فوري الصفوف
- فئات محددة مسبقا مثل
.rowو.col-sm-4تتوفر لصنع بسرعة تخطيطات الشبكة - أعمدة خلق المزاريب (الفجوات بين محتوى العمود) عن طريق الحشو. ويقابل هذا الحشو في صفوف للعمود الأول والأخير عن طريق الهامش السلبي على
.rows - يتم إنشاء أعمدة الشبكة عن طريق تحديد عدد 12 أعمدة المتاحة التي ترغب تمتد. على سبيل المثال، ثلاثة أعمدة متساوية استخدام ثلاثة
.col-sm-4
الهيكل الأساسي ل Bootstrap الشبكة
ما يلي هو الهيكل الأساسي لل Bootstrap الشبكة:
<div class="container">
<div
class="row">
<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 devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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 |
أمثلة
تظهر الفصول التالية أمثلة على أنظمة شبكة لأجهزة مختلفة: