Obxecto multimedia
Documentación e exemplos para o obxecto multimedia de Bootstrap para construír compoñentes altamente repetitivos como comentarios de blogs, tweets e similares.
Exemplo
O obxecto multimedia axuda a construír compoñentes complexos e repetitivos onde algúns medios se sitúan xunto ao contido que non se envolve en torno a ditos medios. Ademais, faino só con dúas clases obrigatorias grazas a flexbox.
A continuación móstrase un exemplo dun único obxecto multimedia. Só son necesarias dúas clases: a de envolver .mediae a de envolver o .media-bodyteu contido. O recheo e a marxe opcionais pódense controlar mediante utilidades de espazamento .
Título multimedia
Farás o mesmo por min? É hora de enfrontarse á música xa non son a túa musa. Oín que é fermoso, sexa o xuíz e as miñas nenas votarán. Podo sentir un fénix dentro de min. O ceo está celoso do noso amor, os anxos choran dende arriba. Si, lévame á utopía.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
</div>
</div>Flexbug #12: os elementos en liña non se tratan como elementos flexibles
Internet Explorer 10-11 non mostra elementos en liña como ligazóns ou imaxes (ou ::beforepseudoelementos ::after) como elementos flexibles. A única solución é establecer un displayvalor non en liña (por exemplo, block, inline-blockou flex). Suxerímoslle usar .d-flex, unha das nosas utilidades de visualización , como solución sinxela.
Fonte: Flexbugs en GitHub
Aniñación
Os obxectos multimedia pódense aniñar infinitamente, aínda que suxerímoslle que pare nalgún momento. Coloque aniñado .mediadentro .media-bodydun obxecto multimedia principal.
Título multimedia
Parado na primeira liña cando comezan a caer as bombas. O ceo está celoso do noso amor, os anxos choran dende arriba. Non te podo substituír por un millón de aneis. Neno, cando esteas comigo vouche a probar. Non hai volta atrás. Antes de coñecerme estaba ben, pero as cousas eran algo pesadas. Pesada é a cabeza que leva a coroa.
Título multimedia
Saúdos seres queridos imos facer unha viaxe. Si, facemos chorar aos anxos, chovendo sobre a terra dende arriba. Dáche algo bo para celebrar. Adoitaba morderme a lingua e conter a respiración. Vou facer que o teu corazón se acelere cos meus vaqueiros axustados. Mentres marcho só a un ritmo diferente. Verán despois do instituto cando nos coñecemos. Estás tan hipnotizante, podes ser o diaño? Poderías ser un anxo? É hora de sacar os grandes globos. Pensei que eu era a excepción. Bikinis, calabacíns, Martinis, sen mozas.
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
<div class="media mt-3">
<a class="mr-3" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Greetings loved ones let's take a journey. Yes, we make angels cry, raining down on earth from up above. Give you something good to celebrate. I used to bite my tongue and hold my breath. I'm ma get your heart racing in my skin-tight jeans. As I march alone to a different beat. Summer after high school when we first met. You're so hypnotizing, could you be the devil? Could you be an angel? It's time to bring out the big balloons. Thought that I was the exception. Bikinis, zucchinis, Martinis, no weenies.</p>
</div>
</div>
</div>
</div>Aliñación
Os medios nun obxecto multimedia pódense aliñar coas utilidades flexbox na parte superior (predeterminada), no medio ou ao final do teu .media-bodycontido.
Medios aliñados na parte superior
Vouna poñer en coma. Dás cen razóns e dis que o vas intentar de verdade. Así que me sentei en silencio, acordei educadamente. Adecuado para a miña coroa batalla. E no meu 18 aniversario fixemos tatuaxes iguales. Tan moi chic, si, é un clásico. Estou preparado para o camiño menos transitado.
Estou andando no aire (esta noite). Pero a terra. Es orixinal, non se pode substituír. Pero noutra vida sería a túa nena. Camiñamos ata Cali e emborrachamos na praia. Podemos bailar, ata que morremos, ti e eu, seremos novos para sempre. Vínte no centro cantando o Blues.
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>I’m gon’ put her in a coma. You give a hundred reasons why, and you say you're really gonna try. So I sat quietly, agreed politely. Suiting up for my crowning battle. And on my 18th Birthday we got matching tattoos. So très chic, yeah, she's a classic. I am ready for the road less traveled.</p>
<p>I'm walking on air (tonight). But down to earth. You're original, cannot be replaced. But in another life I would be your girl. We drove to Cali and got drunk on the beach. We can dance, until we die, you and I, will be young forever. Saw you downtown singing the Blues.</p>
</div>
</div>Medios centrados
Quedará fría coma un conxelador. Ao final eh de todo. Picando coma unha abella gañeime as miñas raias. Bikinis, calabacíns, Martinis, sen mozas. Espero que teñas un apetito saudable. Podemos bailar, ata que morremos, ti e eu, seremos novos para sempre. Estamos vivindo a vida. Estamos facendo ben. Palabra na rúa, tes algo que mostrarme.
Queres ver o programa en 3D, unha película. Din, ten medo que non es coma os demais, amante futurista. Abre o teu corazón. Así que me sentei en silencio, acordei educadamente. O venres pasado pola noite. Si, tes sorte se estás no seu avión. Serei o teu agasallo, darche algo bo para celebrar.
<div class="media">
<img src="..." class="align-self-center mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>She'll turn cold as a freezer. At the eh-end of it all. Stinging like a bee I earned my stripes. Bikinis, zucchinis, Martinis, no weenies. I hope you got a healthy appetite. We can dance, until we die, you and I, will be young forever. We're living the life. We're doing it right. Word on the street, you got somethin' to show me, me.</p>
<p class="mb-0">Wanna see the show in 3D, a movie. They say, be afraid you're not like the others, futuristic lover. Open up your heart. So I sat quietly, agreed politely. Last Friday night. Yeah, you're lucky if you're on her plane. I'll be your gift, give you something good to celebrate.</p>
</div>
</div>Medios aliñados na parte inferior
Veña, que rebente as túas cores. Podo sentir esta luz que está dentro de min. Toda a noite tocan a túa canción. De Tokio a México, a Río. Non hai volta atrás. Pero a terra. Máxico, colorido, señor misterio, ee. ADN diferente, non te entenden.
Pero a terra. Ela ten iso, je ne sais quoi, xa o sabes. Podo ver a escrita na parede. Os rapaces rompen o pescozo intentando escapar un pequeno adelanto. Lévame, lévame. Abre o teu corazón. Pensei que eu era a excepción. Bum, bum, bum. Praia de Venecia e Palm Springs, o verán é todo. Devolve o ritmo. (Así é como facemos)
<div class="media">
<img src="..." class="align-self-end mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Come on, let your colours burst. I can feel this light that's inside of me. All night they're playing, your song. From Tokyo to Mexico, to Rio. There’s no going back. But down to earth. Magical, colorful, Mr. Mystery, ee. Different DNA, they don't understand you.</p>
<p class="mb-0">But down to earth. She's got that, je ne sais quoi, you know it. I can see the writing on the wall. The boys break their necks try'na to creep a little sneak peek. Take me, ta-ta-take me. Open up your heart. Thought that I was the exception. Boom, boom, boom. Venice beach and Palm Springs, summertime is everything. Bring the beat back. (This is how we do)</p>
</div>
</div>Orde
Cambia a orde do contido nos obxectos multimedia modificando o propio HTML ou engadindo algún CSS de flexbox personalizado para establecer a orderpropiedade (a un número enteiro que elixas).
Obxecto multimedia
Sei que haberá sacrificio, pero ese é o prezo. Vostede é o suficientemente valente como para deixarme ver o seu pavo real? Sexa o teu soño de adolescente esta noite. Uh-huh, véxote. Non hai volta atrás. Si, limitamos as nosas tarxetas de crédito e fomos expulsados do bar. Entón, déixame poñerte no teu traxe de aniversario. Podes namorarte cando a coñezas. Tiña o mundo na palma das túas mans. Non deixes que a grandeza te abate, oh, oh si. Agora falamos de astroloxía, de facernos as uñas, todo xaponés. Faime a túa Afrodita.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
<p>I know there will be sacrifice but that's the price. Are you brave enough to let me see your peacock? Be your teenage dream tonight. Uh-huh, I see you. There’s no going back. Yeah, we maxed our credit cards and got kicked out of the bar. So let me get you in your birthday suit. You may fall in love when you meet her. Had the world in the palm of your hands. Don't let the greatness get you down, oh, oh yeah. Now we talking astrology, getting our nails did, all Japanese-y. Make me your Aphrodite.</p>
</div>
<img src="..." class="ml-3" alt="...">
</div>Lista de medios
Dado que o obxecto multimedia ten tan poucos requisitos estruturais, tamén pode usar estas clases nos elementos HTML da lista. No teu <ul>ou <ol>, engade o .list-unstyledpara eliminar calquera estilo de lista predeterminado do navegador e, a continuación, aplícao .mediaao teu <li>s. Coma sempre, utiliza as utilidades de espazamento onde sexa necesario para axustar.
-
Obxecto multimedia baseado en listas
Todas as miñas nenas vintage Chanel baby. Así podes tomar o teu bolo. Esta noite, esta noite, esta noite, estou andando no aire. Lentamente tragando o meu medo, si, si. Crecendo rapidamente nun raio. Tan quente e pesado, ata o amencer. Ese conto de fadas que remata cun cabaleiro cunha armadura brillante. Pesada é a cabeza que leva a coroa.
-
Obxecto multimedia baseado en listas
Quizais sexa un motivo polo que todas as portas están pechadas. Porque unha vez que es meu, unha vez que es meu. Sexa o teu soño de adolescente esta noite. Pesada é a cabeza que leva a coroa. Nin sequera é festivo, nada que celebrar. Unha tormenta perfecta, unha tormenta perfecta.
-
Obxecto multimedia baseado en listas
Vostede é o suficientemente valente como para deixarme ver o seu pavo real? Non hai volta atrás. Esta é a última vez que dis, despois da última liña que rompes. Ao final de todo.
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>All my girls vintage Chanel baby. So you can have your cake. Tonight, tonight, tonight, I'm walking on air. Slowly swallowing down my fear, yeah yeah. Growing fast into a bolt of lightning. So hot and heavy, 'Til dawn. That fairy tale ending with a knight in shining armor. Heavy is the head that wears the crown.</p>
</div>
</li>
<li class="media my-4">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Maybe a reason why all the doors are closed. Cause once you’re mine, once you’re mine. Be your teenage dream tonight. Heavy is the head that wears the crown. It's not even a holiday, nothing to celebrate. A perfect storm, perfect storm.</p>
</div>
</li>
<li class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
<p>Are you brave enough to let me see your peacock? There’s no going back. This is the last time you say, after the last line you break. At the eh-end of it all.</p>
</div>
</li>
</ul>