부트스트랩 미디어 개체
미디어 개체
부트스트랩은 미디어 개체(예: 이미지 또는 비디오)를 일부 콘텐츠의 왼쪽이나 오른쪽에 정렬하는 쉬운 방법을 제공합니다. 블로그 댓글, 트윗 등을 표시하는 데 사용할 수 있습니다.
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
Jane Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
Alicia Keyes 작성일: 2016년 2월 25일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 공연 전 범죄나 편의에 대한 두려움은 없다.
기본 미디어 개체
존 도우
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
존 도우
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
예시
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
설명된 예
클래스 와 함께 <div> 요소를 사용하여 .media미디어 개체에 대한 컨테이너를 만듭니다.
클래스를 사용하여 .media-left미디어 개체(이미지)를 왼쪽에 정렬하거나 .media-right클래스를 사용하여 오른쪽에 정렬합니다.
이미지 옆에 나타나야 하는 텍스트는 class=" media-body"인 컨테이너 내부에 배치됩니다.
.media-heading또한 제목에 사용할 수 있습니다 .
상단, 중간 또는 하단 정렬
media-top미디어 개체는 , media-middle또는 media-bottom클래스 에 따라 위쪽, 중간 또는 아래쪽이 될 수도 있습니다 .
미디어 탑
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 미들
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
미디어 하단
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
예시
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
미디어 개체 중첩
미디어 개체는 중첩될 수도 있습니다(미디어 개체 내부의 미디어 개체):
예시
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
John Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
John Doe 작성일: 2016년 2월 21일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
중첩의 또 다른 예
예시
John Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
John Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
John Doe 작성일: 2016년 2월 21일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
Jane Doe 작성일: 2016년 2월 20일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.
Jane Doe 작성일: 2016년 2월 19일
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다.