المستوى المتوسط: احتراف تنسيق المواقع بلغة CSS

🌟 مقدمة تحفيزية :

“مرحباً بك في عصر السرعة ! هل تساءلت يوماً كيف تبني الشركات الكبرى مواقعها بهذه السرعة والإتقان ؟ السر يكمن في Bootstrap .

تخيل أن لديك مخزناً عملاقاً يحتوي على أزرار جاهزة ، قوائم منسقة ، وجداول مرتبة ، وما عليك إلا اختيار ما يعجبك ووضعه في موقعك . اليوم في أكاديمية قياوي ، سنعلمك كيف تستخدم أقوى ‘إطار عمل’ (Framework) في العالم لتجعل موقعك يبدو وكأنه صُمم في أرقى شركات السيليكون فالي !”

🏗️ 1. ما هو Bootstrap ؟ هو مكتبة CSS جاهزة صممتها شركة Twitter . توفر لك أكواداً معدة مسبقاً لكل شيء (الأزرار ، النماذج ، القوائم).

الميزة الكبرى : موقعك سيصبح “متجاوباً” (Responsive) تلقائياً على الهواتف دون تعب !

🔗 2. كيف نربط Bootstrap بموقعنا ؟ أسهل طريقة هي استخدام رابط CDN (الربط المباشر) . نضع هذا الرابط داخل وسم <head> في ملف الـ HTML :

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

💻 3 . التطبيق العملي (سحر الكلاسات الجاهزة) بدلاً من كتابة CSS طويل للزر ، يكفي أن تعطي الزر “كلاس” (Class) جاهزاً من Bootstrap :

بدون Bootstrap : كنت ستحتاج لـ 10 أسطر CSS .

مع Bootstrap : فقط اكتب هذا في HTML :

<button class="btn btn-success">زر أخضر احترافي</button>
<button class="btn btn-danger">زر أحمر للتنبيه</button>
<button class="btn btn-primary btn-lg">زر أزرق كبير</button>

📐 4 . نظام الحاويات (Grid System) بستراب يعتمد على تقسيم الصفحة إلى 12 عموداً. لعمل عمودين متساويين :

<div class="container">
    <div class="row">
        <div class="col-md-6">قسم المعلومات القانونية</div>
        <div class="col-md-6">قسم الدورات التقنية</div>
    </div>
</div>

💡 لماذا هذا الدرس ضروري لطلابك ؟

1 . توفير الوقت : ما كان يستغرق ساعات في CSS، يتم الآن في ثوانٍ .

2 . شكل عصري : أزرار ونوافذ Bootstrap تعطي ثقة فورية للزائر في احترافية الأكاديمية 3 . التوافق : يضمن أن الموقع يعمل بشكل مثالي على جميع أنواع الهواتف والمتصفحات .

🎯 تحدي الدرس : “يا بطل ! قم بتحويل زر ‘سجل الآن’ في موقعك باستخدام كلاسات Bootstrap (مثل btn btn-warning) . ثم حاول استخدام نظام الـ row والـ col لترتيب قسم المميزات . هل لاحظت كيف أصبح التنسيق أسهل ؟”

للتوضيح :

🟢 الخطوة 1: إضافة Bootstrap للموقع

افتح ملف index.html. داخل <head> أضف هذا السطر :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

هذا السطر يربط الموقع مع Bootstrap . 🟢 الخطوة 2 : إنشاء Container Bootstrap يعتمد على عنصر اسمه :

<div class="container">

مثال :

<div class="container">

<h1 class="text-center">Qiyaoui Academy</h1>

</div>

🟢 الخطوة 3 : إنشاء Grid احترافي

Bootstrap يستعمل نظام شبكة . مثال :

<div class="container">

<div class="row">

<div class="col-md-4">
<div class="card p-3">
<h3>HTML</h3>
<p>تعلم أساسيات المواقع</p>
</div>
</div>

<div class="col-md-4">
<div class="card p-3">
<h3>CSS</h3>
<p>تعلم تصميم المواقع</p>
</div>
</div>

<div class="col-md-4">
<div class="card p-3">
<h3>Responsive</h3>
<p>مواقع تعمل في كل الأجهزة</p>
</div>
</div>

</div>

</div>

📱 في الهاتف تصبح العناصر فوق بعضها 💻 في الحاسوب تصبح بجانب بعضها بدون كتابة CSS طويل .

🟢 الخطوة 4 : زر احترافي Bootstrap يعطي أزرار جاهزة .

<button class="btn btn-primary">ابدأ التعلم</button>

🧠 أشهر Classes في Bootstrap

العنصر	الكلاس
زر أزرق	btn btn-primary
زر أخضر	btn btn-success
وسط الصفحة	text-center
شبكة	row
عمود	col

💡 الميزة الكبيرة : Bootstrap يجعلك تصمم موقعاً احترافياً في دقائق .