Inset y objetos multimedia

En este artículo se detallan los inset y objetos multimedia. Para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explicarán a continuación. Como en anteriores artículos, se facilita al final del post un fichero de ejemplos y también se incluye un enlace para probarlos sin necesidad de descargarlos.

 

INSET SIMPLE:

Bootstrap dispone de los componentes inset, traducido a castellano sería un recuadro o grabado. Este componente se puede situar en cualquier posición de la web, normalmente se suelen utilizar para resaltar una información. A continuación se observa un ejemplo de inset simple:

inset_simple

La estructura de código de los insets es bastante simple, se crea un div con class=”well”, posteriormente dentro de ese div, se escribe la descripción que se quiere realizar en el recuadro (puede ir con un tag <p>…</p> o sin él):

inset_simple_codigo

 

TIPOS DE INSET:

Existen tres tipos diferentes de inset en Bootstrap: inset grande, inset estándar e inset pequeño. En la siguiente imagen se puede apreciar tres ejemplos con los diferentes tamaños. Adicionalmente también se ha modificado el color de la letra de los inset, para que se pueda apreciar que se pueden destacar modificando el color de su descripción.

tipos_de_insets

En el siguiente código desarrollado se puede apreciar que el inset de tamaño grande, se le añade a la class del div principal la clase well-lg, el tamaño del inset estandar se ha descrito en los inset simples, mientras que el tamaño del inset pequeño, se le ha añadido a la class de su div principal la clase well-sm. Adicionalmente al inset estándar se le ha añadido la clase text-danger, para dar color rojo a la descripción del inset y al inset pequeño, se le ha añadido la clase text-info para dar color azul a la descripción del inset.

tipos_de_insets_codigo

 

OBJETOS MULTIMEDIA:

Los objetos multimedia en Bootstrap son la combinación de varios estilos genéricos para crear diferentes tipos de componentes formados por imágenes y texto. Se utilizan habitualmente en los comentarios de un blog o los tweets. En la siguiente imagen se puede observar la estructura de un objeto multimedia y un ejemplo:

objetos_multimedia

La estructura del código desarrollado se compone de un div con class=”media”, dentro del div se crea un enlace con class=”pull-left” (en el apartado de alineación de objetos multimedia se entra en más detalle sobre este punto). Dentro del enlace (<a>…</a>) se inserta la imagen con class=”media-object”, adicionalmente se ha creado una clase img-sm para personalizar el tamaño de la imagen en el fichero css personalizado. A continuación de los tags de enlace, se crea un div con class=”media-body” donde se insertará el título del objeto multimedia y un <p>…</p> con su descripción.

En la siguiente captura se puede observar la estructura del objeto multimedia y un ejemplo aplicando una imagen, un título y una descripción que podrían ser reales:

objetos_multimedia_codigo

 

ANIDANDO OBJETOS MULTIMEDIA:

Los objetos multimedia pueden ser anidados como si fuesen una lista de elementos, esta práctica suele ser muy útil para los comentarios de un blog, los listados de artículos / noticias, así como los diferentes tweets de varios usuarios, entre otros ejemplos posibles. En la siguiente imagen se puede observar un ejemplo de objetos multimedia anidados:

anidacion_objetos_multimedia

Para anidar los diferentes objetos multimedia, se realiza de la siguiente forma: se crea un primer objeto multimedia y posteriormente a su tag de descripción del contenido y dentro de su div de class=”media-body” (antes de su cierre), se añaden los otros objetos multimedia que se deseen anidar. En la siguiente captura puede quedar un poco más claro:

anidacion_objetos_multimedia_codigo

Como se puede apreciar se han definido diferentes rectángulos con colores para que se pueda ver claramente cuando empiezan o acaban los diferentes objetos multimedia. En el rectángulo rojo, se observa el tercer objeto multimedia que está anidado a su antecesor (segundo objeto multimedia y con rectángulo de color amarillo), este a su vez, está anidado al primer objeto multimedia (rectángulo azul). De color verde se puede observar el cuarto objeto multimedia que está anidado al segundo objeto (a su misma altura). Finalmente se aprecia el quinto objeto multimedia con un rectángulo de color lila. Este último objeto si está fuera del div con class=”media” del primer objeto, ya que se alinea al mismo nivel.

En la siguiente captura se añade la clase de CSS que se ha creado en el fichero personalizado.css y que se aplica a todas las imágenes de los objetos multimedia, para especificar su tamaño (ancho y alto):

css_aplicado_images_om

 

ALINEACIÓN DE IMÁGENES EN OBJ. MULT.:

Finalmente se detalla la alineación de las imágenes en los objetos multimedia, en el siguiente ejemplo se puede observar una alineación de la imagen a la izquierda y justo en el ejemplo inferior al primero, una alineación a la derecha del título y la descripción del contenido multimedia.

alineacion_objetos_multimedia

Para modificar la alineación de las imagenes se juega con la class=”pull-left” “pull-right” en el tag del enlace <a …>…</a>. En la captura inferior se puede apreciar la diferencia entre la alineación de la imagen a la izquierda (rectángulo azul) y la alineación de la imagen a la derecha (rectángulo rojo).

alineacion_objetos_multimedia_codigo

 

 

EJEMPLO EN LÍNEA: Creado un enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: inset_y_objetosmultimedia.rar. En próximos artículos se continuará con los componentes que se pueden utilizar en Bootstrap, como por ejemplo, las barras de progreso, los encabezados de página, entre otros elementos.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *