إطار Bootstrap 5

مقدمة إلى Bootstrap 5

12 دقيقة الدرس 1 من 40

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

ما هو Bootstrap؟

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

نقطة رئيسية: يلغي Bootstrap الحاجة إلى كتابة CSS معقدة من الصفر من خلال توفير مكونات جاهزة للاستخدام وأنماط تصميم متجاوبة تعمل عبر جميع المتصفحات والأجهزة الحديثة.

لماذا نستخدم Bootstrap؟

يقدم Bootstrap مزايا عديدة تجعله إطار العمل المفضل لملايين المطورين:

التصميم المتجاوب: نظام شبكة مدمج يعطي الأولوية للهاتف المحمول يضمن أن يبدو موقعك رائعًا على جميع الأجهزة
مكونات جاهزة: عشرات المكونات الجاهزة للاستخدام مثل أشرطة التنقل، البطاقات، النوافذ المنبثقة، والنماذج
الاتساق: لغة تصميم موحدة عبر مشروعك بالكامل
التوافق عبر المتصفحات: يعمل بسلاسة على جميع المتصفحات الحديثة
توثيق شامل: أدلة وأمثلة شاملة
مجتمع كبير: ملايين المطورين، موارد وفيرة، وقوالب طرف ثالث
قابل للتخصيص: سهل تخصيص الألوان، التباعد، والمكونات
توفير الوقت: يقلل بشكل كبير من وقت التطوير

Bootstrap 5: ما الجديد؟

Bootstrap 5، الذي تم إصداره في مايو 2021، قدم تحسينات كبيرة وتغييرات جذرية من Bootstrap 4:

التغييرات الرئيسية في Bootstrap 5:

✓ لا يعتمد على jQuery (JavaScript خالص)
✓ نظام شبكة محسّن مع نقطة توقف xxl جديدة
✓ عناصر تحكم نماذج محدثة مع تصميم أفضل
✓ واجهة برمجة أدوات مساعدة جديدة للأدوات المخصصة
✓ توثيق محسّن
✓ دعم RTL (من اليمين إلى اليسار) مدمج
✓ خصائص CSS مخصصة (متغيرات CSS)
✓ إمكانية وصول محسّنة
✗ إسقاط دعم Internet Explorer
✗ إزالة متطلبات jQuery

تعزيز الأداء: من خلال إزالة jQuery، أصبح Bootstrap 5 أخف وأسرع. Bootstrap 5 CSS بالكامل يبلغ حوالي 27 كيلوبايت فقط مضغوط!

Bootstrap 5 مقابل Bootstrap 4

إليك الفروقات الرئيسية التي يجب أن تعرفها:

مقارنة Bootstrap 4 مقابل Bootstrap 5:

jQuery:
Bootstrap 4: يتطلب jQuery
Bootstrap 5: لا يتطلب jQuery (JavaScript خالص)

نقاط توقف الشبكة:
Bootstrap 4: xs, sm, md, lg, xl
Bootstrap 5: xs, sm, md, lg, xl, xxl (مضافة)

عناصر تحكم النماذج:
Bootstrap 4: فئات نماذج مخصصة
Bootstrap 5: عناصر تحكم نماذج أصلية مع .form-control

الأدوات المساعدة:
Bootstrap 4: أدوات محدودة
Bootstrap 5: واجهة برمجة أدوات مساعدة شاملة

الأيقونات:
Bootstrap 4: لا توجد أيقونات رسمية
Bootstrap 5: مكتبة Bootstrap Icons

دعم IE:
Bootstrap 4: IE 10+
Bootstrap 5: لا يدعم IE

CDN مقابل التثبيت المحلي

هناك طريقتان رئيسيتان لتضمين Bootstrap في مشروعك:

1. CDN (شبكة توصيل المحتوى)

أسرع طريقة للبدء - فقط قم بتضمين الروابط في HTML الخاص بك:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet">

<!-- Bootstrap 5 JS Bundle (يتضمن Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
</script>

مزايا CDN:

لا يتطلب التحميل
تحميل سريع من خوادم موزعة
مخزن مؤقت بواسطة المتصفحات (مشترك عبر المواقع)
محدث دائمًا
مثالي للتعلم والنماذج الأولية

2. التثبيت المحلي

قم بتنزيل ملفات Bootstrap إلى مشروعك:

عبر NPM:
npm install bootstrap@5.3.0

عبر التحميل:
قم بالتحميل من getbootstrap.com واستخراج إلى مشروعك

هيكل المشروع:
project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

مزايا التثبيت المحلي:

يعمل دون اتصال بالإنترنت
تحكم كامل في الإصدارات
يمكن تخصيص ملفات المصدر
أفضل للإنتاج

نصيحة الإنتاج: لمواقع الويب الإنتاجية، استخدم التثبيت المحلي أو CDN موثوق مع تجزئات Subresource Integrity (SRI) لضمان سلامة الملف والأمان.

صفحة Bootstrap الأولى الخاصة بك

لننشئ صفحة Bootstrap 5 كاملة من الصفر:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة Bootstrap 5 الأولى الخاصة بي</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
<body>

    <!-- شريط التنقل -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">موقعي</a>
        </div>
    </nav>

    <!-- المحتوى الرئيسي -->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center text-primary">مرحبًا بك في Bootstrap 5!</h1>
                <p class="lead text-center">
                    قم ببناء مواقع ويب متجاوبة بشكل أسرع مع الإطار الأكثر شعبية في العالم.
                </p>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">الشبكة المتجاوبة</h5>
                        <p class="card-text">
                            نظام شبكة قوي يعطي الأولوية للهاتف المحمول.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">المكونات</h5>
                        <p class="card-text">
                            مكونات واجهة مستخدم جاهزة للاستخدام.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">الأدوات المساعدة</h5>
                        <p class="card-text">
                            مئات فئات الأدوات المساعدة.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12 text-center">
                <button class="btn btn-primary btn-lg">ابدأ الآن</button>
                <button class="btn btn-outline-secondary btn-lg">اعرف المزيد</button>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>

جربه: انسخ هذا الكود في ملف HTML جديد وافتحه في متصفحك. سترى صفحة متجاوبة بالكامل مع شريط تنقل، بطاقات، وأزرار - كل ذلك دون كتابة سطر واحد من CSS!

فهم الهيكل الأساسي

دعنا نحلل الأجزاء الأساسية لكل صفحة Bootstrap:

1. DOCTYPE ووسم HTML:
<!DOCTYPE html>
<html lang="ar" dir="rtl">

2. وسوم Meta المطلوبة:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Bootstrap CSS (في <head>):
<link href="bootstrap.min.css" rel="stylesheet">

4. Bootstrap JS (قبل إغلاق </body>):
<script src="bootstrap.bundle.min.js"></script>

وسم Meta Viewport: وسم meta viewport ضروري للتصميم المتجاوب. يضمن أن صفحتك تتحجم بشكل صحيح على الأجهزة المحمولة. لا تنسَ هذا الوسم أبدًا!

ما الذي يتضمنه Bootstrap؟

يوفر Bootstrap 5 مجموعة أدوات شاملة:

التخطيط: نظام الشبكة، الحاويات، الأعمدة، نقاط التوقف
المحتوى: الطباعة، الصور، الجداول، الأشكال
المكونات: أكثر من 30 مكونًا (أزرار، بطاقات، أشرطة تنقل، نوافذ منبثقة، إلخ.)
النماذج: عناصر تحكم النماذج، التحقق، التخطيطات
الأدوات المساعدة: التباعد، الألوان، العرض، الفلكس، أدوات النص
الأيقونات: أكثر من 1,800 أيقونة Bootstrap (اختياري)

تمرين تطبيقي:

أنشئ ملف HTML جديد باسم bootstrap-test.html
انسخ مثال "صفحة Bootstrap الأولى" أعلاه
افتحه في متصفحك وقم بتغيير حجم النافذة لرؤية السلوك المتجاوب
غيّر btn-primary إلى btn-success وشاهد تغيير اللون
أضف بطاقة أخرى إلى الصف بنسخ أحد أعمدة البطاقات الموجودة

تحدي: حاول تغيير col-md-4 إلى col-md-6 على البطاقات ولاحظ كيف يتغير التخطيط!

الملخص

في هذا الدرس، تعلمت:

Bootstrap هو إطار عمل CSS شائع لبناء مواقع ويب متجاوبة
Bootstrap 5 أزال jQuery وأضاف العديد من التحسينات
يمكنك استخدام Bootstrap عبر CDN أو التثبيت المحلي
الهيكل الأساسي لصفحة Bootstrap يتضمن CSS في الرأس و JS قبل إغلاق body
يوفر Bootstrap مجموعة أدوات كاملة من التخطيط والمكونات والأدوات المساعدة

في الدرس التالي، سنتعمق أكثر في إعداد Bootstrap ونستكشف هيكل الملف وتكوين HTML الصحيح.