Source

كائن الوسائط

توثيق وأمثلة لكائن وسائط Bootstrap لإنشاء مكونات شديدة التكرار مثل تعليقات المدونة والتغريدات وما شابه.

مثال

يساعد كائن الوسائط في بناء مكونات معقدة ومتكررة حيث يتم وضع بعض الوسائط جنبًا إلى جنب مع المحتوى الذي لا يلتف حول الوسائط المذكورة. بالإضافة إلى ذلك ، فإنه يقوم بذلك مع فئتين فقط مطلوبتين بفضل flexbox.

يوجد أدناه مثال على كائن وسائط واحد. مطلوب فئتين فقط - التفاف .mediaوحول .media-bodyالمحتوى الخاص بك. يمكن التحكم في الحشو والهامش الاختياري من خلال أدوات التباعد .

Placeholder 64x64
عنوان الوسائط
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
<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>
Flexbug # 12: لا يتم التعامل مع العناصر المضمنة كعناصر مرنة

لا يعرض Internet Explorer 10-11 العناصر المضمنة مثل الروابط أو الصور (أو ::beforeالعناصر ::afterالزائفة) كعناصر مرنة. الحل الوحيد هو تعيين displayقيمة غير مضمنة (على سبيل المثال ، block، inline-blockأو flex). نقترح استخدام .d-flexإحدى أدوات العرض المساعدة الخاصة بنا كحل سهل.

المصدر: Flexbugs on GitHub

التعشيش

يمكن أن تتداخل كائنات الوسائط بشكل لا نهائي ، على الرغم من أننا نقترح عليك التوقف عند نقطة ما. ضع متداخلًا .mediaفي .media-bodyكائن وسائط أصلي.

Placeholder 64x64
عنوان الوسائط
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
Placeholder 64x64
عنوان الوسائط
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
<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المحتوى الخاص بك.

Placeholder 64x64
الوسائط المحاذاة لأعلى

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

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.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <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>
Placeholder 64x64
وسائط محاذاة للوسط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

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.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <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>
Placeholder 64x64
وسائط محاذاة لأسفل

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

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.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <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 CSS المخصصة لتعيين orderالخاصية (إلى عدد صحيح من اختيارك).

كائن الوسائط
Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
Placeholder 64x64
<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="...">
</div>

قائمة الوسائط

نظرًا لأن كائن الوسائط لديه متطلبات هيكلية قليلة جدًا ، يمكنك أيضًا استخدام هذه الفئات في قائمة عناصر HTML. في <ul>أو <ol>، أضف .list-unstyledإلى لإزالة أي أنماط قائمة افتراضية للمتصفح ، ثم قم بتطبيقها .mediaعلى ملفاتك <li>. كما هو الحال دائمًا ، استخدم أدوات التباعد حيثما دعت الحاجة إلى الضبط الدقيق.

  • Placeholder 64x64
    كائن وسائط قائم على القائمة
    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
  • Placeholder 64x64
    كائن وسائط قائم على القائمة
    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
  • Placeholder 64x64
    كائن وسائط قائم على القائمة
    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
<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>