การสร้างส่วนแสดงรูปภาพและเนื้อหาของข่าวด้วย Media Object ใน Bootstrap

Media Object คือ เป็นส่วนประกอบที่สำคัญหนึ่งใน Bootstrap ซึ่งไว้ใช้สร้างส่วนประกอบในหน้าเว็บไซต์ที่มีรูปแบบซ้ำๆ เช่น การแสดงรูปภาพและเนื้อหาของข่าว หรือการแสดงข้อความในส่วนของคอมเม้นต์บนเว็บบอร์ดต่างๆ

วิธีสร้าง Media Object โดยใช้ Bootstrap นั้นทำได้ดังนี้

<div class="media">
  <a class="media-left" href="#">
    <img class="media-object" data-src="..." alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>
 
วิธีสร้าง media-object ซ้อน media-object ดังแสดงในโค้ดตัวอย่างด้านล่าง

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" data-src="..." alt="Generic placeholder image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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">
      <a class="media-left" href="#">
        <img class="media-object" data-src="..." alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Nested media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. 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>