Source

كائن الوسائط

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

مثال

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

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

64 × 64
عنوان الوسائط
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 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>
Flexbug # 12: لا يتم التعامل مع العناصر المضمنة كعناصر مرنة

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

المصدر: Flexbugs on GitHub

التعشيش

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

64 × 64
عنوان الوسائط
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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
64 × 64
عنوان الوسائط
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 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>

محاذاة

يمكن محاذاة الوسائط الموجودة في كائن الوسائط مع أدوات flexbox المساعدة إلى أعلى (افتراضي) أو وسط أو نهاية .media-bodyالمحتوى الخاص بك.

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

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 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>
64 × 64
وسائط محاذاة للوسط

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 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>
64 × 64
وسائط محاذاة للأسفل

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 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 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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
64 × 64
<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>

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

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

  • 64 × 64
    كائن وسائط قائم على القائمة
    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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
  • 64 × 64
    كائن وسائط قائم على القائمة
    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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
  • 64 × 64
    كائن وسائط قائم على القائمة
    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 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>