جار التحديث ...
جار التحديث ...
صورة المقال الافتراضية

ما هو نظام الأعمدة في بوتستراب ؟ مقالة مفصلة للمبتدئين

  • 1

يعتبر بوتستراب حالياً اهم اطار عمل css , يوفر لموقعك كمية هائلة من الكلاساست المساعدة لتسهيل العمل وتقليل وقت التصميم بأدوات مميزة ورئاعة وسهلة الاستخدام , النسخة الأخيرة المستقرة من بوتستراب هي Bootsrap 4 .

كلام جميل , لكن حقاً , ما هو بوتستراب ؟ :)

ما هو بوتستراب ؟

كما ذكرت في المقدمة السابقة , بوتستراب هو اطار عمل تابع للغة css , تما انشائه بواسطة موظفين في تويتر يبدو عليهما الشغف في التصميم النظيف , يساعدك بوتستراب في عملية تصميم الموقع وهو مخصص ل Front End Developers طبعاً , يضيف اطار العمل الرائع هذا الى تصميماتك التجاوبية مع المتصفحات وسهولة التعديل عبر نظام أعمدة رائع مكون من 12 عمود سيتم الحديث عنه في هذا المقال بتفصيل أكبر , كما يوفر لك عدة ادوات جاهزة لاستخدمها كالازرار وكلاسات التحكم في الاحجام والتحكم في الهوامش وغيرها ,

اذاً , لم علي استخدام بوتستراب ؟

اليك السر , لنقل فرضاً انك تريد انشاء موقع متجاوب يعمل على جميع أحجام الشاشات , ولديك <div> تريد عرضه بنصف حجم الشاشة في أجهزة سطح المكتب لكن في الهاتف المحمول سيبدو شكله مريعاً لذا عليك تكبيره الى حجم الشاشة كاملة , مال الذي يخطر في بالك للوهلة الأولى لحل هذه المشكلة ؟ طبعاً CSS Media Queries وهي حل مناسب جداً لحالتنا هنا , لكن لنقارن بعض الحقائق و ستضطر على الأقل لكتابة 10 أسطر لتستطيع السيطرة على حجم ال <div> في كل الشاشات بشكل مناسب , ماذا لو أخبرتك انه في بوتستراب يمكنكك استخدام كلاس واحد او كلاسين لحل المشكلة ؟ نعم صديقي هذه روعة بوتستراب هنا تماماً .

نظام الأعمدة

يوفر بوتستراب نظام أعمدة متكامل للموقع , وسأريكم مثال لتوضيح النقطة بشكل أكبر :

<div class="col-md-6 col-sm-12">I am Half Width on Meduim Screens , But Full Width on small screens.</div>

ترى السطر السابق الصغير ؟ ببساطة هذا السطر سيقوم بجعل العنصر يأخذ 6 أعمدة من أصل 12 عموداً في نظام بوتستراب للأعمدة في الشاشات المتوسطة , و12 عموداً في الشاشات الصغيرة , اي انه العنصر سيكون نصف عرض المتصفح في الشاشت المتوسطة (والكبيرة أيضاً الى حد ما) وعرض المتصفح كاملاً في الشاشات الصغيرة كالهاتف الذكي وغيره ...


يتألف نظام الأعمدة من 12 عمود , يقوم بوتستراب بتقسيم شاشة المتصفح الى 12 عمود واعتماداً على الكلاسات التي تضيفها سيتم تحديد حجم العنصر بناءً على ال 12 عمود .

في الصورة التالية , يوجد نظام أعمدة بوتستراب :

وكما تجدون أمامكم , يتم تقسيم شاشة المتصفح الى أعمدة حسب الكلاسات التي نقدمها ... والان تأتي قائمة الكلاسات المتاحة :

col-xs للشاشات الصغيرة جداً , كالهاتف المحمول مثلاً (<576px)

col-sm للشاشات الصغيرة , لا تتعدى عرض شاشة الهاتف المحمول أيضاً (≥576px)

col-md للشاشات المتوسطة , ربما كشاشة لابتوب او كمبيوتر صغيرة الحجم (≥768px)

col-lg للشاشات الكبيرة (≥992px)

col-xl للشاشات الكبيرة جداً , ونتحدث هنا عن الشاشات الكبيرة جداً ربما كشاشة تلفزيون ذكي او كمبيوتر متقدم (1140px>)



  • مسؤول
  • عضو جديد
  • قبل أشهر 3

ضصثصضثضص


  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
سجل الدخول للتعليق