媒体对象

为什么80%的码农都做不了架构师？>>>   

##1.媒体对象 媒体对象是一些抽象元素，是用来建立复杂繁琐组件（比如说博客评论、推文等）的基础。它支持左对齐内容、右对齐内容、内容对齐选项、嵌套，等等。

##2.媒体对象的组成

1. 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

2. 媒体对像的对象：常使用“media-left”表示，就是媒体对象中的对象，常常是图片

3. 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

4. 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

<div class="media">
  <a class="media-left" href="#">

    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
  </a>
  <div class="media-body">
    <h4 class="media-heading">标题</h4>
          文本
  </div>
</div>

##3. 媒体列表

      <ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="MMVM.png" width="64px " height="64px">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
      
  </li>
   <li class="media">
    <div class="media-left">
      <a href="#">
        <img src="MMVM.png" width="64px " height="64px">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
  </div>
      
  </li>

转载于:https://my.oschina.net/oneboi/blog/882016