Bootstrap 多媒体对象

前言 🔗

• Bootstrap 中的多媒体对象（Media Object），如：图像、视频、音频等。

1、多媒体对象

• 多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

• 实例

  <div class="container">
      <h2>多媒体对象</h2>
  
      <!-- 左对齐 -->
      <div class="media">
          <div class="media-left">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 60px;" />
          </div>
          <div class="media-body">
              <h4 class="media-heading">左对齐</h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
          </div>
      </div>
      <hr>
  
      <!-- 右对齐 -->
      <div class="media">
          <div class="media-body">
              <h4 class="media-heading">右对齐</h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
          </div>
          <div class="media-right">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 60px;" />
          </div>
      </div>
  </div>

• 效果 🔗

  

• 解析

  • 在 <div> 元素上添加 .media 类来创建一个多媒体对象。
  • 使用 .media-left 类让多媒体对象 (图片) 来实现左对齐，同样 .media-right 类实现了右对齐。
  • 文本内容放在 class="media-body" 的 div 中，图片左对齐则放在 class="media-body" 之前，图片右对齐则放在 class="media-body" 之后。

2、顶部、底部、居中对齐

• 多媒体对象可以设置头部、居中、底部对齐，对应的类分别是 .media-top、.media-middle 、.media-bottom。

• 此外，还可以使用 .media-heading 类来设置标题。

• 实例

  <div class="container">
      <h2>多媒体对象</h2>
  
      <div class="media">
          <div class="media-left media-top">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 80px" />
          </div>
          <div class="media-body">
              <h4 class="media-heading">置顶</h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
          </div>
      </div>
      <hr>
      <div class="media">
          <div class="media-left media-middle">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 80px" />
          </div>
          <div class="media-body">
              <h4 class="media-heading">居中</h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
          </div>
      </div>
      <hr>
      <div class="media">
          <div class="media-left media-bottom">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 80px" />
          </div>
          <div class="media-body">
              <h4 class="media-heading">置底</h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
          </div>
      </div>
  </div>

• 效果 🔗

  

3、内嵌多媒体对象

• 一个多媒体对象内还可以包含多个多媒体对象。

• 实例

  <div class="container">
      <h2>内嵌多媒体对象</h2>
      
      <div class="media">
          <div class="media-left">
              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 45px" />
          </div>
          <div class="media-body">
              <h4 class="media-heading">RUNOOB-1 <small><i>Posted on February 19, 2016</i></small></h4>
              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
  
              <!-- 内嵌多媒体对象 -->
              <div class="media">
                  <div class="media-left">
                      <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 45px" />
                  </div>
                  <div class="media-body">
                      <h4 class="media-heading">RUNOOB-2 <small><i>Posted on February 19, 2016</i></small></h4>
                      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
  
                      <!-- 内嵌多媒体对象 -->
                      <div class="media">
                          <div class="media-left">
                              <img src="https://demo.qianchia.com/media/image/demo/avatar.png" class="media-object" style="width: 45px" />
                          </div>
                          <div class="media-body">
                              <h4 class="media-heading">RUNOOB-3 <small><i>Posted on February 19, 2016</i></small></h4>
                              <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

• 效果 🔗