انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: مكتبات وأطر عمل الواجهة الأمامية

CSS Frameworks and Preprocessors أطر تنسيق ومعالجات لغة CSS

افهم ببساطة لماذا ظهرت المكتبات وأطر العمل في الواجهة الأمامية، والفرق بين الكود الخام والمكتبة وإطار العمل، ومتى تكفي اللغات الأساسية وحدها، ومقارنة Bootstrap وTailwind CSS وReact وVue وAngular للمبتدئين.
2 صفوف تعليمية
تكنولوجيا الويب
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في جانب المظهر والتنسيق ()، يستعين مطورو الواجهة الأمامية بثلاث فئات شهيرة من الأدوات لتسريع بناء الشاشات المتجاوبة:

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

قارن في المثال البسيط الآتي كيف يُكتب زر بنفسجي أنيق بالتنسيق المباشر ثم بـ ثم بـ :

الصف 2 كود برمجي
HTML 
<!-- 1. Bootstrap: Pre-built component classes -->
<button class="btn btn-primary">Start Course</button>

<!-- 2. Tailwind CSS: Composable utility classes -->
<button class="bg-purple-700 text-white px-4 py-2 rounded-lg">
  Start Course
</button>

جميع فقرات هذا الدرس (مكتبات وأطر عمل الواجهة الأمامية)