Objets multimédia Bootstrap


Bootstrap Objet multimédia (Media Object)

Dans ce chapitre, nous expliquerons l'objet multimédia (Media Object) dans Bootstrap. Ces styles d'objets abstraits sont utilisés pour créer différents types de composants (tels que des commentaires de blog). Nous pouvons utiliser des graphiques et du texte mixtes dans les composants, et les images peuvent être alignées à gauche ou à droite. Les objets multimédias peuvent être utilisés pour mélanger des objets multimédias et du texte avec moins de code.

Le balisage léger et l'extensibilité facile des objets multimédias sont obtenus en appliquant des classes à un balisage simple. Vous pouvez ajouter les deux formulaires suivants à la balise HTML pour définir l'objet média :

  • .media : Cette classe permet d'ajouter du multimédia (images, vidéos) dans l'objet média, audio) flotte à gauche ou à droite du bloc de contenu.

  • .media-list : Si vous avez besoin d'une liste où chaque élément fait partie d'une liste non ordonnée, vous pouvez utiliser cette classe. Peut être utilisé pour les listes de commentaires et les listes d’articles.

Jetons un coup d'œil à l'instance suivante de l'objet média par défaut .media :

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>

<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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Jetons un coup d'œil à l'exemple suivant de liste d'objets multimédias.media- liste :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne