فهم الأرقام في فئات شبكة Bootstrap: col-md-4، col-xs-1، col-lg-2

يقدم إطار عمل Bootstrap نظامًا شبكيًا قويًا يسهل إنشاء تخطيطات سريعة الاستجابة. جزء لا يتجزأ من هذا النظام هو الفئات ذات التنسيق col-*، حيث تمثل العلامة النجمية رقمًا. تلعب هذه الأرقام دورًا حاسمًا في تحديد كيفية محاذاة العناصر داخل الشبكة وكيفية استجابتها لأحجام الشاشات المختلفة.

كيف تقوم الأرقام بمحاذاة الشبكات؟

يمثل الرقم الموجود في فئة col-* جزءًا من العرض المتاح الذي يجب أن يشغله العنصر المرتبط. يتم تقسيم العرض الإجمالي لصف الشبكة إلى 12 عمودًا، ويشير الرقم الموجود في الفئة إلى عدد الأعمدة التي سيمتدها العنصر.

على سبيل المثال، col-4 يعني أن العنصر سيمتد إلى 4 أعمدة أو 1/3 من العرض المتاح. سوف يمتد col-12 على العرض بالكامل، ويتناول جميع الأعمدة الـ 12.

كيفية استخدام الأرقام

لاستخدام هذه الفئات، ما عليك سوى تعيينها إلى عناصر داخل صف الشبكة. على سبيل المثال، لإنشاء عمودين متساويين العرض داخل صف واحد، يمكنك استخدام:

Column 1
Column 2

لإنشاء ثلاثة أعمدة غير متساوية العرض، يمكنك استخدام:

Column 1
Column 2

ماذا تمثل الأرقام؟

بعيدًا عن الأرقام نفسها، من المهم ملاحظة البادئات المطبقة عليهم. في Bootstrap، تمثل هذه البادئات أحجامًا مختلفة للشاشة:

xs: صغير جدًا (الأجهزة المحمولة)

• sm: صغير (أجهزة لوحية)
• md: متوسط ​​(أجهزة كمبيوتر سطح المكتب) )
• lg: كبيرة (أجهزة سطح مكتب أكبر)
• من خلال تعيين فئات col-* متعددة لعنصر ما، يمكنك التحكم في كيفية تصرفه في كل من أحجام الشاشة هذه. على سبيل المثال، col-6 col-sm-4 يعني أن العنصر سيمتد إلى نصف العرض على شاشات الأجهزة المحمولة و1/3 من العرض على الأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.

الاستنتاج

يعد فهم الأرقام والبادئات في فئات شبكة Bootstrap أمرًا ضروريًا لإنشاء تخطيطات ويب سريعة الاستجابة وقابلة للتكيف. ومن خلال الاستفادة من فئات col-* بشكل فعال، يمكن للمطورين التأكد من أن تصميماتهم تستجيب بسلاسة لأحجام الشاشات المختلفة، مما يوفر تجربة مستخدم متسقة عبر جميع الأجهزة.