Bootstrap学习日记之多媒体对象

多媒体对象是什么？

媒体是一组具有特殊板式的组件，用来设计图文编排的效果，通常由一个向左或者向右的媒体对象（图像，视频，音频等）和一个媒体内容构成。媒体对象可以用更少的代码实现媒体对象与文字的混排

创建基本多媒体对象

在class="media"中的<div>中编写多媒体对象
在以上的<div>中添加多媒体对象对齐方式容器(可以是带有超链接的<a>，也可以是<div>)，对齐方式是class="media-left或者,media-right"
在多媒体对象对齐方式中添加多媒体对象class="media-object"（多媒体对象可以是图像，音频或者视频）
在class="media"的<div>下添加class="media-body"编写多媒体对象的内容（例如文本或者标题，其中标题为class="media-heading"）

 <div class="media">  <!--创建多媒体组件容器-->
        <a class="media-left" href="#">  <!--创建多媒体对齐方式容器-->
            <img src="img/cat.png" class="media-object">   <!--创建多媒体对象>
        </a>
        <div class="media-body">     <!--创建多媒体组件内容>
            <h4 class="media-heading">这是标题</h4>  <!--创建多媒体标题-->
            <p>这是文本</p>           <!--创建多媒体内容-->
        </div>
    </div>

代码解读：我们首先创建了一个多媒体组件（class="media"），然后在多媒体组件中创建多媒体对齐方式容器（class="media-left"）和多媒体内容块（class="media-body"），在多媒体对齐方式容器下创建多媒体对象（class="media-object"）。

运行结果

创建嵌套的多媒体对象

在class="media-body"中填写另一个class="media"就可以实现多媒体的嵌套了

<div class="media">
      <div class="media-left">
          <img src="img/cat.png" class="media-object">
      </div>
      <div class="media-body">
          <h4 class="media-heading">标题</h4>
          <p>实例文本</p>
          <div class="media">
              <a class="media-left">
                  <img src="img/cat.png" class="media-object">
              </a>
              <div class="media-body">
                  <h4 class="media-heading">标题</h4>
                  <p>media嵌套</p>
              </div>
          </div>
      </div>
  </div

运行结果

创建无序列表嵌套的多媒体对象

添加<ul class="media-list">
将<div class="media"></div>换成无序列表中的<li class="media"></li>

<ul>
  <li class="media">
      <div class="media-left">
          <img src="img/cat.png" class="media-object">
      </div>
      <div class="media-body">
          <h4 class="media-heading">标题一</h4>
          <p>嵌套一</p>
          <div class="media">
              <a class="media-left">
                  <img src="img/cat.png" class="media-object">
              </a>
              <div class="media-body">
                  <h4 class="media-heading">标题二</h4>
                  <p>嵌套二</p>
                  <div class="media">
                      <a href="#" class="media-left">
                          <img class="media-object" src="img/cat.png">
                      </a>
                      <div class="media-body">
                          <div class="media-heading">标题三</div>
                          <p>嵌套三</p>
                      </div>
                  </div>
              </div>
              <div class="media">
                  <a class="media-left" href="#">
                      <img src="img/cat.png" class="media-object">
                  </a>
                  <div class="media-body">
                      <h4 class="media-heading">嵌套二</h4>
                      <p>嵌套二</p>
                  </div>
              </div>
          </div>
      </div>
  </li>
    <li class="media">
        <a href="#" class="pull-right">
            <img class="media-object" src="img/cat.png">
        </a>
        <div class="media-body">
            <h4>嵌套一</h4>
            <p>嵌套一</p>
        </div>
    </li>
</ul>

代码解读：

注意在这我们用了，pull-right，为什么呢？因为在media中使多媒体对象向右浮动是class="media-right"，此标签要发挥作用，应当是在class="media-body"后，而不是在前

运行结果

媒体对齐方式除了media-left、media-right以外还有居中对齐的media-middley以及底部对齐的media-bottom

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/