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:
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:
Figura 6.58 Objetos multimedia anidados en Bootstrap 3