عبدالرحمن أبوالسعد

مصمم ومطور مواقع إنترنت

المدونة

إستخدام إطار العمل Bootstrap لتصميم موقع ويب

إستخدام إطار العمل Bootstrap لتصميم موقع ويب

  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares
twitter-bootstrap

Twitter Bootstrap

فى البداية يجب عليك معرفة ما هو إطار العمل «Framework» ؟

أولاً هناك نوعين إطار عمل للتصميم و إطار عمل للبرمجة .. إطار العمل بكل إختصار, تمكنك من بناء تطبيقات بشكل اسرع وتوفر الوقت والجهد بسبب وجود الكثير من المكتبات التي تلبي احتياجاتك.

و من اشهر إطر البرمجة هو «codeigniter» ومن اشهر إطر التصميم هو «Bootstrap»، وهو إطار عمل مقدم من توتر يقدم في الأساس مجموعة أدوات صفحات الطرز المتراصة «css» يمكننا من طرفها عمل مشاريع أو عروض في أوقات وجيزة ومن أهم ما تتضمنه هي تصميم المستقبل «responsive design» التي تتناسب مع أي واجهة متصفح أو أبعاد. و جدير بالذكر أن هذا الأدوات تستعملها توتر وتقوم على تحسينها وضعها للجميع عبر رخصة أباتشي العمومية.

يتميّز إطار العمل «Bootstrap» بشهرته الواسعة الّتي يتمتّع بها، الأمر الّذي يجعل من صيانة وتنقيح شيفرة أي مُطوّر سهلةً في التعديل من قِبل أي مطوّرٍ آخر، مع عدم إغفال الدعم والتوثيق القويّ الّذي يملكه على الإنترنت.

يعود استخدام أُطر العمل «frameworks» بالنفع الكبير على المُطوّر، حيثُ لم يَعد على المُطوّر التفكير بالمشاكل المُتكرّرة ورُبما التافهة، وهي مشاكل قد تمّ حلها بالفعل من قبل صانعي أُطر العمل، فعلى السبيل المثال، التوافقيّة بين المُتصفّحات، دعم أبعاد أو أحجام الشاشة المُختلفة (التجاوبية)، إلى آخره من المشاكل الأخرى، ويُسرّع هذا الأسلوب أو هذا النمط من التطوير كثيرًا من عمليّة تخطيط وتطوير الموقع.

أهم مميزات Bootstrap

في أول الأمور فإضافة إلى أدوات css فإنه يقدم أدوات javascript تضاف إلى jQuery

  • سهولة التصميم لكل متصفحات الويب أو الأبعاد المستعملة
  • استعمال تقنية less لتغيير السريع للمشروع ليتناسب مع الاحتياجات أو استعمال المشروع
  • سرعة وخفة في التناسب مع كل المشاريع التي تبدأ من الصفر
  • التناسب مع كل متصفحات الويب الحديثة التي تستعمل css3 و html5
  • استعمال نموذج هيكلة بالأعمدة عوض الأبعاد في المشاريع تصاميم responsive

أهم الأدوات المقدمة

  • الأزرار، إمكانية تغير أي هيكلة إلى زر منسق ومصمم باستعمال class btn
  • الجداول، تنسيق احترافي للجداول بهيئات متنوعة
  • Dropdown، بسهولة نحصل على قائمة ذات أكثر من إبن
  • jQuery، يتضمن العديد من المهمات ومنها التنبيهات، tabs، accordion ، carousel ….

عمل مشروع

في أول الأمور لا يدعم العربية ولكلي تتفاءل يمكنك استعمال النسخة العربية المقدمة من طرف Abdullah Diaa
نقم بتحميل الملفات من الموقع الرئيسي وبعده نضعه في مشروعنا الذي سنقوم بإنشائه.

ويجدر الإشارة إلى أن الملفات تأتي في مجلد رئيسي باسم Bootstrap ويستحسن تركه في ذالك المجلد وبعده نطلب ما نحتاجه من تلك الملفات.

يمكن زيارة الموقع الرئيسي لمعلومات أكثر وشرح كيفية الاستعمال