ورشة التعلم

دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap

  • 1- ما هو Bootstrap وكيف يمكن استخدامه؟

    1

  • container and rows and row cols

    2

  • Breakpoint and row cols breakpoints

    3

  • Bootstrap utilities

    4

  • visibility, disable elements

    5

  • flex direction

    6

  • flex columns and responsive

    7

  • Vertical Alignment Elements

    8

  • Horizental Alignment Elements

    9

  • Revise alignment and study Items ordering and offset

    10

  • Margin and Padding and Gutters

    11

اختبارات ناجحة

للإعادة

معلقة

لمشاهدة نبذة عن محتوى الدرس 1- ما هو Bootstrap وكيف يمكن استخدامه؟
1- ما هو Bootstrap وكيف يمكن استخدامه؟ Bootstrap هو إطار عمل (Framework) مجاني ومفتوح المصدر يستخدم لتصميم صفحات الويب بسرعة وسهولة. يعتمد على HTML | CSS | JavaScript ويوفر مكوّنات جاهزة مثل الأزرار | الجداول | النماذج | القوائم | الشبكات (Grid System)، مما يساعد على بناء تصاميم متجاوبة تعمل على جميع الشاشات. كيفية استخدامه: إضافة Bootstrap للمشروع إما عبر CDN بإضافة روابط الجاهزة في <head> و<body>. أو تحميل الملفات واستخدامها محليًا. استخدام نظام الشبكة (Grid System) تقسيم الصفحة إلى صفوف row وأعمدة col لتنسيق المحتوى بسهولة. استخدام العناصر الجاهزة مثل: أزرار btn، بطاقات card، قوائم تنقل navbar. التعديل على التصميم يمكن تخصيص Bootstrap عبر كتابة CSS إضافي فوق الإعدادات…
لمشاهدة نبذة عن محتوى الدرس 1- ما هو Bootstrap وكيف يمكن استخدامه؟
1- ما هو Bootstrap وكيف يمكن استخدامه؟ Bootstrap هو إطار عمل (Framework) مجاني ومفتوح المصدر يستخدم لتصميم صفحات الويب بسرعة وسهولة. يعتمد على HTML | CSS | JavaScript ويوفر مكوّنات جاهزة مثل الأزرار | الجداول | النماذج | القوائم | الشبكات (Grid System)، مما يساعد على بناء تصاميم متجاوبة تعمل على جميع الشاشات. كيفية استخدامه: إضافة Bootstrap للمشروع إما عبر CDN بإضافة روابط الجاهزة في <head> و<body>. أو تحميل الملفات واستخدامها محليًا. استخدام نظام الشبكة (Grid System) تقسيم الصفحة إلى صفوف row وأعمدة col لتنسيق المحتوى بسهولة. استخدام العناصر الجاهزة مثل: أزرار btn، بطاقات card، قوائم تنقل navbar. التعديل على التصميم يمكن تخصيص Bootstrap عبر كتابة CSS إضافي فوق الإعدادات…
has been added to the cart. View Cart