En una página web, la imagen está a la izquierda y el contenido está organizado a la derecha, lo cual es un efecto muy común. También es un objeto de medios. Es un estilo abstracto que se puede usar para construir diferentes tipos de componentes. Los archivos de versión correspondientes en el marco Bootstrap son los siguientes:
Menos: Media.
Sass: _media.scss
Los objetos de los medios generalmente aparecen en grupos, y un grupo de objetos de medios generalmente incluye las siguientes partes:
1. Contenedor de objetos de medios: se utiliza para acomodar todos los contenidos de los objetos de medios. El nombre de la clase debe usarse en el contenedor. medios de comunicación
2. Objeto del objeto de medios: generalmente se requiere una imagen, y se requiere la clase.media-object.
3. El tema del objeto de los medios: es el contenido de sujeto del objeto de medios. Puede ser cualquier elemento y requiere el uso de la clase.
4. El título del objeto de los medios: se requiere un título utilizado para describir el objeto de los medios, se requiere la clase. Media.
Además, las clases. Pull-Left y .Pull-Right a menudo se usan en el marco de arranque para controlar el método flotante de objetos en objetos de medios.
Aquí están su código fuente CSS:
.media, .media-Body {desbordamiento: Hidden; Zoom: 1;}. Media, .media .media {margin-top: 15px;}. Media: First-Child {Margin-top: 0;}. Media-Object {Display: Block;}. 10px;}. Media> .Pull-Right {Margen-izquierda: 10px;}Los estilos de medios son relativamente simples, solo establezca el espacio entre ellos;
Echemos un vistazo al uso de objetos de medios:
<h1> Objeto de medios predeterminado </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> luna de luna en el estanque de loto </h4> <div> Estoy bastante inútil en estos días. Estaba sentado en el patio esta noche para disfrutar del aire frío, y de repente recordé el estanque de loto que pasaba todos los días. En esta noche de luna llena, siempre debería verme diferente. La luna se elevó gradualmente, y la risa de los niños en el camino fuera de la pared ... </div> </div> </div>
Anidación de objetos de medios
Los objetos de medios de arranque nido, solo coloque otra estructura de objeto de medios en el cuerpo del objeto de medios (.media-Body). Echemos un vistazo a la aplicación de la anidación de objetos de medios
<h1> Anidación de objetos de medios predeterminados </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> la luz de la luna en el estanque de loto </h4> <div> La luz de la luna vierte tranquilamente en estas hojas y flores como agua fluida. Una delgada niebla azul flotaba en el estanque de loto. Las hojas y las flores parecen haber sido lavadas en leche; También son como sueños cubiertos de velo. Aunque es una luna llena, hay una tenue nube en el cielo, por lo que no puede brillar intensamente; Pero creo que esta es solo la ventaja: un sueño profundo es indispensable y una siesta tiene un sabor único. </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Aquí están el contenido anidado1111 </h4> <div> cuatro lados del estanque de loto, lejos, cerca, altos y bajos, los árboles y los sauce son los más. Estos árboles rodearon un estanque de loto; Solo estaban al costado del camino, con algunos espacios que se filtraban, como si se dejaran específicamente para la luz de la luna. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> Aquí hay un contenido anidado 2222 </h4> <div> Hay una montaña distante en las copas de los árboles, y es solo un poco sin carácter. También había una o dos luces de calles que se filtraban desde las grietas en el árbol. Lo que era apático eran los ojos de la gente que dormía sedienta. Lo más animado en este momento es el sonido de las cigarras en los árboles y el sonido de las ranas en el agua; Pero la emoción es suya, y no tengo nada </div> </div> </div> </div> </div> </div> </div>
Los efectos son los siguientes:
Lista de objetos de medios
El marco Bootstrap proporciona un efecto de visualización de la lista de objetos de medios. Al escribir estructuras, puede usar la etiqueta ul y agregar el nombre de clase en la etiqueta ul.media-list, y usar la clase en la etiqueta ul.media.
Por ejemplo:
<h1> Lista de objetos de medios </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Lista de objetos de medios 111 </h4> <divis> a lo largo del estanque de loto, es un camino de chips de carbón pequeño tortuoso. Este es un camino aislado; Hay pocas personas caminando durante el día, y es aún más solitario por la noche. Hay muchos árboles que crecen alrededor del estanque de loto, y están deprimidos (2). En el costado del camino había sauces y algunos árboles con nombres desconocidos. En una noche sin luz de la luna, el camino era sombrío y un poco asustado a la gente. Estuvo muy bien esta noche, aunque la luz de la luna todavía era débil. </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> Lista de objetos de medios 222 </h4> <div> Yo era el único en el camino, caminando con mis manos a mis espaldas. Este mundo parece ser mío; También siento que estoy más allá de mi yo habitual y he entrado en otro mundo. Me encanta la emoción y la tranquilidad; Me encanta vivir en grupos y estar solo. Como esta noche, bajo esta vasta luna, puedes pensar en cualquier cosa y no pensar en nada, y sentirás que eres una persona libre. </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> Lista de objetos de medios 333 </h4> <div> lo que debe hacer y decir durante el día se puede ignorar ahora. Esta es la belleza de estar solo, y disfrutaré de la infinita fragancia de loto y la luz de la luna. Sobre el sinuoso estanque de loto, las hojas de los campos (4) están en todas partes. Las hojas son muy altas, como la falda de un bailarín alto. Entre las capas de hojas, algunas flores blancas están salpicadas esporádicamente, algunas florecen con gracia y otras juegan con flores tímidamente; Al igual que las perlas, las estrellas en el cielo azul y la belleza al baño. La brisa trae rayos de fragancia, como si el silencio de cantar en los edificios altos en la distancia. </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Lista de objetos de medios 444 </h4> <div> de repente recordé la historia de elegir loto. Lotus Picking es una vieja costumbre en Jiangnan. Parece haber existido muy temprano, pero fue próspero durante las seis dinastías; Podemos saberlo más o menos por la poesía. Los que eligieron a Lotus eran mujeres jóvenes, que fueron allí en pequeños botes y cantando canciones eróticas (14). No hace falta decir que hay muchas personas que eligen loto. También hay personas que eligen loto. Fue una temporada animada y un romántico (15). El emperador Yuan de Liang (16) lo dijo bien en "The Lotus Picking Fu": </div> </div> </li> </ul>
Los efectos son los siguientes: