في هذا الدرس 6تصفّح المواضيع
من أروع أسرار هندسة بوتستراب 5 أنه لم يعد يكتب كلاسات الهوامش والظلال والعرض يدوياً سطراً بسطر؛ بل بنى محرك توليد برمجي متكامل يُعرف باسم Utilities API يعتمد على خريطة Sass موحدة اسمها $utilities داخل ملف scss/_utilities.scss ويحولها ملف scss/utilities/_api.scss إلى كلاسات جاهزة.
تعني هذه المعمارية أنك تمتلك نفس القوة التي يمتلكها مطورو بوتستراب أنفسهم: فيمكنك توليد عائلة كلاسات جديدة خاصة بمشروعك ببضعة أسطر، أو تفعيل نقاط التوقف المتجاوبة لأداة لم تكن متجاوبة، أو إلغاء مئات الكلاسات غير اللازمة بضغطة واحدة!
لإنشاء أداة خدمية جديدة كلياً — مثل كلاسات التحكم بشكل مؤشر الفأرة .cursor-pointer و.cursor-grab — نمرر كائناً إلى خريطة $utilities يحدد ثلاثة مفاتيح واضحة: property لاسم خاصية CSS المستهدفة، وclass لبادئة اسم الكلاس اختيارياً، وvalues لقائمة القيم المطلوب توليدها:
<!-- Generated via Utilities API:
"cursor": (property: cursor, class: cursor,
values: pointer grab not-allowed)
-->
<div class="d-flex gap-2">
<span class="p-2 border cursor-pointer">Click</span>
<span class="p-2 border cursor-grab">Drag</span>
</div>ماذا لو أردت أن يتغير ظل البطاقة أو شفافيتها عند مرور المؤشر :hover أو عبر الشاشات المتجاوبة دون كتابة CSS مخصص لكل حالة؟ يدعم محرك Utilities API مفتاحين سحريين داخل تعريف الأداة:
responsive: true: يولد تلقائياً نسخ-smو-mdو-lgو-xlو-xxlلكل قيمة في الأداة!state: hover(أوhover focus): يولد كلاسات تنتهي بلاحقة-hoverمثل.opacity-100-hover:hoverو.shadow-lg-hover:hoverلتنشيط التأثير عند التمرير فقط!
<!-- state: hover on shadow & opacity utilities -->
<div class="p-3 border rounded-3 shadow-sm
shadow-lg-hover opacity-75 opacity-100-hover
transition-fast">
Hover over this card to elevate shadow & opacity!
</div>مثلما يضيف المحرك أدوات جديدة، يتيح لك «تقليم» الأدوات القديمة أو غير المستخدمة لتخفيف وزن ملف التنسيق النهائي؛ فإذا كان فريقك يعتمد كلياً على Flexbox وCSS Grid ولا يستخدم التعويم أبداً، يكفي ضبط مفتاح "float": null داخل map-merge($utilities, ("float": null)) لحذف جميع كلاسات التعويم ونقاط توقفها من المخرجات تماماً!
كما قللنا حجم CSS بالاستيراد الانتقائي، ينطبق المبدأ ذاته على جافاسكريبت! فبدلاً من تحميل ملف bootstrap.bundle.min.js الكامل الذي يضم جميع الإضافات الإحدى عشرة، صُممت إضافات بوتستراب 5 كوحدات قياسية مستقلة ES Modules بدون أي اعتماد على jQuery.
في بيئات البناء الحديثة مثل Vite أو Webpack، استورد فقط الإضافات التي تستخدمها واجهتك فعلاً مثل import Modal from 'bootstrap/js/dist/modal'؛ وعندما لا تستدعي القوائم المنسدلة أو التلميحات العائمة فلن تحتاج حتى إلى تضمين مكتبة التموضع @popperjs/core!
<!-- ESM in Vite:
import Modal from 'bootstrap/js/dist/modal';
-->
<button id="openBtn" type="button" class="btn btn-primary">
Open Lean JS Modal
</button>
<div class="modal fade" id="leanModal" tabindex="-1"
aria-hidden="true">...</div>في المحطة الأخيرة قبل إطلاق مشروعك للإنتاج، يمكنك خفض حجم ملف CSS إلى أقل من 15 كيلوبايت عبر أدوات فحص القوالب مثل PurgeCSS مع الانتباه الشديد لإدراج الكلاسات التي يحقنها جافاسكريبت ديناميكياً وقت التشغيل (مثل show وfade وcollapsing وmodal-backdrop وbs-tooltip-auto) ضمن قائمة الحماية safelist حتى لا تُحذف بالخطأ!
اجمع ذلك مع تفعيل ضغط Brotli أو Gzip على الخادم، ومراجعة تباين الوضعين الفاتح والداكن، والتنقل الكامل بلوحة المفاتيح، واتجاه RTL العربي لتحصل على واجهة احترافية فائقة السرعة والإتاحة:
<pre class="p-3 border rounded mb-0"><code>
// PurgeCSS safelist for BS5 JS
safelist: [
'show', 'fade', 'collapsing',
'modal-backdrop',
/^bs-(tooltip|popover)/
]
</code></pre>يلخص الجدول المرجعي الختامي أدوات واجهة Utilities API واستراتيجيات تحسين الأداء للإنتاج:
| الأداة أو الاستراتيجية | الصيغة القياسية | العائد الهندسي في الإنتاج |
|---|---|---|
| إنشاء أداة خدمية جديدة | $utilities: map-merge(...) | توليد كلاسات مخصصة متناسقة مع معمارية الإطار |
| توليد التجاوب والحالات | responsive: true, state: hover | توفير نسخ الشاشات ولاحقة -hover آلياً |
| حذف أداة غير مستخدمة | "float": null في $utilities | إزالة عشرات الكلاسات الزائدة من ملف CSS المترجم |
وحدات جافاسكريبت ESM | import Modal from 'bootstrap/js/dist/modal' | حذف الإضافات غير المستخدمة عبر Tree-Shaking |
قائمة حماية PurgeCSS | safelist: ['show', 'collapsing', ...] | تقليص CSS بأمان دون إفساد الكلاسات المولدة بجافاسكريبت |
| ضغط الشبكة وفحص الإتاحة | Brotli + فحص RTL وWCAG | فتح فوري للصفحة وتجربة مستخدم شاملة خالية من الأخطاء |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتممت في هذا الدرس الختامي احتراف واجهة Utilities API لتوليد وتقليم الكلاسات الخدمية برمجياً، والاستيراد الانتقائي لوحدات جافاسكريبت القياسية، وتأمين حزمة الإنتاج بأعلى سرعة وكفاءة.
الخطوة التالية والدرس القادم
تهانينا على إتمام كورس بوتستراب 5.3 الشامل من الأساسيات وحتى التخصيص المعماري المتقدم؛ انطلق الآن لتطبيق ما تعلمته في بناء واجهات ويب عربية وعالمية متجاوبة ومتاحة وعالية الأداء!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Utilities API واجهة توليد الأدوات الخدمية
- محرك Sass البرمجي في بوتستراب 5 لتوليد الكلاسات الخدمية أو تعديلها أو حذفها من خريطة مركزية موحدة.
- للمراجعة
- 02 State Variants (state: hover) نسخ الحالات التفاعلية للأدوات
- خيار في خريطة الأدوات يولد تلقائياً كلاسات تفاعلية بلاحقة -hover أو -focus عند مرور المؤشر أو التركيز.
- للمراجعة
- 03 Tree-Shaking التخلص الآلي من الكود غير المستخدم
- عملية استبعاد الوحدات البرمجية غير المستوردة تلقائياً أثناء بناء حزمة جافاسكريبت النهائية.
- للمراجعة
- 04 PurgeCSS Safelist قائمة الحماية من الحذف الآلي
- قائمة الكلاسات المحمية التي يضيفها جافاسكريبت وقت التشغيل لمنع أدوات تنحيف CSS من حذفها بالخطأ.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 API API
- Application Programming Interface
- الواجهة التنظيمية التي توفرها خريطة $utilities لبرمجة وتخصيص كلاسات بوتستراب الخدمية.
- للمراجعة
- 02 ESM ESM
- ECMAScript Modules
- نظام الوحدات القياسي في جافاسكريبت الحديثة الذي يتيح استيراد إضافات بوتستراب 5 فرادى.
- للمراجعة
- 03 CWV CWV
- Core Web Vitals
- مقاييس سرعة واستقرار الصفحة التي تتحسن مباشرة بتقليص حجم ملفات التنسيق والسكريبت.
- للمراجعة
- 04 KB KB
- Kilobyte
- وحدة قياس حجم ملفات الويب التي نهدف لخفضها عبر الاستيراد الانتقائي وضغط الخادم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اكتب مقطع Sass يدمج أداة جديدة باسم "cursor" داخل $utilities مع تحديد الخاصية cursor والبادئة cursor وتفعيل responsive: true والقيم pointer وgrab وnot-allowed.
-
وضّح كيفية إلغاء أداة "float" في خريطة $utilities عبر القيمة null، واذكر أربعة كلاسات ديناميكية في بوتستراب يجب حمايتها داخل safelist.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
كيف تحذف مجموعة كلاسات خدمية غير مستخدمة (مثل "float") بالكامل عبر واجهة Utilities API؟
بضبط قيمة المفتاح على null داخل خريطة $utilities فيتخطى مولّد الإطار إنشاء كلاساتها نهائياً.
ما الخيار الذي يُفعّل داخل تعريف الأداة في $utilities لتوليد نسخ نقاط التوقف المتجاوبة تلقائياً؟
يوجّه الخيار responsive: true مولّد الأدوات لإنشاء نسخ لجميع نقاط التوقف القياسية.
ما اسم الكلاس الناتج عند تفعيل الخيار state: hover على أداة الشفافية للقيمة 100؟
يلحق بوتستراب اسم الحالة في نهاية اسم الكلاس ليصبح .opacity-100-hover مطبقاً عند التمرير.
هل تتطلب إضافة النافذة الحوارية Modal وجود مكتبة @popperjs/core عند استيرادها منفردة كوحدة ESM؟
خطأ؛ تعتمد إضافات Dropdown وTooltip وPopover فقط على Popper، بينما تعمل Modal بدونها.
لماذا يجب إدراج كلاسات مثل .modal-backdrop و.collapsing و.show ضمن قائمة الحماية safelist في PurgeCSS؟
لأن جافاسكريبت ينشئها ويضيفها ديناميكياً وقت التشغيل ولا تكون مكتوبة صراحةً في ملفات HTML الثابتة.
هل يلزم وضع تعديلات خريطة $utilities قبل سطر استيراد "bootstrap/scss/utilities/api"؟
صحيح؛ لأن ملف utilities/api هو المسؤول عن قراءة الخريطة وتوليد الكلاسات النهائية منها.
أي سطر استيراد يجلب وحدة Modal فقط في بيئات البناء الحديثة لتقليص حجم الحزمة؟
يجلب السطر import Modal from 'bootstrap/js/dist/modal' كود النافذة الحوارية وحده فقط.
هل يحتاج بوتستراب 5.3 إلى مكتبة jQuery في بيئة الإنتاج عند استيراد وحدات ES Modules؟
خطأ؛ كُتب بوتستراب 5 بالكامل بجافاسكريبت القياسية النقية بدون أي اعتماد على jQuery.