تصميم المواقع الإلكترونية بالبوتستراب
نعود من جديد مع إطار عمل frame work أو لنقل أداة رائعة جدا تساعد المصممين على تحقيق هدفين في آن واحد ، أولهما ربح الوقت بكتابة أكواد أقل ، ثانيهما إنجاز تصاميم متوافقة مع الشاشات والمتصفحات بكل سهولة ، هذا الإطار يسمى bootstrap .
في هذه المقالة المتجددة سننشر كافة فيديوهات هذه الدورة ، حلقة تلو الحلقة سنضيفها على موقع Youtube ثم نضعها في هذه التدوينة لتكون مرجعا لمن أراد متابعة الكورس ، يمكنك وضع رابط التدوينة في المفضلة حتى تعود إليه مرة أخرى بكل سهولة .
فماهو البوتستراب ؟
هو إطار عمل يحتوي على ملفات css و javascript أنشأه لأول مرة مطورو موقع Twitter ومنذ ذلك الحين وهو في تطور مستمر ، آخر إصداراته حاليا 5.2.1 ، تم إنشاؤه لحل كل الصعوبات التي تواجه المصممين ، نحن في هذه الدورة سنبدأ من البوتستراب 3 وتحديدا الإصدار 3.4.1 وفي آخر الدورة سنشير إلى أهم التحديثات التي جاء بها البوتستراب 5.
ملف css التابع للبوتستراب به مجموعة من الكلاسات الجاهزة التي يكفي إعطاء إحداها لعنصر من عناصر الصفحة لتحقيق الغرض دون الحاجة لكتابة كل شيء لذا نكتب أكواد css أقل مما كنا نكتبه في الماضي.
ملف javascript يحتوى هو الآخر على أكواد جاهزة تساعدك على عمل سلايدشو مثلا وعمل أحداث في الصفحة واستخدام أيقونات من النوع font دون الحاجة إلى كتابة أي كود جافاسكريبت نهائيا .
رابط تحميل ملفات البوتستراب
رابط تحميل ملف jQuery
في الدرس الأول من هذه الدورة شرحنا ماهية البوتستراب ، وكيفية تحميل ملفاته واستدعائها وإعداد بيئة العمل :
الدرس الأول
في الدرس الثاني من هذه الدورة شرحنا الفرق بين الكلاس container و الكلاس container-fluid :
الدرس الثاني
في الدرس الثالث شرحنا نظام الأعمدة وتقسيم الشاشات عرضا وما يسمى ب Grid System :
الدرس الثالث
في الدرس الرابع استكملنا شرح نظام الأعمدة Grid System .
الدرس الرابع
في الدرس الخامس شرحنا كيفية التعامل مع النصوص وتنسيقها في البوتستراب :
الدرس الخامس
في الدرس السادس شرحنا كيفية التعامل مع الجداول في البوتستراب وتنسيقاتها :
في الدرس السابع تطرقنا للصور في البوتستراب والكلاسات المتحكمة فيها ، وشرحنا كيفية عمل معرض صور :
الدرس السابع
في الدرس الثامن شرحنا كيفية عمل الأزرار Buttons بمختلف الألوان :
الدرس الثامن
الدرس التاسع
الدرس العاشر
في الدرس الحادي عشر تطرقنا إلى مختلف أنواع الفورمز في البوتستراب والكلاسات التي تأخذها الحقول المختلفة .
الدرس الحادي عشر
في الدرس الثاني عشر قمنا بعمل قائمة نافبار Navbar احترافية ومتوافقة مع الموبايل ومنسقة بشكل جميل :
في الدرس الثالث عشر تطرقنا إلى كيفية وضع معرض صور متحركة في تصميمنا ، أو ما يصطلح عليه بالسلايدشو Slideshow أو Carousel .
الدرس الثالث عشر
في الدرس الرابع عشر قمنا بعمل تطبيق على ما تعلمناه سابقا وعمل أول قالب بسيط ومتجاوب.
الدرس الرابع عشر
إنتهت هذه الدورة وسنعود بإذن الله في دروس قادمة من بينها تصميم قالب بالبوتستراب .
