BootstrapObjetos multimedia

En este capítulo discutiremos los objetos multimedia en Bootstrap. Estos estilos de objetos abstractos se utilizan para construir varios tipos de componentes (como comentarios de blog). Podemos usar imágenes y texto combinados en los componentes, con imágenes alineadas a la izquierda o a la derecha. Los objetos multimedia permiten combinar objetos multimedia con texto usando menos código.

Puedes agregar las siguientes dos formas en las etiquetas HTML para configurar objetos multimedia:

  • .media: esta clase permite flotar los contenidos multimedia (imágenes, videos) del objeto multimedia a la izquierda o derecha del bloque de contenido.
  • .media-list: si necesitas una lista donde cada elemento forme parte de una lista desordenada, puedes usar esta clase. Se puede usar para listas de comentarios y listas de artículos.

A continuación, veamos un ejemplo del uso de la clase .media de objetos multimedia:

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

El resultado del ejemplo anterior se muestra a continuación:

A continuación, veamos un ejemplo del uso de la clase .media-list de objetos multimedia:

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

El resultado del ejemplo anterior se muestra a continuación:

Otras extensiones