تصميم مشروع ويب باستعمال Bootstrap 2.0

في أول الأمور يجب التعريف ما هو Bootstrap لكن قبل ذالك نعرف ما احتياجاتنا له، عند بداية تصميم لتطبيق ويب غالبا نبدئه من الصفر فأول الأكواد ننقرها نحن وذالك يأخذ وقت في كلا الحالتين كتابتها والتفكير فيها. وإذا أردنا عمل عرض لتطبيق في مدة وجيزة فنبدأ نبحث في مشرعنا السابقة لأشياء التي يمكننا إعادة استعمالها و عندما نجدها تبدأ الأخطاء بالتراكم لأن المشروع أضيفت أشياء أو أزيلت. ولتحسين هذا الوقت الضائع والأخطاء الغير المتوقعة بدأت تظهر في حياة المصمم إطارات عمل ما يعرف عليه غالبا باسمه الإنجليزي framework.
Bootstrap هو إطار عمل مقدم من توتر يقدم في الأساس مجموعة أدوات صفحات الطرز المتراصة css يمكننا من طرفها عمل مشاريع أو عروض في أوقات وجيزة ومن أهم ما تتضمنه هي تصميم المستقبل (responsive design) التي تتناسب مع أي واجهة متصفح أو أبعاد. و جدير بالذكر أن هذا الأدوات تستعملها توتر وتقوم على تحسينها وضعها للجميع عبر رخصة أباتشي العمومية.

أهم مميزات Bootstrap

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

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

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

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

عمل مشروع

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

محمد حنين

الإسم الكامل محمد حنين أحد geek من أمد طويل ، مطور ويب، محب للحرية، مستعمل نضام لينوكس، وأخيرا مجرم باللغة العربية للأسف في وقتها. معلومات أكثر عني أو الإتصال بي Mohammed Hanine

You may also like...

7 تعليقات

  1. يقول أحمد فارس:

    جزيت خيراً محمد، بحثت عن من كتب عنه بالعربية فلم أجد غيرك
    شكراً 🙂

  2. يقول anonymous:

    سلام عليكم
    شكرا جدا على الشرح المبسط الجميل ده
    بس لما كلمة bootstrap ظهرت و دورت عنها بالانجليزى و بالعربى توصلت الى انها مجرد template
    طيب ايه اللى حيضيفه لى كمصممة باقدر انزل template احترافى اعدله و اشتغل عليه
    و ايضا باقدر انشئ موقع الكترونى كامل باستخدام اى framework اجيدها
    من فضلك جاوبنى لان بقى فى هوس بال bootstrap
    شكرا لك
    تحياتي

    • يقول محمد حنين:

      وعليكم السلام.
      bootstrap جاء ليغلق الثغرة التي وجدت في التصميمات السريعة و الإحترافية، فكل تصميم إحترافي عليك بدأه من الصفر أو تحميله تصميم إحترافي ومن بعد ذالك عليك أن تقوم بالدخول في تفكير المصمم ومعرفة كيفية أنجز ذالك ليمكن العمل والتعديل عليه ، بإستعمال هذا framework أنت قادر على تصميم مبدئي له وإضافة تصميم إحترافي يستعمل bootstrap أو تصميم نسخة واجهة theme وليس وضعية الأشياء.
      يوجد الكثير من framework لصفحات الطراز المتراص css لكن هذا أحسنهما لأن لديه الكثير من الدعم والتحسين
      والنسخة الإخيرة 3 لها الكثير من المميزات أكثر من النسخة الثانية التي كانت مجرد عمل بهدف رائع والتجارب المخبرية (يقتلني المبرمج إذا قرأ هذه الجملة )
      النسخة الثالثة ستجد أن الورقة css إنقصمت إلى جزئين واحد لوضعية الأشياء ومكانها والثاني للواجهة.
      تحياتي

  3. يقول anonymous:

    استاذ محمد حنين
    شكرا لك بجد
    وضحتلى الصورة
    تحياتي

  4. يقول مريم:

    السلام عليكم ورحمة الله وبركاته..
    لو سمحتم أنا أريد برمجة موقع يناسب اجهزة الموبايل وشاشات الابتوب فهل مكتبة الـ bootstrap تفيدني في ذلك؟!
    ومن اين يمكنني تعلمها؟!
    هل يوجد كورسات لتعلمها من الصغر؟!
    ارجوا ان تفيدوني وجزاكم الله خيراً..

    • يقول admin:

      وعليكم السلام
      أعتذر على كل هذا التأخير ، يمكن إستعمال bootstrap وهو سهل للغاية لا يحتاج إلا التمرين عليه لا أكثر، هو في العموم css مكتوبة يناسب هل الأجهزة، هنا يوجد معلومات الإستعمال http://getbootstrap.com/ والتحميل أيضا لنسخة الجديدة
      إذا كان ما زال هناك ما يمكنني أن أقدمه فلا تترددي
      شكرا وأعيد طلب المسامحة على التأخير في الرد

  5. يقول محمد على:

    اشكرك على هذا الشرح المبسط والوافي

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *