إطار Bootstrap 5

إعداد وهيكل Bootstrap

13 دقيقة الدرس 2 من 40

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

تضمين CSS و JavaScript الخاص بـ Bootstrap

يتطلب Bootstrap ملفات CSS و JavaScript للعمل بشكل صحيح. دعنا نستكشف الطرق المختلفة لتضمينها وفهم ما يفعله كل ملف.

الطريقة 1: استخدام CDN (موصى به للتعلم)

أبسط طريقة للبدء هي استخدام شبكة توصيل المحتوى (CDN):

<!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</title>

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

    <!-- المحتوى الخاص بك هنا -->

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous"></script>
</body>
</html>

فهم SRI: يحتوي سمة integrity على تجزئة تضمن عدم العبث بالملف. سمة crossorigin="anonymous" مطلوبة عند استخدام SRI مع موارد CDN.

الطريقة 2: التثبيت المحلي عبر NPM

لمشاريع الإنتاج، يمكنك تثبيت Bootstrap محليًا باستخدام NPM:

الخطوة 1: تثبيت Bootstrap
npm install bootstrap@5.3.0

الخطوة 2: الاستيراد في JavaScript الخاص بك
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

الخطوة 3: أو استيراد مكونات محددة
import { Modal, Dropdown } from 'bootstrap';

الطريقة 3: التنزيل والتضمين محليًا

يمكنك تنزيل Bootstrap واستضافته بنفسك:

project-folder/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.bundle.min.js
└── index.html

في HTML الخاص بك:
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>

Bundle مقابل الملفات المنفصلة: يوفر Bootstrap bootstrap.bundle.min.js (يتضمن Popper.js) أو bootstrap.min.js منفصل (يتطلب Popper.js بشكل منفصل). استخدم دائمًا إصدار bundle ما لم يكن لديك سبب محدد لعدم القيام بذلك.

فهم هيكل ملف Bootstrap

عند تنزيل Bootstrap، ستجد الهيكل التالي:

bootstrap-5.3.0/
├── css/
│   ├── bootstrap.css              (CSS غير مضغوط)
│   ├── bootstrap.min.css          (CSS مضغوط - استخدم هذا)
│   ├── bootstrap-grid.css         (نظام الشبكة فقط)
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-reboot.css       (أنماط Reboot فقط)
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-utilities.css    (الأدوات المساعدة فقط)
│   └── bootstrap-utilities.min.css
├── js/
│   ├── bootstrap.js               (JS غير مضغوط)
│   ├── bootstrap.min.js           (JS مضغوط - يتطلب Popper)
│   ├── bootstrap.bundle.js        (يتضمن Popper)
│   ├── bootstrap.bundle.min.js    (Bundle مضغوط - استخدم هذا)
│   └── bootstrap.esm.js           (إصدار ES Modules)
└── scss/                           (ملفات Sass المصدر للتخصيص)
    ├── _variables.scss
    ├── _mixins.scss
    └── bootstrap.scss

أي الملفات يجب أن تستخدم؟

لمعظم المشاريع، تحتاج فقط إلى ملفين:

CSS: bootstrap.min.css - CSS الكامل المضغوط
JS: bootstrap.bundle.min.js - JavaScript مع Popper.js متضمن

مهم: ضع دائمًا رابط CSS في قسم <head> وملف JavaScript في نهاية <body>، قبل وسم الإغلاق مباشرة. هذا يضمن التحميل الصحيح والأداء الأفضل.

DOCTYPE HTML5 المطلوب ووسوم Meta

يتطلب Bootstrap نوع مستند HTML5 ووسوم meta محددة للعمل بشكل صحيح:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- وسوم meta المطلوبة -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- اختياري لكن موصى به -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>عنوان صفحتك</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

    <!-- المحتوى الخاص بك -->

    <!-- Bootstrap JS -->
    <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

فهم كل وسم Meta

1. charset="UTF-8"
يحدد ترميز الأحرف للمستند. UTF-8 يدعم جميع الأحرف والرموز من جميع اللغات.

2. viewport
الوسم الأكثر أهمية للتصميم المتجاوب. يتحكم في كيفية عرض صفحتك على الأجهزة المحمولة.

width=device-width - يضبط العرض ليتطابق مع شاشة الجهاز
initial-scale=1.0 - يضبط مستوى التكبير الأولي إلى 100%

3. X-UA-Compatible (اختياري)
يضمن أن Internet Explorer يستخدم أحدث محرك عرض. أقل أهمية الآن منذ أن أسقط Bootstrap 5 دعم IE.

فهم الحاويات

الحاويات هي عنصر التخطيط الأساسي في Bootstrap ومطلوبة عند استخدام نظام الشبكة. يقدم Bootstrap ثلاثة أنواع من الحاويات:

1. حاوية ذات عرض ثابت (.container)

<div class="container">
    <!-- المحتوى هنا سيكون متمركزًا بحد أقصى للعرض ثابت -->
</div>

الحد الأقصى للعرض حسب نقطة التوقف:
صغير جدًا (<576px):      100%
صغير (≥576px):            540px
متوسط (≥768px):           720px
كبير (≥992px):            960px
كبير جدًا (≥1200px):      1140px
XXL (≥1400px):            1320px

2. حاوية سائلة (.container-fluid)

<div class="container-fluid">
    <!-- المحتوى يمتد 100% من العرض عند جميع نقاط التوقف -->
</div>

يمتد دائمًا 100% من عرض منفذ العرض.

3. حاويات متجاوبة

<div class="container-sm">عرض 100% حتى نقطة توقف صغيرة</div>
<div class="container-md">عرض 100% حتى نقطة توقف متوسطة</div>
<div class="container-lg">عرض 100% حتى نقطة توقف كبيرة</div>
<div class="container-xl">عرض 100% حتى نقطة توقف XL</div>
<div class="container-xxl">عرض 100% حتى نقطة توقف XXL</div>

متى تستخدم كل منها:
• .container - مواقع ويب قياسية مع محتوى متمركز بعرض ثابت
• .container-fluid - تخطيطات كاملة العرض، لوحات معلومات، لوحات إدارة
• .container-{breakpoint} - تخطيطات هجينة سائلة على الهاتف المحمول ولكن ثابتة على سطح المكتب

قالب صفحة Bootstrap كامل

إليك قالب Bootstrap 5 كامل وجاهز للإنتاج مع جميع أفضل الممارسات:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- وسوم meta المطلوبة -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- وسوم Meta لتحسين محركات البحث -->
    <meta name="description" content="وصف صفحتك">
    <meta name="keywords" content="bootstrap، قالب، متجاوب">
    <meta name="author" content="اسمك">

    <title>صفحة Bootstrap الخاصة بي</title>

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

    <!-- CSS مخصص (اختياري) -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>

    <!-- الرأس -->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">العلامة التجارية</a>
            </div>
        </nav>
    </header>

    <!-- المحتوى الرئيسي -->
    <main>
        <div class="container my-5">
            <h1>مرحبًا بك في Bootstrap 5</h1>
            <p>المحتوى الخاص بك يذهب هنا.</p>
        </div>
    </main>

    <!-- التذييل -->
    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            <p>&copy; 2024 شركتك. جميع الحقوق محفوظة.</p>
        </div>
    </footer>

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

    <!-- JS مخصص (اختياري) -->
    <script src="js/custom.js"></script>
</body>
</html>

توافق المتصفح والمتطلبات

يدعم Bootstrap 5 جميع المتصفحات الحديثة الرئيسية:

✓ المتصفحات المدعومة:
• Chrome (الأحدث)
• Firefox (الأحدث)
• Safari (الأحدث)
• Edge (الأحدث)
• Opera (الأحدث)
• iOS Safari (iOS 10+)
• Android Chrome (الأحدث)

✗ غير مدعوم:
• Internet Explorer (جميع الإصدارات)
• إصدارات المتصفح القديمة (أكثر من 3 سنوات)

لا يدعم Internet Explorer: أسقط Bootstrap 5 الدعم الكامل لـ Internet Explorer. إذا كنت بحاجة إلى دعم IE، يجب عليك استخدام Bootstrap 4. ومع ذلك، فإن استخدام IE الآن أقل من 1% عالميًا، لذلك نادرًا ما تكون هذه مشكلة.

متطلبات JavaScript

تتطلب بعض مكونات Bootstrap JavaScript للعمل:

مطلوب لـ: النوافذ المنبثقة، القوائم المنسدلة، التلميحات، Popovers، الدوارات، Offcanvas، Toast، الطي، Scrollspy
غير مطلوب لـ: نظام الشبكة، الطباعة، الألوان، أدوات التباعد، معظم مكونات التخطيط

نصيحة الأداء: إذا كنت تستخدم فقط ميزات CSS الخاصة بـ Bootstrap (الشبكة، الأدوات المساعدة، التصميم الأساسي)، يمكنك تخطي تضمين ملف JavaScript بالكامل لتقليل وقت تحميل الصفحة.

ترتيب التحميل

يهم ترتيب تحميل الملفات للأداء والوظائف:

ترتيب التحميل الصحيح:

<head>
    1. وسوم Meta
    2. Bootstrap CSS
    3. CSS مخصص (يتجاوز Bootstrap)
</head>

<body>
    

    4. Bootstrap JavaScript
    5. JavaScript مخصص (يستخدم Bootstrap)
</body>

لماذا JS في الأسفل؟ وضع ملفات JavaScript في نهاية body يضمن تحميل محتوى الصفحة أولاً، مما يجعل موقعك يبدو أسرع للمستخدمين. الصفحة مرئية وقابلة للاستخدام قبل أن ينتهي تحميل JavaScript.

تخصيص Bootstrap

يمكنك تخصيص Bootstrap بعدة طرق:

الطريقة 1: التجاوز بـ CSS مخصص

<!-- Bootstrap CSS أولاً -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- CSS المخصص الخاص بك ثانيًا (يتجاوز Bootstrap) -->
<link rel="stylesheet" href="custom.css">

في custom.css:
.btn-primary {
    background-color: #ff6600;
    border-color: #ff6600;
}

الطريقة 2: استخدام متغيرات CSS

:root {
    --bs-primary: #ff6600;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
}

الطريقة 3: تخصيص متغيرات Sass (متقدم)

في custom.scss الخاص بك:
// تجاوز متغيرات Bootstrap
$primary: #ff6600;
$secondary: #6c757d;

// استيراد Bootstrap
@import "bootstrap/scss/bootstrap";

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

أنشئ ملف HTML جديد باسم bootstrap-structure.html
استخدم قالب صفحة Bootstrap الكامل المقدم أعلاه
أضف حاوية مع عنوان وفقرة
غيّر الحاوية إلى container-fluid ولاحظ الفرق
أنشئ ملف CSS مخصص يغير اللون الأساسي إلى أرجواني
اختبر صفحتك في متصفحات مختلفة لرؤية العرض المتسق

تحدي: أنشئ ثلاثة أقسام باستخدام أنواع حاويات مختلفة (.container، .container-md، .container-fluid) وقارن كيف تتصرف عند تغيير حجم المتصفح!

أخطاء الإعداد الشائعة التي يجب تجنبها

1. وسم Meta Viewport مفقود
بدون <meta name="viewport"...>، لن يكون موقعك متجاوبًا على الأجهزة المحمولة.

2. ترتيب الملفات خاطئ
يجب أن يأتي CSS المخصص بعد Bootstrap CSS، وإلا فلن تعمل أنماطك المخصصة.

3. استخدام ملفات .min في التطوير
استخدم الملفات غير المضغوطة أثناء التطوير لسهولة تصحيح الأخطاء. استخدم ملفات .min فقط في الإنتاج.

4. نسيان Popper.js
إذا استخدمت bootstrap.min.js بدلاً من bootstrap.bundle.min.js، فلن تعمل القوائم المنسدلة والـ popovers بدون Popper.js.

الملخص

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

كيفية تضمين CSS و JavaScript الخاص بـ Bootstrap باستخدام CDN أو NPM أو الملفات المحلية
هيكل ملفات توزيع Bootstrap
DOCTYPE HTML5 المطلوب ووسوم meta لـ Bootstrap
ثلاثة أنواع من الحاويات: .container، .container-fluid، والحاويات المتجاوبة
متطلبات توافق المتصفح لـ Bootstrap 5
ترتيب تحميل الملفات الصحيح للأداء الأمثل
تقنيات التخصيص الأساسية

في الدرس التالي، سنغوص في نظام الشبكة القوي لـ Bootstrap ونتعلم كيفية إنشاء تخطيطات متجاوبة!