Tutorial básico de Bootstrap

Plugins de Bootstrap

Grupos de listas de Bootstrap Barras de progreso de Bootstrap

Objetos multimedia de Bootstrap

En este capítulo, explicaremos el objeto multimedia (Media Object) de Bootstrap, como: imágenes, videos, audio, etc. Los estilos de los objetos multimedia se pueden usar para crear varios tipos de componentes (por ejemplo: comentarios de blog), y podemos usar la combinación de texto e imágenes en los componentes, las imágenes pueden estar alineadas a la izquierda o a la derecha. Los objetos multimedia pueden implementar la combinación de texto con menos código.

Primero, veamos un ejemplo:

ejemplo en línea

ejemplo

<!DOCTYPE　html>
<html>
<cabecera>
	<meta　charset="utf-8">　
	<título>Bootstrap　ejemplo　-　Objeto multimedia predeterminado/título>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</cabecera>
<cuerpo>
<div　clase="contenedor">
　　<h2>objeto multimedia</h2>
　　<p>Usar "media-left" clase para alinear a la izquierda los objetos multimedia. El contenido de texto debe colocarse después de la imagen.</p>
　　<p>"media-right" clase se utiliza para alinear a la derecha los objetos multimedia.</p><br>
　　
　　<!--　Alineación a la izquierda　-->
　　<div　clase="media">
　　　　<div　clase="media-izquierda">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:60px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-heading">Alineación a la izquierda</h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　</div>
　　</div>
　　<hr>
　　
　　<!--　Alineación a la derecha　-->
　　<div　clase="media">
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-heading">Alineación a la derecha</h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　</div>
　　　　<div　clase="media-right">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:60px">
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

El resultado se muestra a continuación:

Ejemplo de análisis

Añadir la clase .media al elemento <div> para crear un objeto multimedia.

usar .media-clase izquierda para que el objeto multimedia (imagen) realice la alineación a la izquierda, al igual que .media-clase derecha para lograr la alineación a la derecha.

colocar el contenido de texto en el div de , la alineación de la imagen a la izquierda se coloca antes de , y la alineación de la imagen a la derecha se coloca después de .

Además, puedes usar .media-clase encabezado para establecer el título.

Veamos el siguiente ejemplo relacionado con la lista de objetos multimedia .media-ejemplo de lista：

superior, inferior, centrado

ejemplo en línea

ejemplo

<!DOCTYPE　html>
<html>
<cabecera>
	<meta　charset="utf-8">　
	<título>Bootstrap　ejemplo　-　objeto multimedia</título>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</cabecera>
<cuerpo>
<div　clase="contenedor">
　　<h2>objeto multimedia</h2>
　　<p>Los objetos multimedia pueden estar alineados en la parte superior, inferior o centrados, las clases correspondientes son "media-superior"、　"media-centro"　、　"media-inferior":</p><br>
　　<div　clase="media">
　　　　<div　clase="media-izquierda　media-superior">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:80px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-encabezado">colocado en la parte superior</h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　</div>
　　</div>
　　<hr>
　　<div　clase="media">
　　　　<div　clase="media-izquierda　media-centro">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:80px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-encabezado">centrado</h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　</div>
　　</div>
　　<hr>
　　<div　clase="media">
　　　　<div　clase="media-izquierda　media-inferior">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:80px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-encabezado">colocado en la parte inferior</h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

El resultado se muestra a continuación:

objeto multimedia integrado

Un objeto multimedia puede contener varios objetos multimedia:

ejemplo en línea

ejemplo

<!DOCTYPE　html>
<html>
<cabecera>
	<meta　charset="utf-8">　
	<título>Bootstrap　ejemplo　-　objeto multimedia</título>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</cabecera>
<cuerpo>
<div　clase="contenedor">
　　<h2>objeto multimedia integrado</h2>
　　<p>En el objeto multimedia se pueden insertar otros objetos multimedia:</p><br>
　　<div　clase="media">
　　　　<div　clase="media-izquierda">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-encabezado">w3codebox-1　<small><i>Publicado el 2 de febrero　19,　2016</i></small></h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　
　　　　　　<!--　objeto multimedia integrado　-->
　　　　　　<div　clase="media">
　　　　　　　　<div　clase="media-izquierda">
　　　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　　　</div>
　　　　　　　　<div　clase="media-cuerpo">
　　　　　　　　　　<h4　clase="media-encabezado">w3codebox-2　<small><i>Publicado el 2 de febrero　19,　2016</i></small></h4>
　　　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　　　　　<!--　objeto multimedia integrado　-->
　　　　　　　　　　<div　clase="media">
　　　　　　　　　　　　<div　clase="media-izquierda">
　　　　　　　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div　clase="media-cuerpo">
　　　　　　　　　　　　　　<h4　clase="media-encabezado">w3codebox-3　<small><i>Publicado el 2 de febrero　19,　2016</i></small></h4>
　　　　　　　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

ejemplo en línea

ejemplo

<!DOCTYPE　html>
<html>
<cabecera>
	<meta　charset="utf-8">　
	<título>Bootstrap　ejemplo　-　objeto multimedia</título>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</cabecera>
<cuerpo>
<div　clase="contenedor">
　　<h2>objeto multimedia integrado</h2>
　　<p>En el objeto multimedia se pueden insertar otros objetos multimedia:</p><br>
　　<div　clase="media">
　　　　<div　clase="media-izquierda">
　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　</div>
　　　　<div　clase="media-cuerpo">
　　　　　　<h4　clase="media-encabezado">w3codebox-1　<small><i>Publicado el 2 de febrero　19,　2016</i></small></h4>
　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　
　　　　　　<!--　objeto multimedia integrado　-->
　　　　　　<div　clase="media">
　　　　　　　　<div　clase="media-izquierda">
　　　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　　　</div>
　　　　　　　　<div　clase="media-cuerpo">
　　　　　　　　　　<h4　clase="media-encabezado">w3codebox-2　<small><i>Publicado el 2 de febrero　20,　2016</i></small></h4>
　　　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　　　　　<!--　objeto multimedia integrado　-->
　　　　　　　　　　<div　clase="media">
　　　　　　　　　　　　<div　clase="media-izquierda">
　　　　　　　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div　clase="media-cuerpo">
　　　　　　　　　　　　　　<h4　clase="media-encabezado">w3codebox-3　<small><i>Publicado el 2 de febrero　21,　2016</i></small></h4>
　　　　　　　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　　　
　　　　　　　　</div>
　　　　　　　　
　　　　　　　　<!--　objeto multimedia integrado　-->
　　　　　　　　<div　clase="media">
　　　　　　　　　　<div　clase="media-izquierda">
　　　　　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　　　　　</div>
　　　　　　　　　　<div　clase="media-cuerpo">
　　　　　　　　　　　　<h4　clase="media-encabezado">w3codebox-4　<small><i>Publicado el 2 de febrero　20,　2016</i></small></h4>
　　　　　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　　　
　　　　　　</div>
　　　　</div>
　　　　
　　　　<!--　objeto multimedia integrado　-->　　　　
　　　　<div　clase="media">
　　　　　　<div　clase="media-izquierda">
　　　　　　　　<img　src="https://es.oldtoolbag.com/correr/imagenes/img_avatar.png"　clase="media-objeto"　estilo="ancho:45px">
　　　　　　</div>
　　　　　　<div　clase="media-cuerpo">
　　　　　　　　<h4　clase="media-encabezado">w3codebox-5　<small><i>Publicado el 2 de febrero　19,　2016</i></small></h4>
　　　　　　　　<p>Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo. Este es un texto de ejemplo.</p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prueba y observa ‹/›

Grupos de listas de Bootstrap Barras de progreso de Bootstrap