Bootstrap 多媒体对象（Media Object）

Bootstrap 中的多媒体对象（Media Object）,可以在组件中使用图文混排，图像可以左对齐(class="pull-left")或者右对齐(class="pull-right")。可以在 HTML 标签中添加以下两种形式来设置媒体对象：

1、media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

2、media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。

html代码

	<!--.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。-->
  <div class="media">
     <a class="pull-left" href="#">
         <img src="img/1.jpg" style="width: 200px;height: 200px;">
     </a>
     <div class="media-body">
         <h2 class="media-heading">漂亮图片</h2>
		 <p style="font-size: 24px;"> 这是一个漂亮的图片。 这是一个漂亮的图片。
		          这是一个漂亮的图片。 这是一个漂亮的图片。
		              这是一个漂亮的图片。 这是一个漂亮的图片。
		                  这是一个漂亮的图片。 这是一个漂亮的图片。
		                      这是一个漂亮的图片。 这是一个漂亮的图片。
		                       这是一个漂亮的图片。 这是一个漂亮的图片。
		                        这是一个漂亮的图片。 这是一个漂亮的图片。
		                         这是一个漂亮的图片。 这是一个漂亮的图片。
		                      
		 </p>
      </div>
<div class="media">
     <a class="pull-left" href="#">
         <img src="img/1.jpg" style="width: 200px;height: 200px;">
     </a>
     <div class="media-body">
         <h2 class="media-heading">漂亮图片</h2>
		 <p style="font-size: 24px;"> 这是一个漂亮的图片。 这是一个漂亮的图片。
		          这是一个漂亮的图片。 这是一个漂亮的图片。
		              这是一个漂亮的图片。 这是一个漂亮的图片。
		                  这是一个漂亮的图片。 这是一个漂亮的图片。
		                      这是一个漂亮的图片。 这是一个漂亮的图片。
		                       这是一个漂亮的图片。 这是一个漂亮的图片。
		                        这是一个漂亮的图片。 这是一个漂亮的图片。
		                         这是一个漂亮的图片。 这是一个漂亮的图片。
		                      
		 </p>
      </div>

 

效果图