شرح صفوف ومحتوى الفقرة
تُعطل الظلال افتراضياً على معظم عناصر بوتستراب لمنح الواجهة مظهراً نظيفاً مسطحاً، لكن يمكنك إبراز البطاقات التفاعلية والقوائم العائمة فوراً بأربع أدوات جاهزة لعمق الظل: .shadow-none لإزالة أي ظل موروث، و.shadow-sm لظل خفيف ناعم حول البطاقات الهادئة، و.shadow للظل القياسي المتوسط، و.shadow-lg للبروز القوي للنوافذ الحوارية والعناصر البارزة:
<div class="p-3 mb-3 bg-body rounded-3 shadow-sm">
Subtle card elevation (.shadow-sm)
</div>
<div class="p-3 mb-3 bg-body rounded-3 shadow">
Standard panel elevation (.shadow)
</div>
<div class="p-3 bg-body rounded-3 shadow-lg">
High modal-like depth (.shadow-lg)
</div>يجمع الجدول المرجعي التالي أدوات الحدود والأبعاد والظلال القياسية في بوتستراب 5.3:
| المجموعة | الكلاسات القياسية | الوظيفة الهندسية |
|---|---|---|
| إضافة وحذف الحدود | .border, .border-start, .border-0 | رسم أو إزالة إطار 1px كلياً أو من جهة منطقية |
| لون وسماكة الإطار | .border-primary, .border-1 .. .border-5 | تلوين الحدود دلالياً وضبط سمكها من 1px إلى 5px |
| استدارة الزوايا | .rounded-0..5, .rounded-pill, .rounded-circle | التحكم بنصف قطر الزوايا وبناء الكبسولات والدوائر |
| الأبعاد النسبية | .w-25..100, .h-25..100, .mw-100 | نسب عرض وارتفاع مئوية مرتبطة بأبعاد الأب |
| أبعاد نافذة العرض | .vw-100, .vh-100, .min-vh-100 | ربط أبعاد القسم بنافذة المتصفح المرئية |
| عمق الظلال | .shadow-none, .shadow-sm, .shadow, .shadow-lg | تدرج البروز البصري من المسطح حتى المرتفع |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس تشكيل العناصر بإضافة وحذف الحدود المنطقية وتلوينها وضبط سماكتها، وتنعيم الزوايا بدرجات rounded والكبسولات والدوائر، والتحكم بنسب العرض والارتفاع وأبعاد النافذة min-vh-100 ودرجات الظلال الأربع.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «العرض والتموضع والفيضان في بوتستراب 5» للتحكم بظهور العناصر وإحداثيات التموضع الدقيق وتثبيت الأشرطة وترتيب الطبقات.