الفرق بين المراجعتين لصفحة: «Bootstrap/media object»
إضافة عنوان |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:كائن الوسائط Media object في إطار العمل Bootstrap}}</noinclude> | <noinclude>{{DISPLAYTITLE:كائن الوسائط Media object في إطار العمل Bootstrap}}</noinclude> | ||
توثيق وأمثلة على استخدام كائن الوسائط | توثيق وأمثلة على استخدام كائن الوسائط (media object) في إطار العمل Bootstrap لإنشاء مكوّنات ذات نمط عرض شديد التكرار مثل التعليقات في المدونّات، والتغريدات وما شابه ذلك. | ||
== مثال == | == مثال == | ||
يُساعد كائن الوسائط في بناء مكوِّنات معقَّدة وذات نمط تكراري تحوي وسائط جنبًا لجنب مع محتوى لا يلتفّ حول هذه الوسائط. علاوةً على هذه الوظيفة فإنّ كائن الوسائط لا يحتاج - بفضل استخدام Flexbox - إلّا إلى صنفيْن. | يُساعد كائن الوسائط في بناء مكوِّنات معقَّدة وذات نمط تكراري تحوي وسائط جنبًا لجنب مع محتوى لا يلتفّ حول هذه الوسائط. علاوةً على هذه الوظيفة فإنّ كائن الوسائط لا يحتاج - بفضل استخدام Flexbox - إلّا إلى صنفيْن. | ||
يوجد أدناه مثال على كائن وسائط وحيد. لا نحتاج سوى لصنفيْن هما: الصّنف المغلِّف <code>.media</code> وصنف | يوجد أدناه مثال على كائن وسائط وحيد. لا نحتاج سوى لصنفيْن هما: الصّنف المغلِّف <code>.media</code> وصنف المحتوى <code>.media-body</code>. تُستخدَم [[Bootstrap/spacing|أدوات التباعد]] للتحكّم في الحاشيّات والهوامش الاختيارية.<syntaxhighlight lang="html"> | ||
<div class="media"> | <div class="media"> | ||
<img class="mr-3" | <img src="..." class="mr-3" alt="..."> | ||
<div class="media-body"> | <div class="media-body"> | ||
<h5 class="mt-0">Media heading</h5> | <h5 class="mt-0">Media heading</h5> | ||
| سطر 13: | سطر 13: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight>تحذير: علّة في Flex تجعل Internet Explorer (10 و11) لا يتعامل مع العناصر السطريّة (inline) بوصفها عناصر Flex. لا يعرض متصفّح Internet Explorer (10 و11) العناصر السطريّة مثل الروابط والصوّر (نفس الأمر ينطبق على الصنفيْن المزيَّفيْن <code>[[CSS/::before|::before]]</code> و <code>[[CSS/::after|::after]]</code>) بصيغة عناصر Flex. الحلّ الوحيد لهذه العلّة هو تعيين قيمة غير سطريّة (مثلاً: <code>block</code>، أو <code>inline-block</code> أو <code>flex</code>) إلى الخاصية <code>[[CSS/display|display]]</code>. يقترح المطوّرون في Bootstrap استخدامَ الصّنف <code>.d-flex</code> أو أداةً من [[Bootstrap/display|أدوات العرض]] لحلّ المشكلة. | |||
</syntaxhighlight> | |||
لا يعرض متصفّح Internet Explorer (10 و11) العناصر السطريّة مثل الروابط والصوّر (نفس الأمر ينطبق على الصنفيْن المزيَّفيْن <code>::before</code> و <code>::after</code>) بصيغة عناصر Flex. الحلّ الوحيد لهذه العلّة هو تعيين قيمة غير سطريّة ( | |||
== التداخل بين مستويات كائنات الوسائط == | == التداخل بين مستويات كائنات الوسائط == | ||
يمكن إنشاء مستويات تداخل غير منتهية من كائنات الوسائط؛ مع أن التوقّف عند حدّ مّا أمر منصوح به. ضع كائن الوسائط<code>.media</code> ذا المستوى الفرعي داخل عنصُر المحتوى <code>.media-body</code> في الكائن ذي المستوى الأعلى منه مباشرة.<syntaxhighlight lang="html"> | يمكن إنشاء مستويات تداخل غير منتهية من كائنات الوسائط؛ مع أن التوقّف عند حدّ مّا أمر منصوح به. ضع كائن الوسائط<code>.media</code> ذا المستوى الفرعي داخل عنصُر المحتوى <code>.media-body</code> في الكائن ذي المستوى الأعلى منه مباشرة.<syntaxhighlight lang="html"> | ||
<div class="media"> | <div class="media"> | ||
<img class="mr-3" | <img src="..." class="mr-3" alt="..."> | ||
<div class="media-body"> | <div class="media-body"> | ||
<h5 class="mt-0">Media heading</h5> | <h5 class="mt-0">Media heading</h5> | ||
| سطر 29: | سطر 24: | ||
<div class="media mt-3"> | <div class="media mt-3"> | ||
<a class=" | <a class="mr-3" href="#"> | ||
<img src="..." alt=" | <img src="..." class="mr-3" alt="..."> | ||
</a> | </a> | ||
<div class="media-body"> | <div class="media-body"> | ||
| سطر 39: | سطر 34: | ||
</div> | </div> | ||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| سطر 82: | سطر 75: | ||
== الترتيب == | == الترتيب == | ||
توجد طريقتان لتغيير ترتيب محتوى كائنات الوسائط: الأولى بتغيير ترتيب وسوم HTML والثانية بإضافة تنسيقات Flexbox مُخصَّصة تعدّل قيمة الخاصيّة <code>order</code> (إلى عدد صحيح تختاره).<syntaxhighlight lang="html"> | توجد طريقتان لتغيير ترتيب محتوى كائنات الوسائط: الأولى بتغيير ترتيب وسوم HTML والثانية بإضافة تنسيقات Flexbox مُخصَّصة تعدّل قيمة الخاصيّة <code>[[CSS/order|order]]</code> (إلى عدد صحيح تختاره).<syntaxhighlight lang="html"> | ||
<div class="media"> | <div class="media"> | ||
<div class="media-body"> | <div class="media-body"> | ||
| سطر 88: | سطر 81: | ||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. | ||
</div> | </div> | ||
<img class="ml-3" | <img src="..." class="ml-3" alt="..."> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== قائمة وسائط == | == قائمة وسائط == | ||
تتيح المتطلّبات البنيويّة القليلة التي تحتاجها كائنات الوسائط استخدامَ أصنافها على عناصر القوائم في HTML. أضف الصّنف <code>.list-unstyled</code> إلى العنصر <code><nowiki><ul></nowiki></code> أو <code><nowiki><ol></nowiki></code> لحذف تنسيقات القوائم المبدئيّة في المتصفّحات ثم طبّق الصّنف <code>.media</code> على عناصر القائمة (<code><nowiki><li></nowiki></code>). يمكن استخدام [[Bootstrap/spacing|أدوات التباعد]] إن احتجت لتنسيقات أكثر | تتيح المتطلّبات البنيويّة القليلة التي تحتاجها كائنات الوسائط استخدامَ أصنافها على عناصر القوائم في HTML. أضف الصّنف <code>.list-unstyled</code> إلى العنصر <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> أو <code>[[HTML/ol|<nowiki><ol></nowiki>]]</code> لحذف تنسيقات القوائم المبدئيّة في المتصفّحات ثم طبّق الصّنف <code>.media</code> على عناصر القائمة (<code>[[HTML/li|<nowiki><li></nowiki>]]</code>). يمكن استخدام [[Bootstrap/spacing|أدوات التباعد]] إن احتجت لتنسيقات أكثر تخصيصًا.<syntaxhighlight lang="html"> | ||
<ul class="list-unstyled"> | <ul class="list-unstyled"> | ||
<li class="media"> | <li class="media"> | ||
<img class="mr-3" | <img src="..." class="mr-3" alt="..."> | ||
<div class="media-body"> | <div class="media-body"> | ||
<h5 class="mt-0 mb-1">List-based media object</h5> | <h5 class="mt-0 mb-1">List-based media object</h5> | ||
| سطر 105: | سطر 95: | ||
</li> | </li> | ||
<li class="media my-4"> | <li class="media my-4"> | ||
<img class="mr-3" | <img src="..." class="mr-3" alt="..."> | ||
<div class="media-body"> | <div class="media-body"> | ||
<h5 class="mt-0 mb-1">List-based media object</h5> | <h5 class="mt-0 mb-1">List-based media object</h5> | ||
| سطر 112: | سطر 102: | ||
</li> | </li> | ||
<li class="media"> | <li class="media"> | ||
<img class="mr-3" | <img src="..." class="mr-3" alt="..."> | ||
<div class="media-body"> | <div class="media-body"> | ||
<h5 class="mt-0 mb-1">List-based media object</h5> | <h5 class="mt-0 mb-1">List-based media object</h5> | ||
| سطر 119: | سطر 109: | ||
</li> | </li> | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/components/media-object/ صفحة Media object في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | |||
[[تصنيف:Bootstrap layout|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 10:02، 12 يوليو 2020
توثيق وأمثلة على استخدام كائن الوسائط (media object) في إطار العمل Bootstrap لإنشاء مكوّنات ذات نمط عرض شديد التكرار مثل التعليقات في المدونّات، والتغريدات وما شابه ذلك.
مثال
يُساعد كائن الوسائط في بناء مكوِّنات معقَّدة وذات نمط تكراري تحوي وسائط جنبًا لجنب مع محتوى لا يلتفّ حول هذه الوسائط. علاوةً على هذه الوظيفة فإنّ كائن الوسائط لا يحتاج - بفضل استخدام Flexbox - إلّا إلى صنفيْن.
يوجد أدناه مثال على كائن وسائط وحيد. لا نحتاج سوى لصنفيْن هما: الصّنف المغلِّف .media وصنف المحتوى .media-body. تُستخدَم أدوات التباعد للتحكّم في الحاشيّات والهوامش الاختيارية.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
تحذير: علّة في Flex تجعل Internet Explorer (10 و11) لا يتعامل مع العناصر السطريّة (inline) بوصفها عناصر Flex. لا يعرض متصفّح Internet Explorer (10 و11) العناصر السطريّة مثل الروابط والصوّر (نفس الأمر ينطبق على الصنفيْن المزيَّفيْن ::before و ::after) بصيغة عناصر Flex. الحلّ الوحيد لهذه العلّة هو تعيين قيمة غير سطريّة (مثلاً: block، أو inline-block أو flex) إلى الخاصية display. يقترح المطوّرون في Bootstrap استخدامَ الصّنف .d-flex أو أداةً من أدوات العرض لحلّ المشكلة.
التداخل بين مستويات كائنات الوسائط
يمكن إنشاء مستويات تداخل غير منتهية من كائنات الوسائط؛ مع أن التوقّف عند حدّ مّا أمر منصوح به. ضع كائن الوسائط.media ذا المستوى الفرعي داخل عنصُر المحتوى .media-body في الكائن ذي المستوى الأعلى منه مباشرة.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." class="mr-3" alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
المحاذاة
تمكن محاذاة الوسائط في كائن الوسائط - عبر أدوات تخطيط Flexbox - جنب المحتوى (.media-body) إلى الأعلى (القيمة المبدئية)، أو جهة الوسط أو إلى الأسفل.
- إلى الأعلى
<div class="media">
<img class="align-self-start mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
- جهة الوسط
<div class="media">
<img class="align-self-center mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
- إلى الأسفل
<div class="media">
<img class="align-self-end mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
الترتيب
توجد طريقتان لتغيير ترتيب محتوى كائنات الوسائط: الأولى بتغيير ترتيب وسوم HTML والثانية بإضافة تنسيقات Flexbox مُخصَّصة تعدّل قيمة الخاصيّة order (إلى عدد صحيح تختاره).
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img src="..." class="ml-3" alt="...">
قائمة وسائط
تتيح المتطلّبات البنيويّة القليلة التي تحتاجها كائنات الوسائط استخدامَ أصنافها على عناصر القوائم في HTML. أضف الصّنف .list-unstyled إلى العنصر <ul> أو <ol> لحذف تنسيقات القوائم المبدئيّة في المتصفّحات ثم طبّق الصّنف .media على عناصر القائمة (<li>). يمكن استخدام أدوات التباعد إن احتجت لتنسيقات أكثر تخصيصًا.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>