Bootstrap 4 การใช้งาน Media Object

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

รูปแบบพื้นฐานของ Media Object

Media Object ถูกออกแบบมาให้มีรูปแบบที่เรียบง่าย โดยการใช้คลาส .media เป็นตัวกำหนดโครงสร้างหลักของการแสดงผล และใช้คลาส .media-body สำหรับเนื้อหาข้อความ

<div class="media">
  <img src="image1.jpg" class="mr-3" alt="Media Image" style="width: 64px;">
  <div class="media-body">
    <h5 class="mt-0">หัวข้อเนื้อหา</h5>
    เนื้อหาตัวอย่างที่สามารถแสดงรายละเอียดเพิ่มเติม.
  </div>
</div>

ในตัวอย่างนี้ เราใช้คลาส .mr-3 เพื่อเว้นระยะด้านขวาของรูปภาพออกจากเนื้อหา และรูปภาพถูกกำหนดขนาดด้วย style="width: 64px;"

การจัดเรียง Media Object แบบซ้อนกัน

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

ตัวอย่างการจัดเรียงแบบซ้อน

<div class="media">
  <img src="image1.jpg" class="mr-3" alt="Media Image 1" style="width: 64px;">
  <div class="media-body">
    <h5 class="mt-0">หัวข้อเนื้อหา 1</h5>
    เนื้อหาตัวอย่าง 1
    <div class="media mt-3">
      <img src="image2.jpg" class="mr-3" alt="Media Image 2" style="width: 64px;">
      <div class="media-body">
        <h5 class="mt-0">หัวข้อเนื้อหา 2</h5>
        เนื้อหาตัวอย่าง 2
      </div>
    </div>
  </div>
</div>

ในตัวอย่างนี้ Media Object ตัวที่สองถูกซ้อนภายใน .media-body ของ Media Object ตัวแรก

การจัดวาง Media Object แบบสลับด้าน

นอกจากการวางรูปภาพทางซ้ายและเนื้อหาทางขวาแล้ว เรายังสามารถสลับด้านโดยใช้คลาส .media ได้เช่นกัน ด้วยการใช้คลาส .ml-3 เพื่อเว้นระยะด้านซ้ายของเนื้อหา

ตัวอย่างการสลับด้าน

<div class="media">
  <div class="media-body">
    <h5 class="mt-0">หัวข้อเนื้อหาสลับด้าน</h5>
    เนื้อหาตัวอย่างที่สลับตำแหน่งของรูปภาพและข้อความ
  </div>
  <img src="path-to-image.jpg" class="ml-3" alt="Media Image" style="width: 64px;">
</div>

การประยุกต์ใช้ Media Object กับวิดีโอ

Media Object ไม่จำกัดเพียงแค่การใช้กับรูปภาพ แต่ยังสามารถใช้กับวิดีโอได้เช่นกัน โดยเราสามารถฝังวิดีโอภายในโครงสร้าง Media Object ได้อย่างง่ายดาย

ตัวอย่างการใช้ Media Object กับวิดีโอ

<div class="media">
  <video class="mr-3" width="64" controls>
    <source src="path-to-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="media-body">
    <h5 class="mt-0">วิดีโอใน Media Object</h5>
    เนื้อหาที่เกี่ยวข้องกับวิดีโอ
  </div>
</div>

สรุป

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