انتقل إلى الدروس
ابدأ رحلتك
LEARN BY BUILDING
شروحات كلوز تاجمبتدئ

Bootstrap 5تعلّم بوتستراب 5.

افهم الأساس. وابنِ عليه.

دروس مرتّبة، شرح واضح، وخطوات صغيرة تصنع فرقًا. ابدأ من الأساسيات، وتقدّم في تعلّم بوتستراب 5 على مهلك.

ابدأ التعلّم مجانًااستكشف المنهج

محتوى مجاني بالكاملتعلّم على مهلك

دروس مرتّبة
57
فصل تعليمي
09
لغة الشرح
عربي
مشاهدة للمادة
96,532

البداية اللي تبني عليها

خطوتك الجاية في بوتستراب 5

تركز مادة Bootstrap على تعلم كيفية إنشاء واجهات مستخدم سلسة ومرنة لمواقع الويب، وذلك من خلال المكونات والأدوات المساعدة في بناء صفحات الويب بسرعة وسهولة؛ وأهم ما يميز إطار العمل Bootstrap هو قدرته على إخراج تصميم متجاوب وجذاب يعمل على مختلف أحجام الشاشات.

من المعرفة للتطبيق

ماذا ستتعلّم في بوتستراب 5؟

مهارات بتكبر مع كل درس
  • ستتعلم كيفية استخدام إطار العمل Bootstrap لتطوير مواقع وتطبيقات الويب بسرعة وسهولة.
  • ستتعلم كيفية استخدام العناصر والمكونات المتاحة في Bootstrap لتحسين تجربة المستخدم.
  • ستتعلم تصميم واجهات متجاوبة باستخدام Bootstrap لضمان التوافق مع مختلف الأجهزة.
  • ستتعلم كيفية استخدام نظام الشبكة في Bootstrap لتنسيق وتنظيم صفحات الويب.
  • ستتعلم كيفية تخصيص Bootstrap حسب احتياجات التصميمات المختلفة.

جهّز نفسك

قبل ما تبدأ

  • الالتزام بالمهام المطلوبة.
  • إتمام مادة JavaScript بشكل كامل.

خطوتك لقدّام

هدفك بعد المادة

  • تقليل الوقت اللازم لتصميم الواجهات الأمامية لمواقع وتطبيقات الويب.
  • القدرة على تصميم الواجهات الأمامية لمواقع وتطبيقات الويب بشكل أكثر احترافية.
  • القدرة على استخدام أدوات ومكونات إطار العمل Bootstrap في تطوير مواقع وتطبيقات الويب.
  • القدرة على تصميم صفحات ويب متجاوبة ومتلائمة مع جميع الشاشات والأجهزة (موبايل، كمبيوتر، تابلت).

خريطة تعلّمك

محتوى المادة

ابدأ بالترتيب، أو اختَر الدرس اللي محتاجه.

9فصل 57درس

01

تأسيس بوتستراب 5

4 دروس
  1. 01 Bootstrap 5 Introductionمقدمة في بوتستراب 5 ابدأ الدرس
  2. 02 Bootstrap 5 Setup and Starter Templateتثبيت بوتستراب 5 وقالب البداية ابدأ الدرس
  3. 03 Bootstrap 5 RTL Supportدعم اللغة العربية RTL في بوتستراب 5 ابدأ الدرس
  4. 04 Bootstrap 5 Reboot and Global Stylesالتطبيع القياسي Reboot في بوتستراب 5 ابدأ الدرس
02

نظام التخطيط والشبكة

6 دروس
  1. 05 Bootstrap 5 Breakpointsنقاط التوقف المتجاوبة في بوتستراب 5 ابدأ الدرس
  2. 06 Bootstrap 5 Containersالحاويات في بوتستراب 5 ابدأ الدرس
  3. 07 Bootstrap 5 Grid Systemالنظام الشبكي في بوتستراب 5 ابدأ الدرس
  4. 08 Bootstrap 5 Grid Columnsمحاذاة وترتيب الأعمدة في بوتستراب 5 ابدأ الدرس
  5. 09 Bootstrap 5 Guttersالفراغات الفاصلة Gutters في بوتستراب 5 ابدأ الدرس
  6. 10 Bootstrap 5 CSS Gridشبكة CSS Grid في بوتستراب 5 ابدأ الدرس
03

المحتوى والعناصر الأساسية

4 دروس
  1. 11 Bootstrap 5 Typographyتنسيق النصوص والخطوط في بوتستراب 5 ابدأ الدرس
  2. 12 Bootstrap 5 Images and Figuresالصور والأشكال التوضيحية في بوتستراب 5 ابدأ الدرس
  3. 13 Bootstrap 5 Tablesتنسيق الجداول في بوتستراب 5 ابدأ الدرس
  4. 14 Bootstrap 5 Iconsمكتبة الأيقونات في بوتستراب 5 ابدأ الدرس
04

الأدوات المساعدة Utilities

7 دروس
  1. 15 Bootstrap 5 Colors and Backgroundsالألوان والخلفيات في بوتستراب 5 ابدأ الدرس
  2. 16 Bootstrap 5 Spacing Utilitiesأدوات التباعد والهوامش في بوتستراب 5 ابدأ الدرس
  3. 17 Bootstrap 5 Borders Sizing and Shadowsالحدود والأبعاد والظلال في بوتستراب 5 ابدأ الدرس
  4. 18 Bootstrap 5 Display Position and Overflowالعرض والتموضع والفيضان في بوتستراب 5 ابدأ الدرس
  5. 19 Bootstrap 5 Flexbox and Stacksالصندوق المرن والتكديس في بوتستراب 5 ابدأ الدرس
  6. 20 Bootstrap 5 Text and Link Utilitiesأدوات النصوص والروابط في بوتستراب 5 ابدأ الدرس
  7. 21 Bootstrap 5 Helpers and Accessibilityالمساعدات البصرية والإتاحة في بوتستراب 5 ابدأ الدرس
05

مكوّنات الواجهة الأساسية

9 دروس
  1. 22 Bootstrap 5 Buttons and Close Buttonالأزرار وزر الإغلاق في بوتستراب 5 ابدأ الدرس
  2. 23 Bootstrap 5 Button Groupsمجموعات الأزرار في بوتستراب 5 ابدأ الدرس
  3. 24 Bootstrap 5 Badgesالشارات في بوتستراب 5 ابدأ الدرس
  4. 25 Bootstrap 5 Alertsرسائل التنبيه في بوتستراب 5 ابدأ الدرس
  5. 26 Bootstrap 5 Cardsالبطاقات في بوتستراب 5 ابدأ الدرس
  6. 27 Bootstrap 5 List Groupsمجموعات القوائم في بوتستراب 5 ابدأ الدرس
  7. 28 Bootstrap 5 Progress Barsأشرطة التقدم في بوتستراب 5 ابدأ الدرس
  8. 29 Bootstrap 5 Spinnersمؤشرات التحميل في بوتستراب 5 ابدأ الدرس
  9. 30 Bootstrap 5 Placeholdersالعناصر النائبة للتحميل في بوتستراب 5 ابدأ الدرس
06

النماذج وحقول الإدخال

8 دروس
  1. 31 Bootstrap 5 Form Controlsحقول الإدخال الأساسية في بوتستراب 5 ابدأ الدرس
  2. 32 Bootstrap 5 Select Menusقوائم الاختيار المنسدلة في بوتستراب 5 ابدأ الدرس
  3. 33 Bootstrap 5 Checks Radios and Switchesمربعات الاختيار والمفاتيح في بوتستراب 5 ابدأ الدرس
  4. 34 Bootstrap 5 Range Inputsشريط النطاق الرقمي في بوتستراب 5 ابدأ الدرس
  5. 35 Bootstrap 5 Input Groupsمجموعات الإدخال في بوتستراب 5 ابدأ الدرس
  6. 36 Bootstrap 5 Floating Labelsالتسميات العائمة في بوتستراب 5 ابدأ الدرس
  7. 37 Bootstrap 5 Form Layoutsتخطيطات النماذج في بوتستراب 5 ابدأ الدرس
  8. 38 Bootstrap 5 Form Validationالتحقق من صحة النماذج في بوتستراب 5 ابدأ الدرس
07

المكوّنات التفاعلية

9 دروس
  1. 39 Bootstrap 5 Collapseالطي والإظهار Collapse في بوتستراب 5 ابدأ الدرس
  2. 40 Bootstrap 5 Accordionالقوائم المطوية Accordion في بوتستراب 5 ابدأ الدرس
  3. 41 Bootstrap 5 Dropdownsالقوائم المنسدلة في بوتستراب 5 ابدأ الدرس
  4. 42 Bootstrap 5 Offcanvasاللوحات الجانبية المنزلقة في بوتستراب 5 ابدأ الدرس
  5. 43 Bootstrap 5 Modalsالنوافذ الحوارية Modal في بوتستراب 5 ابدأ الدرس
  6. 44 Bootstrap 5 Carouselعارض الشرائح Carousel في بوتستراب 5 ابدأ الدرس
  7. 45 Bootstrap 5 Tooltipsتلميحات الأدوات Tooltips في بوتستراب 5 ابدأ الدرس
  8. 46 Bootstrap 5 Popoversالبالونات المنبثقة Popovers في بوتستراب 5 ابدأ الدرس
  9. 47 Bootstrap 5 Toastsالإشعارات العائمة Toasts في بوتستراب 5 ابدأ الدرس
08

أنظمة التنقل والقوائم

6 دروس
  1. 48 Bootstrap 5 Breadcrumbsمسار التصفح Breadcrumbs في بوتستراب 5 ابدأ الدرس
  2. 49 Bootstrap 5 Paginationترقيم الصفحات في بوتستراب 5 ابدأ الدرس
  3. 50 Bootstrap 5 Navsقوائم التنقل Navs في بوتستراب 5 ابدأ الدرس
  4. 51 Bootstrap 5 Tabs and Pillsالتبويبات والأزرار الملاحية في بوتستراب 5 ابدأ الدرس
  5. 52 Bootstrap 5 Navbarشريط التنقل Navbar في بوتستراب 5 ابدأ الدرس
  6. 53 Bootstrap 5 Scrollspyتتبع التمرير Scrollspy في بوتستراب 5 ابدأ الدرس
09

التخصيص والأيقونات والسمات

4 دروس
  1. 54 Bootstrap 5 Color Modes and Dark Themeأوضاع الألوان والوضع الداكن في بوتستراب 5 ابدأ الدرس
  2. 55 Bootstrap 5 CSS Variablesمتغيرات CSS في بوتستراب 5 ابدأ الدرس
  3. 56 Bootstrap 5 Sass Customizationتخصيص Sass والخيارات في بوتستراب 5 ابدأ الدرس
  4. 57 Bootstrap 5 Utilities API and Optimizationواجهة Utilities API وتحسين الأداء في بوتستراب 5 ابدأ الدرس

خطوة صغيرة كل يوم. فرق كبير مع الوقت.

جاهز تبدأ؟

تعلّم بوتستراب 5 خطوة بخطوة من أول درس.

ابدأ بالدرس الأول المتاح وطبّق كل فكرة بنفسك، وبعدها كمّل المسار في معسكرات كلوز تاج.

تعلّم الآن استكشف المعسكرات