Bootstrap 4 شبكات
نظام Bootstrap 4 Grid
تم إنشاء نظام شبكة Bootstrap باستخدام flexbox ويسمح بما يصل إلى 12 عمودًا عبر الصفحة.
إذا كنت لا تريد استخدام كل الأعمدة الاثني عشر بشكل فردي ، فيمكنك تجميع الأعمدة معًا لإنشاء أعمدة أوسع:
| تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 | تمتد 1 |
| تمتد 4 | تمتد 4 | تمتد 4 | |||||||||
| تمتد 4 | تمتد 8 | ||||||||||
| تمتد 6 | تمتد 6 | ||||||||||
| تمتد 12 | |||||||||||
نظام الشبكة سريع الاستجابة ، وسيتم إعادة ترتيب الأعمدة تلقائيًا حسب حجم الشاشة.
تأكد من أن المجموع يصل إلى 12 أو أقل (ليس مطلوبًا أن تستخدم جميع الأعمدة الـ 12 المتوفرة).
فئات الشبكة
يتكون نظام شبكة Bootstrap 4 من خمس فئات:
.col-(الأجهزة الصغيرة جدًا - عرض الشاشة أقل من 576 بكسل).col-sm-(الأجهزة الصغيرة - عرض الشاشة يساوي أو يزيد عن 576 بكسل).col-md-(الأجهزة المتوسطة - عرض الشاشة يساوي 768 بكسل أو أكبر).col-lg-(الأجهزة الكبيرة - عرض الشاشة يساوي أو يزيد عن 992 بكسل).col-xl-(أجهزة xlarge - عرض الشاشة يساوي أو يزيد عن 1200 بكسل)
يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تلميح: يتم زيادة حجم كل فصل ، لذلك إذا كنت ترغب في تعيين نفس العروض لـ
smو md، ما عليك سوى تحديد sm.
الهيكل الأساسي لشبكة 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>
<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>
المثال الأول: قم بإنشاء صف ( <div
class="row">). بعد ذلك ، أضف العدد المطلوب من الأعمدة (العلامات ذات
.col-*-*الفئات المناسبة). تمثل النجمة الأولى (*) الاستجابة: sm ، أو md ، أو lg ، أو xl ، بينما تمثل النجمة الثانية رقمًا ، والذي يجب أن يضيف ما يصل إلى 12 لكل صف.
المثال الثاني: بدلاً من إضافة رقم إلى كل منهما col، دع bootstrap يتعامل مع التخطيط ، لإنشاء أعمدة عرض متساوية: "col"عنصران = 50٪ عرض لكل عمود. ثلاثة عواميد = 33.33٪ عرض لكل عمود. أربعة عواميد = 25٪ عرض ، إلخ. يمكنك أيضًا استخدام .col-sm|md|lg|xlلجعل الأعمدة تستجيب.
أدناه قمنا بجمع بعض الأمثلة على تخطيطات شبكة Bootstrap 4 الأساسية.
ثلاثة أعمدة متساوية
يوضح المثال التالي كيفية إنشاء ثلاثة أعمدة متساوية العرض على جميع الأجهزة وعروض الشاشة:
مثال
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
أعمدة مستجيبة
يوضح المثال التالي كيفية إنشاء أربعة أعمدة متساوية العرض بدءًا من الأجهزة اللوحية والتحجيم إلى أسطح المكتب الكبيرة جدًا. على الهواتف المحمولة أو الشاشات التي يقل عرضها عن 576 بكسل ، ستتكدس الأعمدة فوق بعضها تلقائيًا :
مثال
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</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 4 لاحقًا في هذا البرنامج التعليمي.