بوتستراب بالإنجليزية ( Bootstrap ) و كان يُسمّى سابقًا بـ ( Twitter Bootstrap ) و هو : مجموعة من الأدوات مفتوحة المصدر لإنشاء مواقع ويب مُذهلة بسرعة و فعالية، و هدفها توفير مكتبة واسعة و مرنة و موثّقة بشكل جيد للتصاميم " مكررة الإستعمال " المبنية على HTML & CSS & JS لتوفّر الوقت و الجهد .
يعد بوتستراب أشهر إطار عمل خاص بلغة css على الويب حيث هُناك أكثر من 4,000,000 ( 4 ملايين ) موقع يستخدم إطار العمل Bootstrap.
يمكنك تصميم موقع رائع بسهولة مثل هذا في نهاية الدورة :
في ماذا تستخدم Bootstrap؟
المدة | الدروس (86) |
---|---|
مقدمة الدورة -
مقدمة عن الدورة والمدرب والمحتوى وتعريف بـ Bootstrap
|
|
04:19 |
تعريف بالدورة و Bootstrap
لا يوجد وصف |
الحصول على بوتستراب والبدء بالتصميم +
بهذا القسم سنتعرف على كيفية الحصول على بوتستراب ومن ثم سنبدأ بداية سريعة لنعرف كيف يمكننا إدراجه واستخدامه في صفحاتنا
|
|
06:33 |
كيفية الحصول على بوتستراب
شاهد وصف الدرس
هنا سنأخذ جولة على بوتستراب وطريقة الحصول عليه من الموقع بطرق متعددة |
03:21 |
البداية السريعة وإنشاء الصفحة الأولى
هنا سنتعرف على كيفية البداية مع مكتبة بوتستراب داخل الصفحات |
المخطط الشبكة Bootstrap Grid +
مخطط بوتستراب يعتبر أحد أهم الخصائص المتوفرة فيها حيث يعتبر المسؤول الأول عن التصاميم المرنة وتوافقها مع جميع أحجام الشاشات
|
|
03:31 |
نقاط التوقف Breakpoints
يوجد نقاط يتوقف عندها التمدد ويتغير شكل التصميم وهي ما سنتعلمه الآن وتسمى breakpints |
03:40 |
الحاويات و المخططات containers & grids
الحاوية هي خاصية تم تصميمها لتقوم باحتواء عناصر الصفحة ويجب علينا استخدامها مع المخططات |
05:23 |
الأعمدة داخل المخططات
وصلنا الآن لتقسيم المحتوى على شكل أعمدة |
05:41 |
تغيير احجام الأعمدة بناء على حجم الشاشة
سنتعلم الآن أهمية breakpoints وكيف يمكننا تغيير أحجام المخططات بناء على حجم الشاشة الحالي |
01:56 |
الحجم التلقائي للأعمدة
يمكننا ترك خيار التمدد تلقائيا للأعمدة بحيث تتمدد حسب محتواها |
01:43 |
تحديد عدد الأعمدة لكل صف تلقائيا
في حال صممت المخطط بشكل تلقائيا، يمكنك تحديد عدد الأعمدة لكل صف عن طريق اختصار في bootstrap |
05:26 |
محاذاة الأعمدة داخل الصفوف
نستطيع توزيع المحتوى عبر محاذاته داخل الصفوف وهذا ما سنتعلمه الآن |
05:07 |
التحكم بهوامش الصفوف gutters
توفر بوتستراب إمكانية تعديل الهوامش بين الأعمدة وتسمى gutters |
02:32 |
صفوف داخل صفوف اخرى!
جرعة إضافية
يمكنك استخدام صف داخل صف آخر لغرض توزيع المحتوى الخاص بك |
02:44 |
إزاحة الأعمدة offsetting
سنتعلم الآن كيف يمكننا إزاحة عمود عن مكانه الافتراضية في الصف |
تصميم المحتوى Content +
المحتوى داخل الصفحات له خصائص مسبقة التصميم في بوتستراب نستطيع استخدامها لتنسيقه وتصميمه بشكل أفضل
|
|
06:25 |
تصميم النصوص ودعم اللغة العربية
اللغة العربية والمحاذاة RTL و كيفية التعامل مع النصوص وتنسيقاتها الإضافية هو ماسنتعلم الآن |
02:35 |
تنسيق القوائم
القوائم في بوتستراب تحتوي على تصميم مسبق مثل أن تكون على السطر أو بدون تنسيق |
06:28 |
تنسيق الصور
الصور تحتاج إلى عناية خاصة! تعال نعتني فيها شوي |
الجداول Tables +
الجداول لها طريقة تعامل وتصميم مختلف في bootstrap وذلك من حيث الألوان والأحجام والتوافق مع أحجام الشاشات
|
|
05:17 |
الجداول وألوانها والتفاعل معها
هنا سنتعلم كيف تتعامل بوتسراب مع الجداول وماهي الألوان المتوفرة والتفاعلات معها |
01:21 |
إطارات واحجام الجداول
هنا سنرى كيف يمكن تغيير اشكال اطارات الجداول واحجامها |
01:20 |
محاذاة محتوى خلية الجدول
الخلية في الجدول يمكن تغيير محاذاتها الأفقي عبر بوتستراب |
02:08 |
الجداول المرنة Responsive Tables
الجدول قد تزيد عدد الأعمده به عن عرض الصفحة ويأتي هنا دور بوتستراب في جعلها مرنة |
النماذج Forms +
تسهل Bootstrap تصميم النماذج وتحسن من تجربة المستخدم أيضا لذلك سنتعلم خصائصها خلال هذا القسم من ناحية UI/UX
|
|
07:10 |
التصميم والتخطيط الأساسي للنماذج
هنا سنتعلم التخطيط والتصميم الأساسي لنماذج البيانات مابين الحقول والعناوين وكيفية ربطها |
03:49 |
خصائص الحقول وحقول إضافية أخرى
سنتعلم الآن اشكال الحقول عند اضافة خصائص لها مع أشكال إضافية لحقول أخرى |
02:05 |
قائمة الاختيار Form Select
لها شكل خاص (كلاسات خاصة) لسبب سنتعرف عليه الآن |
03:34 |
حقول checkbox & radio
يوجد هيكلة خاصة بالحقول من نوع checkbox و radio وتصاميم مخصصة سنتعلمها بهذا الدرس |
02:57 |
تحويل checkbox إلى switch وتعديل طريقة العرض
سنتعلم الآن كيف يمكننا تحويل checkboxes إلى switches وكيف يمكن تحويل طريقة العرض الافتراضية لهذه الحقول من stack إلى inline |
02:32 |
أزرار التفعيل Toggle Buttons
متعة جديدة وهي كيف يمكنك استبدال radios او checkbox بأزرار ذات تصميم مخصص |
04:29 |
مجموعات الحقول Input Groups
UX
تستطيع من خلال بوتستراب ضم الحقل مع إضافة أخرى تسمى addons بحيث يتكون لديك مجموعة تسهل تجربة المستخدم |
02:37 |
تعويم العناوين Floating Labels
نعم مثل ما قريت :) سنتعلم كيفية تعويم العناوين بحيث تتحرك للأعلى عند النقر عليها |
المكونات Components [الجزء الأول] +
توفر Bootstrap عدد كبير من المكونات (التصاميم المُعدة مسبقا) وهي components بحيث تسهل علينا طريقنا في تصميم المواقع من خلال استخدام خصائصها بشكل مباشر بدلا من تصميمها من الصفر
|
|
10:21 |
الأكورديون
نعم مثل ما قريتها بالضبط، الأكرديون Accordion هي آلة موسيقية تستخدمها في بوتستراب لكن بشكل مختلف |
02:41 |
التنبيهات أو التحذيرات
عنصر التنبيه مخصص للاشعارات والتنبيهات التي ترغب أن يراها المستخدم مع إمكانية إغلاقها |
07:32 |
الشارات
الشارة أو badge هو عنصر صغير يستخدم كملحق إضافي للمحتوى |
03:45 |
الأزرار واحجامها وأشكالها
يوجد عدد من التصاميم للأزرار سنتعلمها الآن |
02:30 |
مجموعات الأزرار
باستخدامك لكلاس btn-group ستتمكن من وضع عدد كبير من الأزرار في مجموعة ذات تصميم مميز |
05:09 |
بطاقات عرض المحتوى
البطاقات cards هي حاويات ذات تصميم مسبق بعناوين ومحتوى وربما صور |
المكونات Components [الجزء الثاني] +
استكمال لمكونات Bootstrap
|
|
06:28 |
شرائح العرض Carousel
سنتعلم الآن carousel وهو نظام لعرض شرائح باستخدام بوتستراب |
04:19 |
أزرار التحكم في عرض الشرائح
سنتعلم كيف يمكننا التحكم في الشرائح من خلال عرض أزرار (التالي و السابق) |
05:13 |
مؤشرات الشرائح indicators
المؤشرات موجودة أسفل كل شريحة عرض تبين لنا عدد الشرائح مع إمكانية تصفحها |
04:11 |
العناوين والنصوص على الشرائح
تدعم الشرائح إمكانية أضافة نص عليها كعنوان لها بكل شريحة لوحدها |
01:51 |
التوقيت والمؤثرات في الشرائح
وصلنا الآن لكيفية توقيت الشرائح بحيث يمكننا زيادة أو تقليل الوقت لكل شريحة مع إمكانية اختيار مؤثر آخر لها |
02:04 |
البدء التلقائي و خصائص اللمس في الشرائح
في الشاشات التي تدعم اللمس يمكننا تصفح الشرائح عبر التمرير من فوقها ويمكن تعطيل أو تشغيل خاصية البدء تلقائيا لها |
08:34 |
إخفاء وإظهار المحتوى collapse
يمكننا استخدام تأثير collapse من أجل إخفاء أو إظهار محتوى في الصفحة مع مؤثرات بصرية |
06:26 |
القوائم المنسدلة dropdowns
سنتعلم كيف نصنع قائمة منسدلة الآن |
02:12 |
تغيير موضع القائمة المنسدلة
يمكن تغيير مكان ظهور القائمة بالنسبة للمكان التي ظهرت منه عبر خصائص معدة مسبقا في بوتستراب |
02:59 |
تغيير سلوك الإغلاق التقائي للقوائم
القائمة لها سلوك افتراضي قد نرغب في تغييره وهو سلوك الإغلاق التلقائي لها |
06:42 |
النوافذ الداخلية Modals
النافذة الداخلية dialogs هي إمكانية إظهار نافذة داخل الصفحة ذاته |
02:54 |
تثبيت إغلاق Modal والتمرير للمحتوى
يمكننا فرض عدم إغلاق النافذة الداخلية إلا من خلال زر الإغلاق فقط وسنتعلم أيضا كيف نمكن خاصية تمرير المحتوى الداخلي |
01:56 |
التوسيط الأفقي في Modals
كما هو في العنوان :) |
المكونات Components [الجزء الثالث] +
تكملة لمكونات بوتستراب
|
|
07:25 |
قوائم الموقع Navbars
القوائم الرئيسية بالموقع وتسمى Navbar هي ماسنتعلمه بهذا الدرس |
04:25 |
أمكان القوائم Navbars
لا يوجد وصف |
05:43 |
التنقل Navs & Tabs
لا يوجد وصف |
07:32 |
ربط المحتوى بالقوائم وإظهارها عموديا
لا يوجد وصف |
05:00 |
القوائم العائمة Offcanvas
لا يوجد وصف |
02:41 |
سلوك التمرير وتعطيل الإغلاق في offcanvas
لا يوجد وصف |
04:02 |
أماكن الظهور والتصميم المرن في offcanvas
لا يوجد وصف |
05:48 |
التلميحات tooltips
التلميحات هي نصوص شرح قصيرة تظهر على المحتوى عند التمرير عليه |
06:19 |
الصناديق المنبثقة popovers
لا يوجد وصف |
04:42 |
عناصر الملء placeholders
لا يوجد وصف |
02:29 |
ملخص وبقية العناصر في bootstrap
لا يوجد وصف |
الأدوات المساعدة Helpers +
سندرس هنا الأدوات المساعدة في Bootstrap والتي تحتوي على عدد من الخصائص المسبقه مثل التعويم والتحكم في الأبعاد وتقليص النصوص وغيرها
|
|
01:42 |
تعويم العناصر float & clearfix
لا يوجد وصف |
03:00 |
خصائص الموضع position
لا يوجد وصف |
02:26 |
التحكم في الأبعاد ratio
لا يوجد وصف |
03:21 |
المجموعات stacks
لا يوجد وصف |
02:57 |
الروابط المتمددة stretched links
لا يوجد وصف |
02:48 |
اجتزاء النصوص truncate
لا يوجد وصف |
الملحقات Utilities +
الملحقات في بوتستراب هي خصائص تتمحور حول تشكيل العناصر والتحكم في عرضها وسندرس هنا خصائص العرض والاطارات والألوان وغيرها
|
|
07:55 |
ألوان الخلفيات والنصوص والروابط
لا يوجد وصف |
06:07 |
خصائص العرض والتصميم المرن
لا يوجد وصف |
06:29 |
الإطارات وأشكالها
لا يوجد وصف |
06:08 |
خاصية العرض flex
لا يوجد وصف |
03:17 |
التحكم في تمدد عناصر flex
لا يوجد وصف |
03:24 |
ترتيب عناصر flex
لا يوجد وصف |
03:34 |
التحكم في تفاعل المستخدم
لا يوجد وصف |
01:40 |
التحكم في ظل العناصر
لا يوجد وصف |
06:39 |
ضبط الأحجام
لا يوجد وصف |
05:43 |
تغيير المسافات في العناصر
لا يوجد وصف |
03:54 |
تنسيق النصوص - الجزء 1
لا يوجد وصف |
03:49 |
تنسيق النصوص - الجزء 2
لا يوجد وصف |
02:50 |
المحاذاة الأفقية
لا يوجد وصف |
01:15 |
خاصية الرؤية visibility
لا يوجد وصف |
مشروع الدورة +
سنقوم بهذا القسم ببناء مشروع من خلال ماتعلمناه في هذه الدورة
|
|
02:36 |
مقدمة المشروع
تمرين
هنا راح نشوف ايش راح نسوي ونخطط الصفحة بشكل أساسي |
05:05 |
ضبط قائمة الموقع
تمرين
لا يوجد وصف |
06:44 |
إعداد القسم التعريفي
تمرين
لا يوجد وصف |
09:37 |
تصميم قسم الخبرة
تمرين
لا يوجد وصف |
09:05 |
إعداد قسم التواصل
تمرين
لا يوجد وصف |
06:07 |
وضع اللمسات الأخيرة على المشروع
تمرين
لا يوجد وصف |
ملفات الدورة +
ستجد في هذا القسم جميع ملفات الدورة قابلة للتحميل
|
|
مقال |
تحميل ملفات الشرح
جرعة إضافية
هدية
هديتي لك، كل ما تم شرحه في الدروس السابقة محفوظ في هذا الملف |
مقال |
تحميل مشروع الدورة
جرعة إضافية
هدية
هنا هديتي لك مشروع الدورة قابل للتحميل |
عرض الكل + إخفاء الكل - |
تعلم بناء صفحات المواقع و التطبيقات مرنة و متوافقة مع جميع أحجام الشاشات من الصفر بإستخدام Bootstrap v5.
مدرب في فلكس كورسز وقائد فريق التطوير والبرمجة في هذا الموقع الرائع. إذا كنت ترغب بمعرفة المزيد عني يمكنك زيارة موقعي الشخصي.
المزيد ...