إطار Bootstrap 5

تخصيص Bootstrap باستخدام CSS

15 دقيقة الدرس 39 من 40

فهم بنية CSS في Bootstrap

تم بناء Bootstrap 5 ببنية CSS واضحة ومعيارية تجعل التخصيص واضحًا ومباشرًا. فهم هذا الهيكل هو المفتاح للتخصيص الفعال.

<!-- طبقات CSS في Bootstrap -->
CSS Custom Properties (Variables) - المتغيرات المخصصة
Reboot (normalize.css + إعدادات افتراضية محددة)
Type (الطباعة)
Grid (الشبكة)
Components (المكونات)
Utilities (الأدوات المساعدة)
Helpers (المساعدات)
    

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

خصائص CSS المخصصة في Bootstrap 5

يستفيد Bootstrap 5 من متغيرات CSS للعديد من قيمه الأساسية، مما يسمح بالتخصيص في الوقت الفعلي دون إعادة تجميع Sass.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متغيرات CSS في Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <style>
        /* عرض متغيرات CSS في Bootstrap */
        :root {
            /* هذه معرفة بالفعل في Bootstrap */
            --bs-blue: #0d6efd;
            --bs-indigo: #6610f2;
            --bs-purple: #6f42c1;
            --bs-pink: #d63384;
            --bs-red: #dc3545;
            --bs-orange: #fd7e14;
            --bs-yellow: #ffc107;
            --bs-green: #198754;
            --bs-teal: #20c997;
            --bs-cyan: #0dcaf0;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h1>نظام الألوان في Bootstrap</h1>
        <div class="row g-3">
            <div class="col-md-4">
                <div class="p-3 bg-primary text-white rounded">الأساسي</div>
            </div>
            <div class="col-md-4">
                <div class="p-3 bg-success text-white rounded">النجاح</div>
            </div>
            <div class="col-md-4">
                <div class="p-3 bg-danger text-white rounded">الخطر</div>
            </div>
        </div>
    </div>
</body>
</html>
    

تجاوز متغيرات Bootstrap باستخدام :root

يمكنك تجاوز متغيرات CSS في Bootstrap في ورقة الأنماط الخاصة بك لتخصيص السمة بشكل عام.

<!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>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
    <style>
        /* تجاوز متغيرات Bootstrap بعد CSS Bootstrap */
        :root {
            --bs-primary: #6a4c93;
            --bs-primary-rgb: 106, 76, 147;
            --bs-secondary: #f72585;
            --bs-success: #4cc9f0;
            --bs-danger: #f77f00;
            --bs-warning: #fcbf49;
            --bs-info: #4361ee;

            /* الطباعة */
            --bs-body-font-family: "Segoe UI", Tahoma, sans-serif;
            --bs-body-font-size: 1.1rem;
            --bs-body-line-height: 1.7;

            /* التباعد */
            --bs-gutter-x: 2rem;

            /* نصف قطر الحدود */
            --bs-border-radius: 0.5rem;
            --bs-border-radius-lg: 1rem;
        }

        /* تنسيق الجسم المخصص */
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="card shadow-lg">
            <div class="card-body p-5">
                <h1 class="text-primary mb-4">سمة Bootstrap مخصصة</h1>
                <p class="lead">تستخدم هذه الصفحة متغيرات CSS مخصصة لتجاوز السمة الافتراضية لـ Bootstrap.</p>

                <div class="row g-4 my-4">
                    <div class="col-md-6">
                        <button class="btn btn-primary w-100">زر أساسي</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-secondary w-100">زر ثانوي</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-success w-100">زر نجاح</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-danger w-100">زر خطر</button>
                    </div>
                </div>

                <div class="alert alert-info" role="alert">
                    جميع الألوان مخصصة باستخدام متغيرات CSS!
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    

إضافة فئات الأدوات المساعدة المخصصة

قم بتوسيع نظام الأدوات المساعدة في Bootstrap بفئاتك المخصصة باتباع اصطلاحات تسمية Bootstrap.

<style>
    /* أدوات التباعد المخصصة */
    .mt-6 { margin-top: 4rem !important; }
    .mb-6 { margin-bottom: 4rem !important; }
    .py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    /* أدوات النص المخصصة */
    .text-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* أدوات الخلفية المخصصة */
    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
    }

    .bg-gradient-success {
        background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-info) 100%);
    }

    /* أدوات الحدود المخصصة */
    .border-thick {
        border-width: 3px !important;
    }

    .border-dashed {
        border-style: dashed !important;
    }

    /* أدوات الظل المخصصة */
    .shadow-colored {
        box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.3) !important;
    }

    /* تأثيرات التمرير */
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }
</style>

<div class="container py-5">
    <h1 class="text-gradient text-shadow mb-6">عرض الأدوات المساعدة المخصصة</h1>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card hover-lift shadow-colored">
                <div class="card-body bg-gradient-primary text-white">
                    <h5>بطاقة متدرجة</h5>
                    <p>مع أدوات مساعدة مخصصة</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card hover-lift border-thick border-primary">
                <div class="card-body">
                    <h5>حدود سميكة</h5>
                    <p>عرض حدود مخصص</p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card hover-lift border-dashed border-secondary">
                <div class="card-body">
                    <h5>حدود متقطعة</h5>
                    <p>نمط حدود مخصص</p>
                </div>
            </div>
        </div>
    </div>
</div>
    

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

إنشاء نظام ألوان مخصص شامل لمشروع Bootstrap الخاص بك.

<style>
    /* تحديد لوحة الألوان المخصصة */
    :root {
        /* ألوان العلامة التجارية */
        --brand-purple: #6a4c93;
        --brand-pink: #f72585;
        --brand-blue: #4361ee;
        --brand-cyan: #4cc9f0;
        --brand-yellow: #fcbf49;

        /* تجاوز ألوان السمة في Bootstrap */
        --bs-primary: var(--brand-purple);
        --bs-primary-rgb: 106, 76, 147;
        --bs-secondary: var(--brand-pink);
        --bs-secondary-rgb: 247, 37, 133;
        --bs-info: var(--brand-blue);
        --bs-info-rgb: 67, 97, 238;

        /* متغيرات فاتحة */
        --bs-primary-light: rgba(106, 76, 147, 0.1);
        --bs-secondary-light: rgba(247, 37, 133, 0.1);

        /* متغيرات داكنة */
        --bs-primary-dark: #4a3569;
        --bs-secondary-dark: #d11f6f;
    }

    /* فئات الخلفية المخصصة */
    .bg-primary-light {
        background-color: var(--bs-primary-light) !important;
    }

    .bg-secondary-light {
        background-color: var(--bs-secondary-light) !important;
    }

    /* فئات النص المخصصة */
    .text-primary-dark {
        color: var(--bs-primary-dark) !important;
    }

    /* متغيرات الزر المخصصة */
    .btn-gradient {
        background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
        border: none;
        color: white;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
        color: white;
    }

    .btn-outline-gradient {
        background: transparent;
        border: 2px solid var(--bs-primary);
        color: var(--bs-primary);
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .btn-outline-gradient::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
        transition: left 0.3s ease;
        z-index: -1;
    }

    .btn-outline-gradient:hover {
        color: white;
        border-color: transparent;
    }

    .btn-outline-gradient:hover::before {
        left: 0;
    }
</style>

<div class="container py-5">
    <h2 class="mb-4">ألوان السمة المخصصة</h2>

    <!-- عرض لوحة الألوان -->
    <div class="row g-3 mb-5">
        <div class="col-md-2">
            <div class="p-4 bg-primary text-white text-center rounded">
                <strong>أساسي</strong>
            </div>
        </div>
        <div class="col-md-2">
            <div class="p-4 bg-secondary text-white text-center rounded">
                <strong>ثانوي</strong>
            </div>
        </div>
        <div class="col-md-2">
            <div class="p-4 bg-info text-white text-center rounded">
                <strong>معلومات</strong>
            </div>
        </div>
        <div class="col-md-2">
            <div class="p-4 bg-primary-light text-primary-dark text-center rounded border">
                <strong>فاتح</strong>
            </div>
        </div>
    </div>

    <!-- الأزرار المخصصة -->
    <div class="d-flex gap-3 flex-wrap">
        <button class="btn btn-gradient">زر متدرج</button>
        <button class="btn btn-outline-gradient">محدد متدرج</button>
        <button class="btn btn-primary">أساسي</button>
        <button class="btn btn-secondary">ثانوي</button>
    </div>
</div>
    

نصيحة: دائمًا حدد كلاً من اللون وقيم RGB الخاصة به عند تجاوز ألوان Bootstrap لضمان عمل أدوات الشفافية بشكل صحيح.

العمل مع متغيرات Sass (نظرة عامة)

بينما تعد متغيرات CSS رائعة للتغييرات في وقت التشغيل، توفر متغيرات Sass تخصيصًا أكثر قوة في وقت التجميع.

// custom.scss - تجاوز متغيرات Sass في Bootstrap

// نظام الألوان
$purple: #6a4c93;
$pink: #f72585;
$blue: #4361ee;

// ألوان السمة
$primary: $purple;
$secondary: $pink;
$success: #4cc9f0;
$info: $blue;
$warning: #fcbf49;
$danger: #f77f00;

// الطباعة
$font-family-base: "Segoe UI", system-ui, sans-serif;
$font-size-base: 1.1rem;
$line-height-base: 1.7;
$headings-font-weight: 700;

// التباعد
$spacer: 1rem;
$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    6: $spacer * 4  // تباعد مخصص
);

// نصف قطر الحدود
$border-radius: 0.5rem;
$border-radius-sm: 0.35rem;
$border-radius-lg: 1rem;

// الأزرار
$btn-padding-y: 0.75rem;
$btn-padding-x: 1.5rem;
$btn-border-radius: $border-radius-lg;

// البطاقات
$card-border-radius: $border-radius-lg;
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);

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

// المكونات المخصصة بعد Bootstrap
.custom-card {
    border: none;
    box-shadow: $card-box-shadow;
    transition: transform 0.3s ease;

    &:hover {
        transform: translateY(-5px);
    }
}
    

ملاحظة: لاستخدام تخصيص Sass، تحتاج إلى Node.js و npm وعملية بناء. متغيرات CSS أبسط لمعظم المشاريع.

إنشاء مكونات مخصصة

قم ببناء مكونات مخصصة تمتد نظام المكونات في Bootstrap مع تنسيق متسق.

<style>
    /* مكون البطاقة المخصصة */
    .card-custom {
        border: none;
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    .card-custom:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
    }

    .card-custom-header {
        background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
        color: white;
        padding: 2rem;
        position: relative;
    }

    .card-custom-icon {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* مكون الشارة المخصصة */
    .badge-custom {
        padding: 0.5rem 1rem;
        border-radius: 2rem;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }

    /* مجموعة الأزرار المخصصة */
    .btn-group-custom .btn {
        border-radius: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .btn-group-custom .btn:first-child {
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .btn-group-custom .btn:last-child {
        border-radius: 0 0.5rem 0.5rem 0;
        border-right: none;
    }

    /* مكون التنبيه المخصص */
    .alert-custom {
        border: none;
        border-left: 4px solid;
        border-radius: 0.5rem;
        background: rgba(var(--bs-primary-rgb), 0.1);
        border-left-color: var(--bs-primary);
    }

    .alert-custom-icon {
        width: 40px;
        height: 40px;
        background: var(--bs-primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
</style>

<div class="container py-5">
    <h2 class="mb-4">المكونات المخصصة</h2>

    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card-custom">
                <div class="card-custom-header">
                    <div class="card-custom-icon">
                        🚀
                    </div>
                    <h4 class="mb-0">سريع</h4>
                </div>
                <div class="card-body">
                    <p>أداء سريع للغاية مع كود محسّن.</p>
                    <span class="badge-custom bg-primary">مميز</span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card-custom">
                <div class="card-custom-header">
                    <div class="card-custom-icon">
                        🎨
                    </div>
                    <h4 class="mb-0">جميل</h4>
                </div>
                <div class="card-body">
                    <p>تصميمات مذهلة تأسر المستخدمين.</p>
                    <span class="badge-custom bg-secondary">شائع</span>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card-custom">
                <div class="card-custom-header">
                    <div class="card-custom-icon">
                        🔒
                    </div>
                    <h4 class="mb-0">آمن</h4>
                </div>
                <div class="card-body">
                    <p>أمان على مستوى المؤسسات مدمج.</p>
                    <span class="badge-custom bg-success">مميز</span>
                </div>
            </div>
        </div>
    </div>

    <!-- تنبيه مخصص -->
    <div class="alert-custom p-4 d-flex align-items-center gap-3">
        <div class="alert-custom-icon">
            ℹ
        </div>
        <div>
            <strong>نصيحة احترافية:</strong> تحافظ المكونات المخصصة على السلوك المتجاوب لـ Bootstrap مع إضافة تنسيق فريد.
        </div>
    </div>

    <!-- مجموعة أزرار مخصصة -->
    <div class="btn-group-custom mt-4" role="group">
        <button class="btn btn-primary">خيار 1</button>
        <button class="btn btn-primary">خيار 2</button>
        <button class="btn btn-primary">خيار 3</button>
    </div>
</div>
    

استخدام تسلسل CSS بفعالية

استفد من خصوصية CSS وترتيب التسلسل لتجاوز أنماط Bootstrap بشكل نظيف.

<style>
    /* ❌ سيئ: استخدام !important دون داعٍ */
    .my-button {
        background-color: red !important;
        color: white !important;
    }

    /* ✅ جيد: استخدام الخصوصية المناسبة */
    .btn.btn-custom {
        background-color: red;
        color: white;
        border-color: darkred;
    }

    .btn.btn-custom:hover {
        background-color: darkred;
        border-color: #8b0000;
    }

    /* ✅ جيد: نطاق التجاوزات لأقسام محددة */
    .hero-section .btn-primary {
        padding: 1rem 2rem;
        font-size: 1.2rem;
        border-radius: 2rem;
    }

    /* ✅ جيد: استخدام خصائص CSS المخصصة للتجاوزات المتسقة */
    .custom-theme {
        --bs-primary: #e74c3c;
        --bs-primary-rgb: 231, 76, 60;
    }

    .custom-theme .btn-primary {
        background-color: var(--bs-primary);
    }
</style>

<div class="container py-5">
    <h3>أمثلة التسلسل</h3>

    <!-- زر Bootstrap قياسي -->
    <button class="btn btn-primary mb-3">زر قياسي</button>

    <!-- زر مخصص مع خصوصية مناسبة -->
    <button class="btn btn-custom mb-3">زر مخصص</button>

    <!-- تخصيص محدد النطاق -->
    <div class="hero-section my-4">
        <button class="btn btn-primary">زر البطل (أكبر)</button>
    </div>

    <!-- نطاق السمة -->
    <div class="custom-theme my-4">
        <button class="btn btn-primary">زر بالسمة</button>
    </div>
</div>
    

تحذير: تجنب استخدام !important ما لم يكن ذلك ضروريًا للغاية. يجعل التخصيص المستقبلي صعبًا ويكسر تسلسل CSS.

تصحيح الأنماط المخصصة

تقنيات استكشاف الأخطاء عندما لا تعمل الأنماط المخصصة كما هو متوقع.

<!-- قائمة التحقق من التصحيح -->

1. تحقق من ترتيب تحميل CSS:
   <!-- يجب أن يأتي Bootstrap أولاً -->
   <link href="bootstrap.min.css" rel="stylesheet">
   <!-- يأتي CSS المخصص بعد ذلك -->
   <link href="custom.css" rel="stylesheet">

2. فحص العنصر في أدوات المطور:
   - انقر بزر الماوس الأيمن ← فحص
   - تحقق من الأنماط المطبقة
   - ابحث عن الأنماط المشطوبة (تم تجاوزها)
   - تحقق من القيم المحسوبة

3. التحقق من الخصوصية:
   <!-- خصوصية أقل - قد لا تعمل -->
   <style>
   .btn { background: red; }
   </style>

   <!-- خصوصية أعلى - أفضل -->
   <style>
   .btn.btn-custom { background: red; }
   </style>

4. تحقق من الأخطاء الإملائية:
   ❌ .btn-primery  (خطأ إملائي)
   ✅ .btn-primary

5. تأكد من تحميل CSS:
   <!-- افتح أدوات المطور ← الشبكة ← تصفية: CSS -->
   <!-- تحقق من تحميل ملف CSS (حالة 200) -->

6. مسح ذاكرة التخزين المؤقت للمتصفح:
   - تحديث صعب: Ctrl+Shift+R (Windows) أو Cmd+Shift+R (Mac)
   - أو امسح ذاكرة التخزين المؤقت في أدوات المطور

7. استخدم وحدة التحكم في أدوات المطور:
   <script>
   // تحقق من النمط المحسوب
   const element = document.querySelector('.btn-primary');
   const styles = window.getComputedStyle(element);
   console.log(styles.backgroundColor);
   </script>
    

اعتبارات الأداء

أفضل الممارسات للحفاظ على الأداء أثناء تخصيص Bootstrap.

نصائح الأداء:

تصغير CSS: قم بإزالة مكونات Bootstrap غير المستخدمة
تحديد !important: يبطئ حساب نمط المتصفح
تجنب التعشيش العميق: اجعل المحددات ضحلة (3 مستويات كحد أقصى)
استخدم متغيرات CSS: أسرع من إعادة تجميع Sass
دمج المحددات: اجمع الأنماط المتشابهة معًا
تحميل CSS الحرج مضمّن: قم بتضمين الأنماط الأساسية في <head>
تأجيل CSS غير الحرج: تحميل الخطوط المخصصة بشكل غير متزامن

<!-- تحميل محسّن للأداء -->
<head>
    <!-- CSS حرج مضمّن -->
    <style>
        /* فقط الأنماط الأساسية فوق الطي */
        :root { --bs-primary: #6a4c93; }
        body { font-family: system-ui, sans-serif; }
        .hero { min-height: 100vh; }
    </style>

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

    <!-- تأجيل CSS المخصص غير الحرج -->
    <link href="custom.css" rel="stylesheet" media="print" onload="this.media='all'">

    <!-- تحميل الخطوط مسبقًا -->
    <link rel="preload" href="fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin>
</head>
    

تمرين: إنشاء سمة مخصصة

المهمة: قم ببناء سمة Bootstrap مخصصة كاملة بالمتطلبات التالية:

حدد لوحة ألوان مخصصة بما لا يقل عن 5 ألوان
تجاوز ألوان Primary و Secondary و Success في Bootstrap
أنشئ 3 فئات أدوات مساعدة مخصصة
قم ببناء مكون بطاقة مخصص مع تأثيرات التمرير
أنشئ زرًا مخصصًا بخلفية متدرجة
أضف أدوات تباعد مخصصة (mt-6، mb-6)
تأكد من أن جميع المكونات متجاوبة
اختبر في أدوات مطور Chrome

مكافأة: أضف دعم الوضع الداكن باستخدام متغيرات CSS