Source

วัตถุสื่อ

เอกสารประกอบและตัวอย่างสำหรับอ็อบเจ็กต์สื่อของ Bootstrap เพื่อสร้างองค์ประกอบที่ซ้ำซากจำเจ เช่น ความคิดเห็นในบล็อก ทวีต และอื่นๆ

ตัวอย่าง

ออบเจ็กต์สื่อช่วยสร้างองค์ประกอบที่ซับซ้อนและซ้ำซาก โดยวางสื่อบางตัวไว้ข้างๆ เนื้อหาที่ไม่ได้ล้อมรอบสื่อดังกล่าว นอกจากนี้ยังทำสิ่งนี้ได้ด้วยคลาสที่จำเป็นเพียงสองคลาสด้วย flexbox

ด้านล่างนี้เป็นตัวอย่างของวัตถุสื่อเดียว ต้องใช้เพียงสองคลาสเท่านั้น—การห่อ.mediaและ.media-bodyรอบๆ เนื้อหาของคุณ ช่องว่างภายในและระยะขอบเสริมสามารถควบคุมได้ผ่าน ยูทิลิตี้ การเว้นวรรค

หัวเรื่องสื่อ

Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

<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 บน GitHub

การทำรัง

ออบเจ็กต์สื่อสามารถซ้อนกันได้ไม่จำกัด แต่เราแนะนำให้คุณหยุดในบางจุด วาง ซ้อน.mediaภายใน.media-bodyของวัตถุสื่อหลัก

หัวเรื่องสื่อ

<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เนื้อหา ของคุณ

สื่อจัดตำแหน่งบนสุด

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ 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>

สื่อจัดกึ่งกลาง

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ 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>

สื่อที่อยู่ด้านล่าง

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ 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คุณสมบัติ (เป็นจำนวนเต็มที่คุณเลือก)

วัตถุสื่อ

<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>s ของคุณ เช่นเคย ใช้ยูทิลิตี้การเว้นวรรคทุกที่ที่จำเป็นในการปรับแต่ง

วัตถุสื่อตามรายการ
Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส
วัตถุสื่อตามรายการ
Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส
วัตถุสื่อตามรายการ
Cras sit amet nibh libero, ในกราวิดา นูลลา. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum ใน vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ในโฟซิบัส

<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>

วัตถุสื่อ

ตัวอย่าง

หัวเรื่องสื่อ

Flexbug #12: องค์ประกอบแบบอินไลน์ไม่ถือว่าเป็นรายการแบบยืดหยุ่น

การทำรัง

หัวเรื่องสื่อ

หัวเรื่องสื่อ

การจัดตำแหน่ง

สื่อจัดตำแหน่งบนสุด

สื่อจัดกึ่งกลาง

สื่อที่อยู่ด้านล่าง

คำสั่ง

วัตถุสื่อ

รายการสื่อ

วัตถุสื่อตามรายการ

วัตถุสื่อตามรายการ

วัตถุสื่อตามรายการ