Bootstrap 2 多媒体对象 - Bootstrap 2 基础教程

Bootstrap 2 提供了多个 CSS 类用于创建多媒体对象

这些抽象的对象样式用于建议多种组件类型（如：博客评论），我们可以在组件中使用图文混排，图片可以左对齐或者右对齐

媒体对象可以用更少的代码来实现多媒体对象与文字的混排

我们可以在 HTML 标签中添加以下两种形式来设置媒体对象

.media

该类允许将媒体对象里的多媒体（图像，视频）浮动到内容区块的左边或者右边

.media-list

如果需要一个列表，各项内容是无序列表的一部分，可以使用该类

可用于评论列表与文章列表

下面的范例使用多媒体对象 .media CSS 类

<div class="media">
   <a class="pull-left" href="#">
      <img width="80px" class="media-object" src="/static/i/css/paris.jpg" 
      alt="Media Object">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img width="80px" class="media-object" src="/static/i/css/paris2.jpg" 
      alt="Media Object">
   </a>
   <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      This is some sample text. This is some sample text. 
      This is some sample text. This is some sample text.
      <div class="media">
         <a class="pull-left" href="#">
            <img width="80px" class="media-object" src="/static/i/css/paris1.jpg" 
            alt="Media Object">
         </a>
         <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
         </div>
      </div>
   </div>
</div>

运行范例 »

运行以上范例，输出结果如下

下面的范例使用了多媒体对象 .media-list CSS 类

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img width="80px" class="media-object" src="/static/i/css/paris.jpg" 
         alt="Generic placeholder image">
      </a>
      <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         <p>This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.
            This is some sample text. This is some sample text. 
            This is some sample text. This is some sample text.</p>
         <!-- Nested media object -->
         <div class="media">
            <a class="pull-left" href="#">
               <img width="80px" class="media-object" src="/static/i/css/paris1.jpg"
               alt="Generic placeholder image">
            </a>
            <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               <!-- Nested media object -->
               <div class="media">
                  <a class="pull-left" href="#">
                     <img width="80px" class="media-object" src="/static/i/css/paris2.jpg" 
                     alt="Generic placeholder image">
                  </a>
                  <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text. 
                     This is some sample text. This is some sample text.
                  </div>
               </div>
            </div>
         </div>
         <!-- Nested media object -->
         <div class="media">
            <a class="pull-left" href="#">
               <img width="80px" class="media-object" src="/static/i/css/paris3.jpg" 
               alt="Generic placeholder image">
            </a>
            <div class="media-body">
               <h4 class="media-heading">Nested media heading</h4>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text.
            </div>
         </div>
      </div>
   </li>
   <li class="media">
      <a class="pull-right" href="#">
         <img width="80px" class="media-object" src="/static/i/css/paris.jpg" 
         alt="Generic placeholder image">
      </a>
      <div class="media-body">
         <h4 class="media-heading">Media heading</h4>
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
         This is some sample text. This is some sample text. 
         This is some sample text. This is some sample text.
      </div>
   </li>
</ul>

运行范例 »

运行以上范例，输出结果如下