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