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 | |
شرح تصميم صفحة الاسئلة و الأجوبة |
تقييم الدورة
لا توجد تقييمات لهذه الدورة
3 الطلاب المسجلين