الفرق بين المراجعتين لصفحة: «Bootstrap/shadows»

من موسوعة حسوب
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude> استفد من رسائل التنبيه المرنة ال...'
 
لا ملخص تعديل
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude>
<noinclude>{{DISPLAYTITLE:مكوِّن الظلال Shadows في إطار العمل Bootstrap}}</noinclude>
استفد من رسائل التنبيه المرنة التي يوفّرها إطار العمل Bootstrap لإظهار رسائل تغذيّة راجعة للإجراءات النمطيّة التي يقوم بها الزوّار.
أضف الظلال أو أزلها عن العناصر باستخدام أدوات <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/components/alerts/ صفحة Alerts في توثيق Bootstrap].
* [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>

مصادر