الفرق بين المراجعتين ل"Bootstrap/shadows"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude> استفد من رسائل التنبيه المرنة ال...') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude> | ||
| − | + | أضف الظلال أو أزلها عن العناصر باستخدام أدوات <code>box-shadow</code>. | |
| + | == أمثلة == | ||
| + | ظلال المكونات مُعطَّلة افتراضيًا في 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-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> | ||
| + | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
| − | * [https://getbootstrap.com/docs/4.5/ | + | * [https://getbootstrap.com/docs/4.5/utilities/shadows/ صفحة shadows في توثيق Bootstrap]. |
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
مراجعة 12:08، 19 يوليو 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>