عرض مصدر Bootstrap/media object

<noinclude>{{DISPLAYTITLE:كائن الوسائط Media object في إطار العمل Bootstrap}}</noinclude>
توثيق وأمثلة على استخدام كائن الوسائط (media object) في إطار العمل Bootstrap لإنشاء مكوّنات ذات نمط عرض شديد التكرار مثل التعليقات في المدونّات، والتغريدات وما شابه ذلك.

== مثال ==
يُساعد كائن الوسائط في بناء مكوِّنات معقَّدة وذات نمط تكراري تحوي وسائط جنبًا لجنب مع محتوى لا يلتفّ حول هذه الوسائط. علاوةً على هذه الوظيفة فإنّ كائن الوسائط لا يحتاج - بفضل استخدام Flexbox - إلّا إلى صنفيْن.

يوجد أدناه مثال على كائن وسائط وحيد. لا نحتاج سوى لصنفيْن هما: الصّنف المغلِّف <code>‎.media</code> وصنف المحتوى <code>‎.media-body</code>. تُستخدَم [[Bootstrap/spacing|أدوات التباعد]] للتحكّم في الحاشيّات والهوامش الاختيارية.<syntaxhighlight lang="html">
<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <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>


</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|أدوات العرض]] لحلّ المشكلة.

== التداخل بين مستويات كائنات الوسائط ==
يمكن إنشاء مستويات تداخل غير منتهية من كائنات الوسائط؛ مع أن التوقّف عند حدّ مّا أمر منصوح به. ضع كائن الوسائط<code>‎.media</code> ذا المستوى الفرعي داخل عنصُر المحتوى <code>‎.media-body</code> في الكائن ذي المستوى الأعلى منه مباشرة.<syntaxhighlight lang="html">
<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <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="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </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>


</syntaxhighlight>

== المحاذاة ==
تمكن محاذاة الوسائط في كائن الوسائط - عبر أدوات تخطيط Flexbox - جنب المحتوى (<code>‎.media-body</code>) إلى الأعلى (القيمة المبدئية)، أو جهة الوسط أو إلى الأسفل.
* إلى الأعلى
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
* جهة الوسط
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
* إلى الأسفل
<syntaxhighlight lang="html">
<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>


</syntaxhighlight>

== الترتيب ==
توجد طريقتان لتغيير ترتيب محتوى كائنات الوسائط: الأولى بتغيير ترتيب وسوم HTML والثانية بإضافة تنسيقات Flexbox مُخصَّصة تعدّل قيمة الخاصيّة <code>[[CSS/order|order]]</code> (إلى عدد صحيح تختاره).<syntaxhighlight lang="html">
<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 class="ml-3" src="..." alt="Generic placeholder image">
</div>


</syntaxhighlight>

== قائمة وسائط ==
تتيح المتطلّبات البنيويّة القليلة التي تحتاجها كائنات الوسائط استخدامَ أصنافها على عناصر القوائم في 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">
  <li class="media">
    <img class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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 class="mr-3" src="..." alt="Generic placeholder image">
    <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>


</syntaxhighlight>

== مصادر ==
* [https://getbootstrap.com/docs/4.0/layout/media-object/ صفحة Media object في توثيق Bootstrap].
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap layout|{{SUBPAGENAME}}]]