Bootstrap

محتوى التوثيق

الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.

1. 01

   الفصل 1

   البداية

   • 1مقدمة إلى Bootstrapتعرّف على Bootstrap، أشهر إطار عمل CSS في العالم، وكيف تساعدك أصنافه الجاهزة على بناء صفحات جميلة ومتجاوبة بسرعة.
   • 2البدء مع Bootstrapأضف Bootstrap إلى صفحتك بسطرين عبر CDN أو ثبّته عبر npm، وافهم دور كل جزء في قالب البداية.
   • 3الحاويات (Containers)الحاوية هي أبسط عناصر التخطيط في Bootstrap: تعرّف على .container و.container-fluid والحاويات المتجاوبة، ومتى تستخدم كلًّا منها.
2. 02

   الفصل 2

   التخطيط

   • 4أساسيات نظام الشبكة (Grid)افهم نظام الشبكة ذا الأعمدة الاثني عشر: الحاوية والصف والأعمدة، والأعمدة المتساوية، والأعمدة محددة الحجم، وتداخل الأعمدة.
   • 5الشبكة المتجاوبةاجعل تخطيطك يتغير مع حجم الشاشة: نقاط التحول sm وmd وlg وxl وxxl، والأعمدة التلقائية، والإزاحة، والترتيب، والمسافات بين الأعمدة (Gutters).
   • 6أدوات المسافات (Spacing)تحكّم في الهامش الخارجي margin والحشو الداخلي padding بأصناف قصيرة مثل mt-3 وpx-4، وتعلّم التوسيط بـ mx-auto والمسافات المتجاوبة وgap.
   • 7أدوات العرض وFlexboxأظهر العناصر وأخفها حسب حجم الشاشة بأصناف d-*، ورتّب المحتوى بأصناف Flexbox مثل d-flex وjustify-content-between وalign-items-center.
   • 8دعم العربية والاتجاه RTLابنِ مواقع عربية تُعرض من اليمين إلى اليسار باستخدام dir="rtl" وlang="ar" وملف bootstrap.rtl.min.css، وافهم لماذا تعتمد أصناف Bootstrap 5 على البداية والنهاية.
3. 03

   الفصل 3

   المحتوى

   • 9الطباعة وتنسيق النصوصنسّق النصوص بأصناف Bootstrap: العناوين وأصناف .h1 إلى .h6، والعناوين الكبيرة display، والفقرة البارزة lead، وأدوات المحاذاة والوزن والحجم، والاقتباسات والقوائم.
   • 10الألوان والخلفياتاستخدم ألوان Bootstrap الدلالية في النصوص والخلفيات (text-* وbg-* وtext-bg-*)، والألوان الهادئة في الإصدار 5.3، والحدود والظلال، والوضع الداكن بالسمة data-bs-theme.
   • 11الصوراجعل الصور متجاوبة بالصنف .img-fluid، وأضف لها الزوايا المستديرة والإطارات، ووسّطها، وأرفق بها تعليقًا، واضبط نسب الفيديو والصور بالأصناف ratio وobject-fit.
   • 12الجداولحوّل جداول HTML إلى جداول أنيقة بالصنف .table، وأضف لها التخطيط المتناوب والتمييز عند التمرير والحدود والألوان، واجعلها متجاوبة بالتمرير الأفقي.
4. 04

   الفصل 4

   المكوّنات

   • 13الأزرار ومجموعات الأزرارأنشئ أزرارًا بألوان وأحجام وحالات مختلفة بالصنف .btn، واجعلها بعرض كامل، واجمعها في مجموعات وأشرطة أدوات وأزرار تبديل.
   • 14التنبيهات والشاراتاعرض رسائل النجاح والخطأ والتحذير بمكوّن التنبيه (Alert)، واجعله قابلًا للإغلاق، واستخدم الشارات (Badges) للعدادات والتسميات الصغيرة.
   • 15البطاقات (Cards)البطاقة صندوق مرن لعرض المحتوى: صورة وعنوان ونص وأزرار ورأس وتذييل. تعلّم بناءها، وترتيبها في شبكة متساوية الارتفاع، وإنشاء البطاقة الأفقية.
   • 16شريط التنقل (Navbar)ابنِ شريط تنقل متجاوبًا يضم الشعار والروابط وزر القائمة على الهاتف والقوائم المنسدلة ونموذج البحث، وتعلّم تلوينه وتثبيته أعلى الصفحة.
   • 17النماذج (Forms)نسّق حقول النماذج بأصناف Bootstrap مثل form-control وform-select وخانات الاختيار والمفاتيح، ورتّبها بالشبكة، واستخدم العناوين العائمة ومجموعات الإدخال.
   • 18التحقق من صحة النماذجاعرض نتائج التحقق بألوان ورسائل واضحة: الصنف was-validated، والرسائل invalid-feedback وvalid-feedback، وسمات HTML مثل required، وكود JavaScript يمنع إرسال البيانات غير الصالحة، والصنفان is-invalid وis-valid.
   • 19النوافذ المنبثقة (Modal)اعرض نافذة حوار فوق الصفحة لتأكيد إجراء أو إظهار نموذج: بنية المكوّن، وفتحه وإغلاقه بسمات البيانات، والأحجام والتوسيط والتمرير، والخلفية الثابتة، وأحداث JavaScript.
   • 20القوائم المنسدلة (Dropdowns)أنشئ قوائم منسدلة تُفتح بالنقر: بنيتها، وعناوينها وفواصلها، والأزرار المقسومة، والاتجاهات والمحاذاة، والقائمة الداكنة، والتحكم في طريقة إغلاقها.
   • 21الطي والأكورديونأظهر المحتوى وأخفه بمكوّن الطي (Collapse) والأزرار التي تتحكم فيه، ثم ابنِ أكورديون للأسئلة الشائعة يفتح قسمًا واحدًا في كل مرة أو عدة أقسام.
   • 22عارض الشرائح (Carousel)اعرض الصور أو الشرائح واحدة تلو الأخرى بمكوّن Carousel: البنية والشريحة النشطة، وأزرار التنقل والمؤشرات والتعليقات، والانتقال بالتلاشي والتشغيل التلقائي.
   • 23مجموعات القوائم والترقيم ومسار التنقلاعرض القوائم بأسلوب أنيق بمكوّن List group، وقسّم المحتوى الطويل إلى صفحات بمكوّن Pagination، وأرِ المستخدم موقعه داخل الموقع بمسار التنقل Breadcrumb.
   • 24مؤشرات التحميل والإشعارات (Toasts)أخبر المستخدم بما يحدث: مؤشرات التحميل (Spinners)، وأشرطة التقدم (Progress)، والإشعارات المنبثقة (Toasts)، والتلميحات (Tooltips) التي تحتاج إلى تفعيل بـ JavaScript.
5. 05

   الفصل 5

   التخصيص والمشروع النهائي

   • 25تخصيص Bootstrapاجعل موقعك مميزًا لا يشبه غيره: أضف CSS خاصة بك بعد Bootstrap، وغيّر متغيرات CSS للصفحة والمكوّنات، وبدّل الوضع الداكن بزر، وتعرّف على التخصيص العميق عبر Sass.
   • 26مشروع: صفحة هبوط كاملةاجمع كل ما تعلمته في مشروع حقيقي: صفحة هبوط متجاوبة لأكاديمية برمجة، فيها شريط تنقل وقسم ترحيبي ومزايا وأسعار وأسئلة شائعة ونموذج اشتراك وتذييل.