كائن الوسائط Media object في إطار العمل Bootstrap

توثيق وأمثلة على استخدام كائن الوسائط (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>

مصادر

صفحة Media object في توثيق Bootstrap.