Source

미디어 개체

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

예시

미디어 개체 는 일부 미디어가 해당 미디어를 둘러싸지 않는 콘텐츠 옆에 배치되는 복잡하고 반복적인 구성 요소를 만드는 데 도움이 됩니다 . 또한 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="..." 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="..." 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, 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="..." 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, 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-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, 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-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, 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 
<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>추가 한 다음 s에 적용 합니다 . 항상 그렇듯이 미세 조정이 필요한 곳에 간격 유틸리티를 사용하십시오..list-unstyled.media<li>

  • 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.
  • 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="..." 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>