Bootstrap Chapter 3: การสร้าง Media Object

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




     สำหรับวิธีสร้าง Media Object โดยใช้ Bootstrap นั้นทำได้อย่างง่ายดาย โดยนำโค้ดตัวอย่างที่อยู่ทางด้านล่างไปใส่ไว้ต่อจากโค้ดเดิมที่สร้างไว้ใน "Bootstrap Chapter 3: การสร้าง Panel" โดยผลลัพธ์แสดงไว้ในรูปที่ 1

<div class="media">
 <img class="media-object pull-left" src="icon/smartphone11.png">
    
 <div class="media-body">
  <h4>Section One</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non posuere mauris, malesuada imperdiet ante. Suspendisse a bibendum sapien.</p>
 </div>
</div>
  

รูปที่ 1

     จากโค้ดตัวอย่างด้านบนจะเห็นว่าส่วนประกอบของ Media Object นั้นจะแบ่งออกเป็น 2 ส่วนหลักคือ ส่วนของคลาส "media-object" เป็นส่วนที่ใช้แสดงรูปภาพของข้อความ โดยในที่นี้ในใส่คลาส "pull-left" เพื่อให้รูปภาพจัดชิดซ้าย ส่วนประกอบที่สองคือ media-body เป็นส่วนที่ใช้สำหรับแสดงเนื้อหาของข้อความ

     นอกจากนี้เรายังสามารถวาง media-object ซ้อน media-object ดังแสดงในโค้ดตัวอย่างด้านล่าง

<div class="media">
 <img class="media-object pull-left" src="icon/smartphone11.png">

  <div class="media-body">
   <h4>Section One</h4>
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non posuere mauris, malesuada imperdiet ante. Suspendisse a bibendum sapien.
   </p>

   <!-- start media object of secton two-->
   <div class="media">
    <img class="media-object pull-left" src="icon/smartphone11.png">

    <div class="media-body">
     <h4>Section Two</h4>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non posuere mauris, malesuada imperdiet ante. Suspendisse a bibendum sapien.
     </p>
    </div>
   </div> <!-- end media object of secton two-->

  </div><!--  end media body of Section one -->
    
</div>

     โดยผลลัพธ์การสร้าง Media Object ซ้อน Media Object แสดงในรูปที่ 2

Reference

-  Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.