부트스트랩 4 미디어 개체
미디어 개체
부트스트랩은 콘텐츠와 함께 미디어 개체(예: 이미지 또는 비디오)를 정렬하는 쉬운 방법을 제공합니다. 미디어 개체는 종종 블로그 댓글, 트윗 등을 표시하는 데 사용됩니다.
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
John Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
기본 미디어 개체
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 객체를 생성하려면 .media컨테이너 요소에 클래스를 추가하고 클래스가 있는 자식 컨테이너 내부에 미디어 콘텐츠를 배치합니다 .media-body. 간격 유틸리티를 사용하여 필요에 따라 패딩과 여백을 추가합니다.
예시
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
중첩된 미디어 개체
미디어 개체는 중첩될 수도 있습니다(미디어 개체 내부의 미디어 개체):
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
Jane Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 개체를 중첩하려면 .media컨테이너 내부에 새 컨테이너를 배치합니다 .media-body.
예시
<div class="media border p-3">
<img src="img_avatar3.png" alt="John
Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane
Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div
class="media-body">
<h4>Jane Doe <small><i>Posted on
February 20 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
오른쪽 정렬 미디어 이미지
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 이미지를 오른쪽 정렬하려면 .media-body컨테이너 뒤에 이미지를 추가합니다.
예시
<div class="media border p-3">
<div
class="media-body">
<h4>John Doe <small><i>Posted on
February 19, 2016</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John
Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
상단, 중간 또는 하단 정렬
플렉스 유틸리티, align-self-*클래스를 사용하여 미디어 개체를 위쪽, 중간 또는 아래쪽에 배치합니다.
미디어 탑
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 미들
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 하단
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
예시
<!-- Media top -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start
mr-3" style="width:60px">
<div class="media-body">
<h4>Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>