Bootstrap objetos multimedia
En este capítulo vamos a explicar objetos multimedia de archivos de inicio (media objeto). Estos estilo de objeto abstracto que se utiliza para crear varios tipos de componentes (por ejemplo: el blog comments), podemos utilizar la foto-texto en el componente, la imagen puede ser justificado a la izquierda oa la derecha. Los objetos multimedia se pueden lograr con menos código y medios de objetos de texto scramble.
Ligera objeto multimedia marcada característica es fácil de extender a través de la simple clase de aplicación de etiquetas de lograr. Puede agregar las siguientes dos formas en las etiquetas HTML para establecer el objeto de medios:
- .media: Esta clase permite que los objetos multimedia en la multimedia (imágenes, vídeo, audio) flotaban en el bloque de contenido de la izquierda o la derecha.
- .media-list: Si necesita una lista de los diversos elementos forma parte de la lista desordenada, puede utilizar la clase.Los comentarios pueden ser utilizados para enumerar y la lista de artículos.
Vamos a echar un vistazo a la siguiente información acerca de los medios de comunicación por defecto objetos .media ejemplo:
Ejemplos
<Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objeto multimedia">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> título multimedia </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ Div>
</ Div>
<Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objeto multimedia">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> título multimedia </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. <Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "objeto multimedia">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> título multimedia </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ Div>
</ Div>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
Veamos los siguientes ejemplos de lista de objetos .media-lista de los medios:
Ejemplos
<ul class = "medios-list">
<Li class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "imagen de marcador genérico">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> título multimedia </ h4>
<P> Este es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ P>
<! - Objetos multimedia anidadas ->
<Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "imagen de marcador genérico">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> rúbrica medios anidada </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. <! - Objetos multimedia anidadas ->
<Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "imagen de marcador genérico">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> rúbrica medios anidada </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ Div>
</ Div>
</ Div>
</ Div>
<! - Objetos multimedia anidadas ->
<Div class = "media">
<A class = "pull-izquierda" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "imagen de marcador genérico">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> rúbrica medios anidada </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ Div>
</ Div>
</ Div>
</ Li>
<Li class = "media">
<A class = "pull-derecha" href = "#">
<img class = "medios-objeto" src = "/wp-content/uploads/2014/06/64.jpg"
alt = "imagen de marcador genérico">
</ A>
<Div class = "medios-cuerpo">
<H4 class = "medios-encabezamiento"> título multimedia </ h4> Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. Esto es un texto de ejemplo. </ Div>
</ Li>
</ Ul>
Trate »
Los resultados son los siguientes:
