الفرق بين المراجعتين ل"Bootstrap/shadows"
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (←أمثلة) |
|||
سطر 3: | سطر 3: | ||
== أمثلة == | == أمثلة == | ||
− | ظلال المكونات مُعطَّلة افتراضيًا في Bootstrap، ويمكن إتاحتها عبر <code>$enable- | + | ظلال المكونات مُعطَّلة افتراضيًا في Bootstrap، ويمكن إتاحتها عبر <code>$enable-shadows</code>، علاوة على ذلك يمكنك إضافة الظل أو إزالته بسرعة باستخدام أصناف <code>box-shadow</code>. كما تتضمّن دعمًا لـ <code>.shadow-none</code> وثلاثة أحجام افتراضية (لها متغيرات مرتبطة بها لمطابقتها).<syntaxhighlight lang="html"> |
<div class="shadow-none p-3 mb-5 bg-light rounded">لا ظل</div> | <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-sm p-3 mb-5 bg-white rounded">ظل صغير</div> |
مراجعة 09:06، 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>