[basic] BS3 - Media Object (BS미디어객체) - 썸네일위치

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 다음에 위치.