توليد النسخ المتجاوبة وhover | واجهة Utilities API وتحسين الأداء في بوتستراب 5

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

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

ماذا لو أردت أن يتغير ظل البطاقة أو شفافيتها عند مرور المؤشر :hover أو عبر الشاشات المتجاوبة دون كتابة CSS مخصص لكل حالة؟ يدعم محرك Utilities API مفتاحين سحريين داخل تعريف الأداة:

responsive: true: يولد تلقائياً نسخ -sm و-md و-lg و-xl و-xxl لكل قيمة في الأداة!
state: hover (أو hover focus): يولد كلاسات تنتهي بلاحقة -hover مثل .opacity-100-hover:hover و.shadow-lg-hover:hover لتنشيط التأثير عند التمرير فقط!

الصف 2 كود برمجي

HTML

<!-- 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 &amp; opacity!
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Responsive Hover Variants توليد النسخ المتجاوبة وhover

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

جميع فقرات هذا الدرس (واجهة Utilities API وتحسين الأداء في بوتستراب 5)