2.3、Bootstrap V4自学之路------布局---媒体对象

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

1、简单的一个媒体样式

2、媒体嵌套

3、媒体对齐    

4、媒体列表

PS：说在前面两个知识点：data-src 和 holder.js

Holder.js完全在客户端上呈现图像占位符。在线和离线工作，并提供一个可链接的API的风格和轻松的创建占位符。在线和离线工作，并提供一个可链接的API的风格和轻松的创建占位符。

使用holder.js需要引入holder.js文件。

<script src="//cdn.bootcss.com/holder/2.9.3/holder.js"></script>

data-src：数据来源。google无法访问，布吉岛啊，好像很厉害的样子。

1、简单的一个媒体样式

<div class="media">
  <a class="media-left" href="#">
    <img class="media-object"  data-src="holder.js/60x60"  alt="Generic placeholder image">
  </a>
  <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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</P>
  </div>
</div>

现在简化一下：

<div "media">                          最外层 媒体框 media
  <a "media-left">                      中间层1：图片层，class控制位置 media-left
    <img "media-object"/>                  最里层1：显示图片内容  media-object
  </a>
  <div "media-body">                    中间层2：媒体文总字层    media-body
    <h4 "media-heading">标题名</h4>        最里层2.1 标题名 media-heading
     <P>内容</P>                     最里层2.2 标题内容 直接<p>标签内写 or 直接写内容。
        <!--如果嵌套，再写一个media放在这里，这里只是mark下 --> 
  </div>
</div>

2、媒体嵌套

M<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    <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">Nested media heading</h4>
        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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

PS：这里要说2个点，第一，验证media-left和media-right的显示区别。        

        第二，媒体<a>标签嵌套，与第一个列子相比不在media-left层。

        效果则，只能点击图片区域才能触发<a>标签。（推荐）

        之前的效果是，点击整个左边媒体图片的空白处也会触发<a>标签。

3、媒体对齐

媒体图标对齐：media-left 、 media-right 、 media-middle、 media-bottom

PS：media-left 或者 right，可以和media-middle或者bottom共存。如果没写middle或者bottom则是在顶层。

PS：如果是媒体文字层，内容对齐。可以在media-body内使用多个<P>标签自动换行对齐。

4、媒体列表

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">第一层第一个标题</h4>
      <p>第一层第一个内容.</p>
      <p>第一层第一个内容.</p>
      <p>第一层第一个内容.</p>
      <!-- 插入嵌套媒体 -->
      <div class="media">
        <a class="media-right media-middle" href="#">
          <img class="media-object" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
        </a>
        <div class="media-body">
          <h4 class="media-heading">第二层第一个标题</h4>
          第二层第一个内容<br/>
          第二层第一个内容<br/>
          第二层第一个内容<br/>
          <!-- 插入嵌套媒体 -->
          <div class="media">
            <div class="media-right media-bottom">
              <a href="#">
                <img class="media-object" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">第三层标题</h4>
              第三层内容<br/>
              第三层内容<br/>
              第三层内容<br/>
            </div>
          </div>
        </div>
      </div>
      <!-- 插入嵌套媒体t -->
      <div class="media">
        <div class="media-right">
          <a href="#">
            <img class="media-object" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">第二层第二个标题</h4>
            第二层第二个内容<br/>
            第二层第二个内容<br/>
            第二层第二个内容<br/>
        </div>
      </div>
    </div>
  </li>
  <li class="media">
    <div class="media-body">
      <h4 class="media-heading">第一层第二个标题</h4>
          第一层第二个内容<br/>
          第一层第二个内容<br/>
          第一层第二个内容<br/>
    </div>
    <div class="media-right">
      <a href="#">
        <img class="media-object" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
      </a>
    </div>
  </li>
</ul>

PS：媒体列表的重点是借助<ul><li>标签实现的。

        如果使用媒体列表，则最外层<ul>使用media-list引入，

        <li>则是media的每个媒体单元。

转载于:https://my.oschina.net/asktao/blog/644029