مكوِّن الظلال Shadows في إطار العمل Bootstrap

من موسوعة حسوب
مراجعة 09:39، 21 يوليو 2020 بواسطة جميل-بيلوني (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

أضف الظلال أو أزلها عن العناصر باستخدام أدوات box-shadow.

أمثلة

ظلال المكونات مُعطَّلة افتراضيًا في Bootstrap، ويمكن إتاحتها عبر ‎$enable-shadows، علاوة على ذلك يمكنك إضافة الظل أو إزالته بسرعة باستخدام أصناف box-shadow. كما تتضمّن دعمًا لـ ‎.shadow-none وثلاثة أحجام افتراضية (لها متغيرات مرتبطة بها لمطابقتها).

<div class="shadow-none p-3 mb-5 bg-light rounded">لا ظل</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">ظل صغير</div>
<div class="shadow p-3 mb-5 bg-white rounded">ظل عادي</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">ظل كبير</div>

مصادر