Source

미디어 개체

블로그 댓글, 트윗 등과 같이 고도로 반복적인 구성 요소를 구성하기 위한 Bootstrap의 미디어 개체에 대한 문서 및 예제입니다.

예시

미디어 개체 는 일부 미디어가 해당 미디어를 둘러싸지 않는 콘텐츠 옆에 배치되는 복잡하고 반복적인 구성 요소를 만드는 데 도움이 됩니다 . 또한 flexbox 덕분에 두 개의 필수 클래스만으로 이 작업을 수행합니다.

다음은 단일 미디어 개체의 예입니다. .media래핑 과 콘텐츠 주변의 두 가지 클래스만 필요 .media-body합니다. 선택적 패딩 및 여백은 간격 유틸리티 를 통해 제어할 수 있습니다 .

64x64
미디어 제목
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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 중 하나를 사용하는 것이 좋습니다 .

출처: GitHub의 Flexbugs

중첩

미디어 개체는 무한히 중첩될 수 있지만 어느 시점에서 중지하는 것이 좋습니다. 상위 미디어 개체 .media내에 중첩된 위치에 배치합니다..media-body

64x64
미디어 제목
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
64x64
미디어 제목
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis. 
<div class="media">
  <img class="mr-3" src=".../64x64" 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=".../64x64" 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, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

도넥 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.

<div class="media">
  <img class="align-self-start mr-3" src=".../64x64" 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
Center-aligned media

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.

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.

<div class="media">
  <img class="align-self-center mr-3" src=".../64x64" 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
Bottom-aligned media

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.

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.

<div class="media">
  <img class="align-self-end mr-3" src=".../64x64" 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>

Order

Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the order property (to an integer of your choosing).

Media object
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.
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=".../64x64" alt="Generic placeholder image">
</div>

Media list

Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your <ul> or <ol>, add the .list-unstyled to remove any browser default list styles, and then apply .media to your <li>s. As always, use spacing utilities wherever needed to fine tune.

  • 64x64
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
  • 64x64
    목록 기반 미디어 개체
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.
  • 64x64
    목록 기반 미디어 개체
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis. 
<ul class="list-unstyled">
  <li class="media">
    <img class="mr-3" src=".../64x64" 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=".../64x64" 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=".../64x64" 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>