Media Object 구문 - 좌우위치
<!-- 왼쪽 배치 -->
<div class="media">
<div class="media-left">
<img src="hz.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">홈짱</h4>
<p>Welcome to Homzzang.com</p>
</div>
</div>
<!-- 오른쪽 배치 -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">홈짱</h4>
<p>Welcome to Homzzang.com</p>
</div>
<div class="media-right">
<img src="hz.png" class="media-object" style="width:60px">
</div>
</div>
※ 오른쪽 배치 경우, .media-right 클래스는 .media-body 클래스 다음에 와야 함.
Media Object 상중하 위치
<!-- 상단 정렬 -->
<div class="media">
<div class="media-left media-top">
<img src="hz.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">제목</h4>
<p>내용</p>
</div>
</div>
<!-- 중단 정렬 -->
<div class="media">
<div class="media-left media-middle">
<img src="hz.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">제목</h4>
<p>내용</p>
</div>
</div>
<!-- 하단 정렬 -->
<div class="media">
<div class="media-left media-bottom">
<img src="hz.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">제목</h4>
<p>내용</p>
</div>
</div>
Media Object 중첩1
<div class="media">
<div class="media-left">
<img src="hz.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">제목 <small><i>소제목</i></small></h4>
<p>내용</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hz.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">제목 <small><i>소제목</i></small></h4>
<p>내용</p>
<!-- Nested media object -->
<div class="media">
<div class="media-left">
<img src="hz.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">제목 <small><i>소제목</i></small></h4>
<p>내용</p>
</div>
</div>
</div>
</div>
</div>
</div>
Media Object 중첩2
(.media-left 와 .media-right 클래스 ) vs. (.pull-left 와 .pull-right 클래스)
.pull-left 와 .pull-right 클래스
BS v3.3.0부터 미디어객체에 사용 폐지예고. (단, 다른 요소엔 여전히 사용 가능.)
.media-left 와 .media-right 클래스
(.pull-left 와 .pull-right 클래스)와 유사하나, 미디어객체에만 사용.
(.pull-left 와 .pull-right 클래스)와 달리, .media-right 는 .media-body 다음에 위치.