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 نظام الشبكة يستجيب، وسوف الأعمدة إعادة ترتيب تلقائيا تبعا لحجم الشاشة.
فئات الشبكة
في Bootstrap نظام الشبكة لديها أربع فئات:
- xs (للهواتف)
- sm (للأقراص)
- md (لسطح المكتب)
- lg (لسطح المكتب بشكل اكبر)
الطبقات فوق ويمكن الجمع بين لإنشاء تخطيطات أكثر ديناميكية ومرنة.
الهيكل الأساسي ل Bootstrap الشبكة
ما يلي هو الهيكل الأساسي لل Bootstrap الشبكة:
<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 class="row"> ). ثم إضافة العدد المطلوب من الأعمدة (العلامات مع المناسبة .col-*-* الطبقات). لاحظ أن الأرقام في .col-*-* وينبغي أن تضيف دائما ما يصل إلى 12 لكل صف.
أدناه التي جمعناها بعض الأمثلة الأساسية Bootstrap تخطيطات الشبكة.
ثلاثة أعمدة متساوية
يوضح المثال التالي كيفية الحصول على ثلاثة أعمدة متساوية العرض ابتداء من الساعة أقراص وتوسيع لأجهزة الكمبيوتر المكتبية كبيرة. على الهواتف النقالة، والأعمدة كومة تلقائيا:
مثال
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> انها محاولة لنفسك » اثنين من الأعمدة غير متساوية
يوضح المثال التالي كيفية الحصول على عمودين مختلف العرض ابتداء من أقراص والتحجيم لأجهزة الكمبيوتر المكتبية كبيرة:
مثال
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> انها محاولة لنفسك » نصيحة: سوف تتعلم المزيد عن Bootstrap شبكات في وقت لاحق في هذا البرنامج التعليمي.