Em uma página da web, a imagem está à esquerda e o conteúdo é organizado à direita, o que é um efeito muito comum. É também um objeto de mídia. É um estilo abstrato que pode ser usado para construir diferentes tipos de componentes. Os arquivos de versão correspondentes na estrutura do bootstrap são os seguintes:
Menos: Media.less
SASS: _media.scss
Os objetos de mídia geralmente aparecem em grupos, e um grupo de objetos de mídia geralmente inclui as seguintes peças:
1. Container de objetos de mídia: usado para acomodar todo o conteúdo dos objetos de mídia. O nome da classe deve ser usado no contêiner. mídia
2. Objeto do objeto de mídia: geralmente é necessário uma imagem e a classe.media-objeto.
3. O sujeito do objeto de mídia: é o conteúdo do assunto do objeto de mídia. Pode ser qualquer elemento e requer o uso da classe.Media-Body
4. O título do objeto de mídia: um título usado para descrever o objeto de mídia, a classe. Media é necessária.
Além disso, as classes .pull-left e .pull-right são frequentemente usados na estrutura do bootstrap para controlar o método flutuante de objetos em objetos de mídia.
Aqui estão o código -fonte do CSS:
.media, .media-corpo {Overflow: Hidden; Zoom: 1;}. Media, .media .media {margin-top: 15px;}. Media: primeiro filho {margin-top: 0;}.-ri. .pull-right {margem-esquerda: 10px;}Os estilos de mídia são relativamente simples, basta definir o espaçamento entre eles;
Vamos dar uma olhada no uso de objetos de mídia:
<H1> Objeto de mídia padrão </h1> <div> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> luar no lótus Pond </h4> <div> Estou bastante desconfortável hoje em dia. Eu estava sentado no quintal hoje à noite para apreciar o ar fresco e, de repente, lembrei -me do lago de lótus que passeava todos os dias. Nesta noite da lua cheia, eu sempre deveria parecer diferente. A lua gradualmente se levantou e o riso das crianças na estrada do lado de fora do muro ... </div> </div> </div>
Aninhamento de objetos de mídia
Objetos de mídia de bootstrap Nest, basta colocar outra estrutura de objeto de mídia no corpo do objeto de mídia (.media-body). Vamos dar uma olhada na aplicação do ninho de objeto de mídia
<H1> Ninho de objetos de mídia padrão </h1> <div> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> lua na luz da Lotus Pond </h4> <div> Lugar servir silenciosamente nessas folhas e flores como a água de fluxo. Uma fina névoa azul flutuou no lago de lótus. As folhas e as flores parecem ter sido lavadas no leite; Eles também são como sonhos cobertos de véu. Embora seja uma lua cheia, há uma nuvem fraca no céu, por isso não pode brilhar intensamente; Mas acho que isso é apenas a vantagem - um sono profundo é indispensável e uma soneca tem um sabor único. </div> <div> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Aqui estão os conteúdos aninhados1111111111 </h4> <div> quatro lados do Pond Lotus, distantes, próximos e baixos, as árvores são as mais. Essas árvores cercavam um lago de lótus; Eles estavam apenas do lado do caminho, com algumas lacunas vazando, como se fossem deixadas especificamente para o luar. </div> <div> <a href = "#"> <img src = "img/5.jpg"> </a> <div> <h4> Aqui está um conteúdo aninhado 2222 </h4> <div> Há uma montanha distante nas árvores e é um pouco descuidado. Havia também uma ou duas luzes da rua vazando das rachaduras na árvore. O que foi apático foram os olhos das pessoas que dormiam sedentas. A coisa mais animada neste momento é o som das cigarras nas árvores e o som dos sapos na água; Mas a emoção é deles, e não tenho nada </div> </div> </div> </div> </div> </div> </div>
Os efeitos são os seguintes:
Lista de objetos de mídia
A estrutura de bootstrap fornece um efeito de exibição da lista de objetos de mídia. Ao escrever estruturas, você pode usar a tag UL e adicionar o nome da classe na tag ul.media-list e usar a classe na tag ul.media.
Por exemplo:
<H1> Lista de objetos de mídia </h1> <ul> <li> <a href = "#"> <img src = "img/1.jpg"> </a> <div> <h4> Lista de objetos de mídia 111 </h4> <div> ao longo do Lotus Pond, é uma tortuosa estrada de lasca de carvão pequena. Esta é uma estrada isolada; Há poucas pessoas andando durante o dia, e é ainda mais solitário à noite. Há muitas árvores crescendo ao redor do lago de lótus e estão deprimidas (2). No lado da estrada havia salgueiros e algumas árvores com nomes desconhecidos. Em uma noite sem luar, a estrada estava sombria e um pouco assustada com as pessoas. Foi muito bom esta noite, embora o luar ainda estivesse fraco. </div> </div> </li> <li> <a href = "#"> <img src = "img/2.jpg"> </a> <div> <h4> Lista de objetos de mídia 222 </h4> <div> Eu era o único na estrada, andando com minhas mãos atrás das minhas costas. Este mundo parece ser meu; Também sinto que estou além do meu eu habitual e entrei em outro mundo. Eu amo emoção e tranquilidade; Eu amo morar em grupos e estar sozinho. Como hoje à noite, sob esta vasta lua, você pode pensar em nada e não pensar em nada, e sentirá que é uma pessoa livre. </div> </div> </li> <li> <a href = "#"> <img src = "img/3.jpg"> </a> <div> <h4> A lista de objetos de mídia 333 </h4> <div> o que você deve fazer e diz durante o dia pode ser ignorada agora. Esta é a beleza de ficar sozinha, e eu apreciarei a infinita fragrância de lótus e a luz da lua. Acima do lago de lótus sinuoso, as folhas dos campos (4) estão por toda parte. As folhas são muito altas, como a saia de uma dançarina alta. Entre as camadas de folhas, algumas flores brancas são pontilhadas esporadicamente, algumas estão florescendo graciosamente e outras estão brincando com flores; Assim como pérolas, estrelas no céu azul e beleza logo saindo do banho. A brisa traz raios de fragrância, como se o silêncio de cantar nos prédios altos à distância. </div> </div> </li> <li> <a href = "#"> <img src = "img/4.jpg"> </a> <div> <h4> Lista de objetos de mídia 444 </h4> <div> De repente, lembrei -me de repentinamente a história da escolha do lótus. A colheita de lótus é um antigo costume em Jiangnan. Parece ter existido muito cedo, mas foi próspero durante as seis dinastias; Podemos saber aproximadamente da poesia. Aqueles que escolheram Lotus eram mulheres jovens, que foram lá em pequenos barcos e cantando canções eróticas (14). Escusado será dizer que há muitas pessoas que escolhem Lotus. Há também pessoas que escolhem Lotus. Foi uma temporada animada e um romântico (15). O imperador Yuan de Liang (16) disse que é bem em "The Lotus Picking Fu":. </div> </div> </li> </ul>
Os efeitos são os seguintes: