Bootstrap multimedia objects


Bootstrap Multimedia Object (Media Object)

In this chapter we will explain the multimedia object (Media Object) in Bootstrap. These abstract object styles are used to create various types of components (such as blog comments). We can use mixed graphics and text in the components, and the images can be left or right aligned. Media objects can be used to mix media objects and text with less code.

The lightweight tagging and easy-to-extend features of media objects are achieved by applying classes to simple tags. You can add the following two forms in the HTML tag to set the media object:

  • .media: This class allows multimedia (images, videos) in the media object , audio) float to the left or right of the content block.

  • .media-list: If you need a list where each item is part of an unordered list, you can use this class. Can be used for comment lists and article lists.

Let's take a look at the following example of the default media object .media:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的媒体对象</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
	  这是一些示例文本。这是一些示例文本。
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
            alt="媒体对象">
         </a>
         <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。 
            这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
         </div>
      </div>
   </div>
</div>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Let's take a look at the following example of media object list.media-list:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 媒体对象列表</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
         alt="通用的占位符图像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒体标题</h4>
         <p>这是一些示例文本。这是一些示例文本。 
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。</p>
         <!-- 嵌套的媒体对象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
               alt="通用的占位符图像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒体标题</h4>
               这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
               <!-- 嵌套的媒体对象 -->
               <div class="media">
                  <a class="pull-left" href="#">
                     <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
                     alt="通用的占位符图像">
                  </a>
                  <div class="media-body">
                     <h4 class="media-heading">嵌套的媒体标题</h4>
                     这是一些示例文本。这是一些示例文本。
					 这是一些示例文本。这是一些示例文本。
					 这是一些示例文本。这是一些示例文本。
					 这是一些示例文本。这是一些示例文本。
					 这是一些示例文本。这是一些示例文本。
                  </div>
               </div>
            </div>
         </div>
         <!-- 嵌套的媒体对象 -->
         <div class="media">
            <a class="pull-left" href="#">
               <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
               alt="通用的占位符图像">
            </a>
            <div class="media-body">
               <h4 class="media-heading">嵌套的媒体标题</h4>
               这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
			   这是一些示例文本。这是一些示例文本。
            </div>
         </div>
      </div>
   </li>
   <li class="media">
      <a class="pull-right" href="#">
         <img class="media-object" src="/upload/course/000/000/010/5806d6ddb047c281.png" 
         alt="通用的占位符图像">
      </a>
      <div class="media-body">
         <h4 class="media-heading">媒体标题</h4>
         这是一些示例文本。这是一些示例文本。
		 这是一些示例文本。这是一些示例文本。
		 这是一些示例文本。这是一些示例文本。
		 这是一些示例文本。这是一些示例文本。
		 这是一些示例文本。这是一些示例文本。
      </div>
   </li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance