Bootstrap عبارة عن إطار عمل HTML /CSS مُتجاوب. يحتوي Bootstrap على الأدوات والعناصر الأساسية التي ستحتاجها في أغلب مشاريعك مثل: الجداول والأزرار وأدوات النصوص والنماذج، والثانوية مثل: العنونة Heading وعناصر التنقل، والخلفيات، وغيرها من الأدوات. ويوفرBootstrap الكثير من الوقت والجهد على المصممين أثناء تصميم الصفحات، فكل ما يحتاجه المصمم هو معرفة أسماء الأصناف Classes التي سيتعامل معها لإعطاء التنسيق المناسب للعنصر الذي يستخدمه. بالإضافة إلى ذلك فإطار العمل Bootstrap يجعل التصميم مُناسبًا ومتجاوبًا مع كافة أحجام الشاشات المُختلفة.

 

مميزات Bootstrap

  • صميم متجاوب Responsive ومتوافق مع كافة المتصفحات، فهذه الميزة تجعل الموقع الذي تقوم بإنشائه يظهر بشكل ملائم لكافة الأجهزة المختلفة في أحجامها وبنفس التنسيق والمظهر الذي تضعه

  • سهل الاستخدام وتنسيق ثابت Consistent

  • أي شخص لديه بعض الأساسيات في HTML وCSS يستطيع استخدام إطار العمل هذا وبسهولة

  • إطار العمل Bootstrap مفتوح المصدر بإمكانك الاطلاع على مكوناته ومحتوياته.

منهج الدورة التدريبية

مقدمة
Introduction تفاصيل مجانية 00:06:18
مقدمة عن البوتستراب و كل ما يخصه و ما يقدمه لك في التصميم و ما هي مميزاته و فوائده
Include It تفاصيل مجانية 00:14:16
شرح كيفية استدعاء البوتستراب في تصميمك لبدء العمل عليه
Start Coding تفاصيل مجانية 00:11:16
شرح بدأ التصميم و استدعاء المكتبات المفيدة للتصميم و نبذة عنها و عن الكواد التي يحتاجها البوتستراب
Grid System Intro Part 1 تفاصيل مجانية 00:18:09
شرح نظام الجريد الخاص بالبوتستراب المقدمة أول جزء
Grid System Intro Part 2 تفاصيل مجانية 00:11:22
شرح نظام الجريد الخاص بالبوتستراب المقدمة ثاني جزء
Grid System Hidden / Visible تفاصيل مجانية 00:12:12
شرح كلاسات الاظهار و الاخفاء
Grid System Column Reset تفاصيل مجانية 00:09:00
شرح كيفية عمل Clear لل Float الخاص بأعمدة ال Grid
Grid System Column Offset تفاصيل مجانية 00:14:16
شرح عمل المسافات بين أعمدة الجريد في التصايميم المتجاوبة
Grid System Column Ordering تفاصيل مجانية 00:14:04
شرح كيفية ترتيب أعمدة الجريد في التصميم
Grid System Column Nesting تفاصيل مجانية 00:09:24
شرح كيفية عمل جريد فرعي من الجريد الرئيسي
Navbar Part 1 تفاصيل مجانية 00:27:12
شرح الجزء الأول من تصميم النافبار
Navbar Part 2 تفاصيل مجانية 00:17:30
شرح الجزء الثاني من تصميم النافبار
Carousel Part 1 تفاصيل مجانية 00:09:22
شرح إضافة ال Carousel Slideshow الخاص بالبوتستراب الجزء الأول
Carousel Part 2 تفاصيل مجانية 00:17:09
شرح إضافة ال Carousel Slideshow الخاص بالبوتستراب الجزء الثاني
Section About تفاصيل مجانية 00:14:14
شرح عمل اول قسم في القالب و هو قسم نبذة عن القالب و استخدام بعض خواص البوتستراب
Section Features تفاصيل مجانية 00:16:22
Carousel Other Uses Testimonials Part 1 تفاصيل مجانية 00:15:19
شرح استخدام ال Carousel بطريقة اخرى و أفكار اخرى الجزء الأول
Carousel Other Uses Testimonials Part 2 تفاصيل مجانية 00:08:21
شرح استخدام ال Carousel بطريقة اخرى و أفكار اخرى الجزء الثاني
Carousel Other Uses Testimonials Part 3 تفاصيل مجانية 00:13:31
شرح استخدام ال Carousel بطريقة اخرى و أفكار اخرى الجزء الثالث
Section Table Price Part 1 تفاصيل مجانية 00:15:08
شرح كيفية عمل جدول الأسعار Price Table الجزء الأول
Section Price Table Part 2 تفاصيل مجانية 00:12:05
شرح كيفية عمل جدول الأسعار Price Table الجزء الثاني
Section Our Team Part 1 تفاصيل مجانية 00:15:24
شرح كيفية عمل القسم الخاص بفريقنا و استخدام خلفية لل Section
Section Our Team Part 2 تفاصيل مجانية 00:09:17
شرح تصميم قسم فريقنا الجزء الثاني و استخدام ال Img-Circle
Adding Font Awesome تفاصيل مجانية 00:12:06
شرح إضافة مكتبة Font Awesome للتصميم مع ال Bootstrap
Section Subscribe تفاصيل مجانية 00:11:16
كيفية عمل تصميم الفورم البريدي للإشتراك Subscribe
Section Statistics تفاصيل مجانية 00:23:30
شرح عمل Section الاحصائيات
Retouch 1 Section Backgrounds تفاصيل مجانية 00:03:25
Section Our Skills تفاصيل مجانية 00:24:24
شرح كيفية عمل القسم الخاص بمهارتنا Our Skills سوف يتم استخدام ال Progress Bar الخاص بال Bootstrap
Section Contact Us تفاصيل مجانية 00:20:31
عمل قسم راسلنا Contact Us سوف يتم استخدام امثلة على ال Form و ال Textarea و بعض التقنيات الاخرى
Section Our Clients تفاصيل مجانية 00:12:06
شرح عمل القسم الخاص بعملائنا
Section Ultimate Footer Part 1 تفاصيل مجانية 00:16:30
شرح تصميم الفوتر الجزء الأول
Section Ultimate Footer Part 2 تفاصيل مجانية 00:16:16
شرح تصميم الفوتر الجزء الثاني
Using Google Fonts تفاصيل مجانية 00:06:20
شرح استخدام خطوط جوجل في التصميم
Media Query تفاصيل مجانية 00:30:30
شرح كل ما يخص الميديا كويري و كيفية عمل استايل لكل شاشة و عمل الرتوش الخاصة بالتصميم المتجاوب
Retouch 2 Media Query Fixes تفاصيل مجانية 00:09:24
شرح إصلاح بعض الأخطاء و إضافة بعض الرتوش باستخدام الميديا كويريى
Section Option Box تفاصيل مجانية 00:16:30
شرح كيفية عمل صندوق الخيارات لتغيير الالوان و الخطوط الخاصة بالاستايل و جميع الخيارات التي تريد وضعها
Make Style For Every Colour تفاصيل مجانية 00:24:12
شرح كيفية عمل ملف استايل لكل لون من الوان التصميم و فصل الوان التصميم في ملفات منفردة
Change Colour From Option Box تفاصيل مجانية 00:15:16
شرح تغيير الوان التصميم من صندوق الخيارات الخاصة باعدادات التصميم
Create The Loading Screen تفاصيل مجانية 00:20:07
شرح كيفية عمل شاشة التحميل التي تظهر قبل تحميل الموقع كاملا
Create Scroll To Top Button تفاصيل مجانية 00:16:32
شرح كيفية عمل زر الذهاب للأعلى بدون Plugins و من الصفر
Retouch 3 Carousel Image Fix تفاصيل مجانية 00:05:13
شرح تصليح الصور في السلايدر و كيفية جعل الصور تملأ الشاشة كاملة و بعض النصائح الخاصة بالصور
Retouch 4 Clean Css File تفاصيل مجانية 00:22:00
شرح تنظيف ملف ال Css و عمل جروب للكلاسات التي تحتوي على نفس الخواص لتوفير السطور و لسهولة التعديل
Retouch 5 Clean Js File تفاصيل مجانية 00:10:24
شرح تنظيف ملف الجافاسكريبت و اصلاح الأخطاء الموجودة فيه و كتابته بطريقة صحيحة مع تصليح بسيط يخص ال Loading Screen و استخدام الميزة الجميلة في برنامج براكيتس لاصلاح اخطاء ال Jslint Errrors
Using Hover Css تفاصيل مجانية 00:09:30
شرح استخدام مكتبة Hover.Css الرائعة لعمل تاثيرات هوفر على الروابط و العناصر بشكل جميل
Improve Speed And Performance تفاصيل مجانية 00:24:03
شرح تحسين أداء التصميم و سرعته وجودة الصور عن طريق موقع Gtmetrix
Validate Your Html File تفاصيل مجانية 00:09:30
شرح جعل صفحتك متوافقة مع المعايير القياسية لمنظمة ال W3
Using WOW Js تفاصيل مجانية 00:33:00
شرح استخدام مكتبة Wow.js لعمل انيميشن رائع في موقعك
Using Nice Scroll تفاصيل مجانية 00:05:24
شرح استخدام مكتبة Nice Scroll لعمل سكرول بشكل انسيابي و تنسيق السكرول بار
Make Bootstrap RTL تفاصيل مجانية 00:12:22
شرح تغيير اتجاه البوتستراب و جميع الطرق لتغيير اتجاه الملف
Deal With Links And Pages تفاصيل مجانية 00:13:12
التعامل مع الروابط و الصفحات الداخلية و ملفات ال Css الخاصة بها
Create About Us Page تفاصيل مجانية 00:31:10
شرح كيفة تصميم صفحة النبذة كاملة
Create FAQ Page تفاصيل مجانية 00:28:25
شرح تصميم صفحة الاسئلة و الأجوبة

تقييم الدورة

التقيم

متوسط التقيم
  • 5 نجوم0
  • 4 نجوم0
  • 3 نجوم0
  • 2 نجوم0
  • 1 نجوم0

لا توجد تقييمات لهذه الدورة

3 الطلاب المسجلين

بحث متقدم

Loading...
X