الفرق بين المراجعتين لصفحة: «Bootstrap/sizing»
لا ملخص تعديل |
لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 2: | سطر 2: | ||
استخدم أدوات العرض والطول التي يوفّرها إطار العمل Bootstrap لجعل يأخذ كامل عرض أو طول العنصُر الذي يحويه. | استخدم أدوات العرض والطول التي يوفّرها إطار العمل Bootstrap لجعل يأخذ كامل عرض أو طول العنصُر الذي يحويه. | ||
== الأبعاد نسبة إلى العنصر الأب == | |||
تُولَّد أدوات العرض والطول من الجدول <code>$sizes</code> في الملفّ <code>_variables.scss</code>. تتضمَّن هذه الأدوات مبدئيًّا دعمَ القيّم <code>25%</code>، و<code>50%</code>، و<code>75%</code> و<code>100%</code>. يمكن التعديل على القيّم في الجدول لتوليد أدوات جديدة.<syntaxhighlight lang="html"> | تُولَّد أدوات العرض والطول من الجدول <code>$sizes</code> في الملفّ <code>_variables.scss</code>. تتضمَّن هذه الأدوات مبدئيًّا دعمَ القيّم <code>25%</code>، و<code>50%</code>، و<code>75%</code> و<code>100%</code>. يمكن التعديل على القيّم في الجدول لتوليد أدوات جديدة.<syntaxhighlight lang="html"> | ||
<div class="w-25 p-3" style="background-color: #eee;"> | <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> | ||
<div class="w-50 p-3" style="background-color: #eee;"> | <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> | ||
<div class="w-75 p-3" style="background-color: #eee;"> | <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> | ||
<div class="w-100 p-3" style="background-color: #eee;"> | <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> | ||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div> | |||
</syntaxhighlight><syntaxhighlight lang="html"> | </syntaxhighlight><syntaxhighlight lang="html"> | ||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> | <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> | ||
| سطر 12: | سطر 15: | ||
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 50%</div> | <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 50%</div> | ||
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 75%</div> | <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 75%</div> | ||
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> | <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> | ||
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول تلقائي</div> | |||
</div> | </div> | ||
</syntaxhighlight>يمكن كذلك استخدام الأداتيْن <code>max-width: 100%;</code> و<code>max-height: 100%;</code> حسب الحاجة.<syntaxhighlight lang="html"> | </syntaxhighlight>يمكن كذلك استخدام الأداتيْن <code>[[CSS/max-width|max-width]]: 100%;</code> و<code>[[CSS/max-height|max-height]]: 100%;</code> حسب الحاجة.<syntaxhighlight lang="html"> | ||
<img class="mw-100" data-src="..." alt="Max-width 100%"> | <img class="mw-100" data-src="..." alt="Max-width 100%"> | ||
</syntaxhighlight><syntaxhighlight lang="html"> | </syntaxhighlight><syntaxhighlight lang="html"> | ||
| سطر 20: | سطر 24: | ||
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> | <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> | ||
</div> | </div> | ||
</syntaxhighlight> | |||
== الأبعاد نسبة إلى إطار العرض == | |||
يمكنك تعيين العرض والطول نسبة إلى إطار العرض.<syntaxhighlight lang="html"> | |||
<div class="min-vw-100">Min-width 100vw</div> | |||
<div class="min-vh-100">Min-height 100vh</div> | |||
<div class="vw-100">Width 100vw</div> | |||
<div class="vh-100">Height 100vh</div> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/utilities/sizing/ صفحة Sizing في توثيق Bootstrap.] | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:55، 13 يوليو 2020
استخدم أدوات العرض والطول التي يوفّرها إطار العمل Bootstrap لجعل يأخذ كامل عرض أو طول العنصُر الذي يحويه.
الأبعاد نسبة إلى العنصر الأب
تُولَّد أدوات العرض والطول من الجدول $sizes في الملفّ _variables.scss. تتضمَّن هذه الأدوات مبدئيًّا دعمَ القيّم 25%، و50%، و75% و100%. يمكن التعديل على القيّم في الجدول لتوليد أدوات جديدة.
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">الطول تلقائي</div>
</div>
يمكن كذلك استخدام الأداتيْن max-width: 100%; وmax-height: 100%; حسب الحاجة.
<img class="mw-100" data-src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
الأبعاد نسبة إلى إطار العرض
يمكنك تعيين العرض والطول نسبة إلى إطار العرض.
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>