Source

วัตถุสื่อ

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

ตัวอย่าง

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

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

64x64
หัวเรื่องสื่อ
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ของวัตถุสื่อหลัก

64x64
หัวเรื่องสื่อ
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 ในโฟซิบัส
64x64
หัวเรื่องสื่อ
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 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เนื้อหา ของคุณ

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

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 ในโฟซิบัส

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>
64x64
สื่อจัดกึ่งกลาง

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 ในโฟซิบัส

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>
64x64
สื่อที่อยู่ด้านล่าง

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 ในโฟซิบัส

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คุณสมบัติ (เป็นจำนวนเต็มที่คุณเลือก)

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

  • 64x64
    วัตถุสื่อตามรายการ
    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 ในโฟซิบัส
  • 64x64
    วัตถุสื่อตามรายการ
    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 ในโฟซิบัส
  • 64x64
    วัตถุสื่อตามรายการ
    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>