Ver índice de contenidos del libro

6.17. Objetos multimedia

Bootstrap 3 define varios estilos genéricos para crear diferentes tipos de componentes formados por imágenes y texto, como por ejemplo los comentarios de un blog, los tweets, etc.

6.17.1. Ejemplo sencillo

El estilo por defecto para estos objetos alinea el elemento multimedia (imagen, vídeo , audio) a la derecha o a la izquierda del texto mediante la propiedad float. Ejemplo:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Título del contenido</h4>
    ...
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Objetos multimedia en Bootstrap 3

Figura 6.57 Objetos multimedia en Bootstrap 3

6.17.2. Listados de objetos multimedia

Aplicando un poco de código HTML resulta posible anidar los objetos multimedia dentro de una lista, lo que es muy útil por ejemplo para los comentarios de un blog y para los listados de artículos o noticias. Ejemplo:

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Título del contenido</h4>
      ...
    </div>
  </li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Objetos multimedia anidados en Bootstrap 3

Figura 6.58 Objetos multimedia anidados en Bootstrap 3