نظام الشبكة Bootstrap 5

نظام الشبكة

يتم بناء نظام الشبكة في Bootstrap باستخدام flexbox، حيث يسمح بأقصى 12 عمودًا على الصفحة.

إذا لم تكن ترغب في استخدام جميع 12 عمودًا بشكل منفرد، يمكنك دمج هذه الأعمدة لإنشاء أعمدة أوسع:

يستجيب نظام الشبكة بسرعة، ويعيد ترتيب الأعمدة تلقائيًا بناءً على حجم الشاشة.

تأكد من أن مجموعها يساوي أو يقل عن 12 (لا تحتاج إلى استخدام جميع 12 عمود متاح).

فئات الشبكة

يقدم نظام الشبكة في Bootstrap 5 ستة فئات:

  • .col- (أجهزة صغيرة جداً - عرض الشاشة أقل من 576px)
  • .col-sm- (أجهزة صغيرة - عرض الشاشة يساوي أو يزيد عن 576px)
  • .col-md- (أجهزة متوسطة - عرض الشاشة يساوي أو يزيد عن 768px)
  • .col-lg- (أجهزة كبيرة - عرض الشاشة يساوي أو يزيد عن 992px)
  • .col-xl- (أجهزة كبيرة جداً - عرض الشاشة يساوي أو يزيد عن 1200px)
  • .col-xxl- (أجهزة كبيرة - عرض الشاشة يساوي أو يزيد عن 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" العنصر = عرض 50% من عرض كل عمود، وثلاثة أعمدة = عرض 33.33% من عرض كل عمود. أربعة أعمدة = عرض 25% من عرض كل عمود. ويمكنك أيضًا استخدام .col-sm|md|lg|xl|xxl جعل الأعمدة قابلة للتكيف.

خيارات الشبكة

التالي يلخص كيف يعمل نظام الشبكة في Bootstrap 5 في مختلف أبعاد الشاشة المختلفة:

صغيرة جدًا (<576px) صغيرة (>=576px) متوسطة (>=768px) كبيرة (>=992px) مكبرة جدًا (>=1200px) مكبرة (>=1400px)
الرسالة قبل الكلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
سلوك الشبكة أفقية دائمًا أفقية دائمًا، في نقطة التشقيم فوق أفقية دائمًا، في نقطة التشقيم فوق أفقية دائمًا، في نقطة التشقيم فوق أفقية دائمًا، في نقطة التشقيم فوق أفقية دائمًا، في نقطة التشقيم فوق
عرض العنصر لا شيء (تلقائي) 540px 720px 960px 1140px 1320px
للمستخدمين الهاتف المحمول عمودياً الهاتف المحمول أفقياً الحاسوب اللوحي الحاسوب المحمول الحاسوب المحمول والكمبيوتر المكتبي الحاسوب المحمول والكمبيوتر المكتبي
رقم العمود 12 12 12 12 12 12
عرض المسافات 1.5rem (على كل جانب من الجانب .75rem ) 1.5rem (على كل جانب من الجانب .75rem ) 1.5rem (على كل جانب من الجانب .75rem ) 1.5rem (على كل جانب من الجانب .75rem ) 1.5rem (على كل جانب من الجانب .75rem ) 1.5rem (على كل جانب من الجانب .75rem )
يمكن تضمينها نعم نعم نعم نعم نعم نعم
التشويه نعم نعم نعم نعم نعم نعم
ترتيب الأعمدة نعم نعم نعم نعم نعم نعم