الفرق بين المراجعتين لصفحة: «Bootstrap/embed»
إضافة محتوى الصفحة |
4.5 |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:العناصر المُضمَّنة Embeds في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:العناصر المُضمَّنة Embeds في إطار العمل Bootstrap}}</noinclude> | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
ضمِّن مقاطع فيديو أو عروض شرائح متجاوبة تحتفظ بتناسب أبعادها على أيّ جهاز اعتمادًا على على عرض العنصُر الأب باستخدام أدوات التضمين | ضمِّن مقاطع فيديو أو عروض شرائح متجاوبة تحتفظ بتناسب أبعادها على أيّ جهاز اعتمادًا على على عرض العنصُر الأب باستخدام أدوات التضمين (embed) التي يوفّرها إطار العمل Bootstrap. | ||
== حول أدوات التضمين == | == حول أدوات التضمين == | ||
تُطبَّق قواعد التنسيق مباشرةً على العناصر <code><iframe></code>، و<code><embed></code>، و<code><video></code> و<code><object></code>. يمكن كذلك استخدام الصنف <code>.embed-responsive-item</code>. | تُطبَّق قواعد التنسيق مباشرةً على العناصر <code>[[HTML/iframe|<iframe>]]</code>، و <code>[[HTML/embed|<embed>]]</code>، و <code>[[HTML/video|<video>]]</code> و <code>[[HTML/object|<object>]]</code>. يمكن كذلك استخدام الصنف <code>.embed-responsive-item</code>إن أردت مطابقة تنسيقات السمات الأخرى. | ||
'''ملحوظة:''' لا داعي لتعيين الخاصيّة <code>frameborder="0"</code> على الإطار <code><iframe></code> فأدوات التضمين تحذف حدود الإطار. | '''ملحوظة:''' لا داعي لتعيين الخاصيّة <code>frameborder="0"</code> على الإطار <code>[[HTML/iframe|<iframe>]]</code> فأدوات التضمين تحذف حدود الإطار. | ||
== مثال == | == مثال == | ||
غلِّف أي عنصُر تضمين - مثل <code><iframe></code> - في عنصُر أب يُطبَّق عليه الصنف <code>.embed-responsive</code> ونسبة | غلِّف أي عنصُر تضمين - مثل <code>[[HTML/ifreame|<iframe>]]</code> - في عنصُر أب يُطبَّق عليه الصنف <code>.embed-responsive</code> ونسبة أبعاد (aspect ratio). استخدام الصنف <code>.embed-responsive-item</code> ليس واجبًا، إلّا أنّ مطوِّري Bootstrap يشجِّعون عليه.<syntaxhighlight lang="html"> | ||
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> </div> | <div class="embed-responsive embed-responsive-16by9"> | ||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> | |||
</div> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == نسب الأبعاد (aspect ratios) == | ||
يمكن تخصيص | يمكن تخصيص نسب الأبعاد (نسبة الطول إلى العرض) باستخدام الأصناف المعدِّلة.<syntaxhighlight lang="html"> | ||
<!-- نسبة باعيّة تساوي 21:9--> | <!-- نسبة باعيّة تساوي 21:9--> | ||
<div class="embed-responsive embed-responsive-21by9"> | <div class="embed-responsive embed-responsive-21by9"> | ||
<iframe class="embed-responsive-item" src="..."></iframe> | <iframe class="embed-responsive-item" src="..."></iframe> | ||
</div> | </div> | ||
<!-- نسبة باعيّة تساوي 16:9 --> | <!-- نسبة باعيّة تساوي 16:9 --> | ||
| سطر 31: | سطر 35: | ||
</div> | </div> | ||
<div class="embed-responsive embed-responsive-1by1"> | <div class="embed-responsive embed-responsive-1by1"> | ||
<iframe class="embed-responsive-item" src="..."></iframe> | <iframe class="embed-responsive-item" src="..."></iframe> | ||
| سطر 37: | سطر 40: | ||
</syntaxhighlight>يمكنك تغيير النسبة الباعية التي تريد استخدامها من الملف <code>_variables.scss</code>. في ما يلي مثال لقائمة <code>$embed-responsive-aspect-ratios</code>:<syntaxhighlight lang="scss"> | |||
$embed-responsive-aspect-ratios: ( | |||
(21 9), | |||
(16 9), | |||
(4 3), | |||
(1 1) | |||
) !default; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/utilities/embed/ صفحة Embeds في توثيق Bootstrap]. | ||
المراجعة الحالية بتاريخ 08:36، 14 يوليو 2020
ضمِّن مقاطع فيديو أو عروض شرائح متجاوبة تحتفظ بتناسب أبعادها على أيّ جهاز اعتمادًا على على عرض العنصُر الأب باستخدام أدوات التضمين (embed) التي يوفّرها إطار العمل Bootstrap.
حول أدوات التضمين
تُطبَّق قواعد التنسيق مباشرةً على العناصر <iframe>، و <embed>، و <video> و <object>. يمكن كذلك استخدام الصنف .embed-responsive-itemإن أردت مطابقة تنسيقات السمات الأخرى.
ملحوظة: لا داعي لتعيين الخاصيّة frameborder="0" على الإطار <iframe> فأدوات التضمين تحذف حدود الإطار.
مثال
غلِّف أي عنصُر تضمين - مثل <iframe> - في عنصُر أب يُطبَّق عليه الصنف .embed-responsive ونسبة أبعاد (aspect ratio). استخدام الصنف .embed-responsive-item ليس واجبًا، إلّا أنّ مطوِّري Bootstrap يشجِّعون عليه.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
نسب الأبعاد (aspect ratios)
يمكن تخصيص نسب الأبعاد (نسبة الطول إلى العرض) باستخدام الأصناف المعدِّلة.
<!-- نسبة باعيّة تساوي 21:9-->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- نسبة باعيّة تساوي 16:9 -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- نسبة باعيّة تساوي 4:3 -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
يمكنك تغيير النسبة الباعية التي تريد استخدامها من الملف _variables.scss. في ما يلي مثال لقائمة $embed-responsive-aspect-ratios:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;