Objecte multimèdia
Documentació i exemples per a l'objecte multimèdia de Bootstrap per construir components altament repetitius com comentaris de blocs, tuits i similars.
Exemple
L' objecte multimèdia ajuda a crear components complexos i repetitius on alguns mitjans es col·loquen al costat del contingut que no s'acobla a aquests mitjans. A més, ho fa amb només dues classes necessàries gràcies a flexbox.
A continuació es mostra un exemple d'un únic objecte multimèdia. Només calen dues classes: l'embolcall .mediai l' .media-bodyentorn del contingut. El farciment i el marge opcionals es poden controlar mitjançant les utilitats d'espaiat .
Encapçalament dels mitjans
Fareu el mateix per mi? És hora d'enfrontar-se a la música, ja no sóc la teva musa. He sentit que és bonic, sigues el jutge i les meves noies votaran. Puc sentir un fènix dins meu. El cel està gelós del nostre amor, els àngels ploren des de dalt. Sí, em portes a la utopia.
<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: els elements en línia no es tracten com a elements flexibles
Internet Explorer 10-11 no representa elements en línia com enllaços o imatges (o ::beforepseudoelements ::after) com a elements flexibles. L'única solució és establir un displayvalor no en línia (per exemple, block, inline-block, o flex). Us suggerim que utilitzeu .d-flex, una de les nostres utilitats de visualització , com a solució fàcil.
Font: Flexbugs a GitHub
Nidificació
Els objectes multimèdia es poden anidar infinitament, tot i que us suggerim que us atureu en algun moment. Col·loqueu imbricat .mediadins .media-bodyd'un objecte multimèdia pare.
Encapçalament dels mitjans
Dempeus a primera línia quan comencen a caure les bombes. El cel està gelós del nostre amor, els àngels ploren des de dalt. No et puc substituir per un milió d'anells. Noi, quan estiguis amb mi et faré un tast. No hi ha marxa enrere. Abans de conèixer-me estava bé, però les coses eren una mica pesades. Pesat és el cap que porta la corona.
Encapçalament dels mitjans
Salutacions éssers estimats, fem un viatge. Sí, fem plorar els àngels, plovent a la terra des de dalt. Donar-te alguna cosa bona per celebrar. Solia mossegar-me la llengua i aguantar la respiració. Et faré batejar el cor amb els meus texans ajustats a la pell. Mentre marxo sol a un ritme diferent. L'estiu després de l'institut quan ens vam conèixer. Estàs tan hipnotitzant, pots ser el diable? Podries ser un àngel? És hora de treure els grans globus. Vaig pensar que jo era l'excepció. Bikinis, carbassons, Martinis, sense piquetes.
<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>Alineació
Els mitjans d'un objecte multimèdia es poden alinear amb les utilitats flexbox a la part superior (predeterminada), al mig o al final del .media-bodycontingut.
Mitjans alineats a la part superior
La posaré en coma. Dones cent raons i dius que ho intentaràs de debò. Així que em vaig asseure en silenci, vaig acceptar educadament. Preparant-me per a la meva batalla final. I en el meu 18è aniversari ens vam fer tatuatges a joc. Molt chic, sí, és un clàssic. Estic preparat per al camí menys transitat.
Estic caminant per aire (aquesta nit). Però a la terra. Ets original, no es pot substituir. Però en una altra vida seria la teva noia. Vam anar amb cotxe fins a Cali i ens vam emborratxar a la platja. Podem ballar, fins que morim, tu i jo, serem joves per sempre. T'he vist al centre cantant el 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>Mitjans alineats al centre
Es tornarà freda com un congelador. Al final de tot. Picant com una abella em vaig guanyar les meves ratlles. Bikinis, carbassons, Martinis, sense piquetes. Espero que tinguis una gana sana. Podem ballar, fins que morim, tu i jo, serem joves per sempre. Estem vivint la vida. Ho estem fent bé. Parla al carrer, tens alguna cosa per ensenyar-me, jo.
Vols veure el programa en 3D, una pel·lícula. Diuen, tingues por que no ets com els altres, amant futurista. Obre el teu cor. Així que em vaig asseure en silenci, vaig acceptar educadament. La nit de divendres passat. Sí, tens sort si estàs al seu avió. Seré el teu regal, et donaré alguna cosa bona per 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>Mitjans alineats a la part inferior
Vinga, deixa que esclatin els teus colors. Puc sentir aquesta llum que hi ha dins meu. Tota la nit toquen, la teva cançó. De Tòquio a Mèxic, a Rio. No hi ha marxa enrere. Però a la terra. Màgic, colorit, Sr. Misteri, ee. ADN diferent, no t'entenen.
Però a la terra. Ella ho té, je ne sais quoi, ja ho saps. Puc veure l'escriptura a la paret. Els nois es trenquen el coll intenten fer un petit cop d'ull. Agafeu-me, agafeu-me. Obre el teu cor. Vaig pensar que jo era l'excepció. Bum, bum, bum. Platja de Venècia i Palm Springs, l'estiu ho és tot. Torna el ritme. (Així és com ho fem)
<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>Ordre
Canvieu l'ordre del contingut dels objectes multimèdia modificant el propi HTML o afegint algun CSS de flexbox personalitzat per establir la orderpropietat (a un nombre enter que trieu).
Objecte multimèdia
Sé que hi haurà sacrifici, però aquest és el preu. Ets prou valent per deixar-me veure el teu paó? Sigues el teu somni d'adolescent aquesta nit. Uh-huh, et veig. No hi ha marxa enrere. Sí, vam exhaurir les nostres targetes de crèdit i ens van expulsar del bar. Així que deixa'm portar-te amb el teu vestit d'aniversari. Potser t'enamoraràs quan la coneixes. Tenia el món al palmell de les teves mans. No deixis que la grandesa t'agradi, oh, oh, sí. Ara parlem d'astrologia, de fer-nos les ungles, tot japonès. Fes-me la teva 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>Llista de mitjans
Com que l'objecte multimèdia té tan pocs requisits estructurals, també podeu utilitzar aquestes classes en elements HTML de llista. A la vostra <ul>o <ol>, afegiu el .list-unstyledper eliminar qualsevol estil de llista predeterminat del navegador i, a continuació, apliqueu .media-lo al vostre <li>s. Com sempre, utilitzeu les utilitats d'espaiat sempre que sigui necessari per ajustar-les.
-
Objecte multimèdia basat en llista
Totes les meves nenes vintage Chanel baby. Així pots tenir el teu pastís. Aquesta nit, aquesta nit, aquesta nit, estic caminant per l'aire. Empassant lentament la meva por, sí, sí. Creixent ràpidament en un llamp. Tan calent i pesat, fins a l'alba. Aquell conte de fades que acaba amb un cavaller amb una armadura brillant. Pesat és el cap que porta la corona.
-
Objecte multimèdia basat en llista
Potser un motiu pel qual totes les portes estan tancades. Perquè un cop ets meu, un cop ets meu. Sigues el teu somni d'adolescent aquesta nit. Pesat és el cap que porta la corona. Ni tan sols és festa, res a celebrar. Una tempesta perfecta, una tempesta perfecta.
-
Objecte multimèdia basat en llista
Ets prou valent per deixar-me veure el teu paó? No hi ha marxa enrere. Aquesta és l'última vegada que dius, després de l'última línia que trenques. Al final de tot.
<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>