الفرق بين المراجعتين ل"Bootstrap/embed"
اذهب إلى التنقل
اذهب إلى البحث
(إنشاء الصفحة) |
(إضافة محتوى الصفحة) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:العناصر المُضمَّنة Embeds في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:العناصر المُضمَّنة Embeds في إطار العمل Bootstrap}}</noinclude> | ||
| − | [[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | + | [[تصنيف:Bootstrap]] |
| + | [[تصنيف:Bootstrap utilities]] | ||
| + | ضمِّن مقاطع فيديو أو عروض شرائح متجاوبة تحتفظ بتناسب أبعادها على أيّ جهاز اعتمادًا على على عرض العنصُر الأب باستخدام أدوات التضمين Embed التي يوفّرها إطار العمل Bootstrap. | ||
| + | |||
| + | == حول أدوات التضمين == | ||
| + | تُطبَّق قواعد التنسيق مباشرةً على العناصر <code><iframe></code>، و<code><embed></code>، و<code><video></code> و<code><object></code>. يمكن كذلك استخدام الصنف <code>.embed-responsive-item</code>. | ||
| + | |||
| + | '''ملحوظة:''' لا داعي لتعيين الخاصيّة <code>frameborder="0"</code> على الإطار <code><iframe></code> فأدوات التضمين تحذف حدود الإطار. | ||
| + | |||
| + | == مثال == | ||
| + | غلِّف أي عنصُر تضمين - مثل <code><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> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == النسب الباعيّة Aspect ratios == | ||
| + | يمكن تخصيص النسب الباعيّة (نسبة الطول إلى العرض، 21:9) باستخدام الأصناف المعدِّلة.<syntaxhighlight lang="html"> | ||
| + | <!-- نسبة باعيّة تساوي 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> | ||
| + | |||
| + | <!-- نسبة باعيّة تساوي 1:1 --> | ||
| + | <div class="embed-responsive embed-responsive-1by1"> | ||
| + | <iframe class="embed-responsive-item" src="..."></iframe> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | == مصادر == | ||
| + | * [https://getbootstrap.com/docs/4.0/utilities/embed/ صفحة Embeds في توثيق Bootstrap]. | ||
مراجعة 00:28، 14 أبريل 2018
ضمِّن مقاطع فيديو أو عروض شرائح متجاوبة تحتفظ بتناسب أبعادها على أيّ جهاز اعتمادًا على على عرض العنصُر الأب باستخدام أدوات التضمين 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) باستخدام الأصناف المعدِّلة.
<!-- نسبة باعيّة تساوي 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>
<!-- نسبة باعيّة تساوي 1:1 -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>