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