Bootstrap objets multimédias

Ce chapitre, nous allons discuter des objets multimédias Bootstrap. Ce style d'objet abstrait est recommandé pour une variété de types de composants (par exemple: commentaires de blog), nous pouvons utiliser la photo-texte dans le composant, l'image peut être justifié à gauche ou à droite. Les objets multimédias peuvent utiliser moins de code pour mettre en œuvre des objets multimédia et texte scramble.

Vous pouvez ajouter les deux formes suivantes dans les balises HTML pour définir l'objet média:

• .media: Cette classe permet aux objets multimédias dans le multimédia (images, vidéo) float vers la gauche ou vers le bloc de contenu à droite.
• .media-list: Si vous avez besoin d'une liste des différents éléments fait partie de la liste à puces, vous pouvez utiliser la classe. Les commentaires peuvent être utilisés pour la liste et la liste des articles.

Maintenant, penchons-nous sur les exemples de l'aide d'objets multimédias .media classe:

<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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>

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit:

Maintenant, penchons-nous sur les exemples d'utilisation multimédia classe d'objets .media-list:

<ul class="media-list">
   <li class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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 class="media-object" src="../bootstrap/images/64.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>

Voir des exemples en ligne

Les exemples ci-dessus montrent l'effet de ce qui suit: