Objetos multimedia Bootstrap
Objetos multimedia
Bootstrap proporciona una manera fácil de alinear objetos multimedia (como imágenes o videos) a la izquierda o a la derecha de algún contenido. Esto se puede usar para mostrar comentarios de blogs, tweets, etc.:
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Jane Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Alicia Keyes Publicado el 25 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor. No hay miedo al chocolate antes ni interés.
Objeto multimedia básico
Juan Pérez
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Juan Pérez
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Ejemplo
<!-- Left-aligned -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Right-aligned -->
<div class="media">
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="media-right">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
</div>
Ejemplo explicado
Use un elemento <div> con la .mediaclase para crear un contenedor para objetos multimedia.
Utilice la .media-leftclase para alinear el objeto multimedia (imagen) a la izquierda o la .media-rightclase para alinearlo a la derecha.
El texto que debería aparecer junto a la imagen se coloca dentro de un contenedor con class=" media-body".
Además, puede utilizar .media-headingpara encabezados.
Alineación superior, media o inferior
El objeto multimedia también puede estar alineado en la parte superior, media o inferior con la media-topclase media-middleo media-bottom:
Parte superior de los medios
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
medio medio
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Parte inferior de medios
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Ejemplo
<!-- Media top -->
<div class="media">
<div class="media-left media-top">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Top</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media middle -->
<div class="media">
<div class="media-left media-middle">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Middle</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Media bottom -->
<div class="media">
<div class="media-left media-bottom">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Media Bottom</h4>
<p>Lorem ipsum...</p>
</div>
</div>
Objetos multimedia anidados
Los objetos multimedia también se pueden anidar (un objeto multimedia dentro de un objeto multimedia):
Ejemplo
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
John Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
John Doe Publicado el 21 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Otro ejemplo de anidamiento
Ejemplo
John Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
John Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
John Doe Publicado el 21 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Jane Doe Publicado el 20 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.
Jane Doe Publicado el 19 de febrero de 2016
El dolor en sí es el amor del dolor, los principales problemas ecológicos, pero doy este tipo de tiempo para caer, por lo que un gran dolor y dolor.