Medieobjekt
Dokumentasjon og eksempler for Bootstraps medieobjekt for å konstruere svært repeterende komponenter som bloggkommentarer, tweets og lignende.
Eksempel
Medieobjektet hjelper til med å bygge komplekse og repeterende komponenter der noen medier er plassert ved siden av innhold som ikke omslutter nevnte media. I tillegg gjør den dette med bare to nødvendige klasser takket være flexbox.
Nedenfor er et eksempel på et enkelt medieobjekt. Bare to klasser kreves – innpakningen .mediaog .media-bodyinnholdet rundt. Valgfri polstring og margin kan kontrolleres gjennom avstandsverktøy .
Medieoverskrift
Vil du gjøre det samme for meg? Det er på tide å møte musikken. Jeg er ikke lenger musen din. Hørt det er vakkert, vær dommeren og jentene mine skal stemme. Jeg kan kjenne en føniks inni meg. Himmelen er sjalu på vår kjærlighet, engler gråter ovenfra. Ja, du tar meg til 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: Inline-elementer behandles ikke som flex-elementer
Internet Explorer 10-11 gjengir ikke innebygde elementer som lenker eller bilder (eller ::beforeog ::afterpseudo-elementer) som fleksible elementer. Den eneste løsningen er å angi en ikke-innebygd displayverdi (f.eks. block, inline-block, eller flex). Vi foreslår å bruke .d-flex, et av skjermverktøyene våre , som en enkel løsning.
Kilde: Flexbugs på GitHub
Hekking
Medieobjekter kan nestes uendelig, selv om vi foreslår at du stopper på et tidspunkt. Plasser nestet .mediai .media-bodyet overordnet medieobjekt.
Medieoverskrift
Står i frontlinjen når bombene begynner å falle. Himmelen er sjalu på vår kjærlighet, engler gråter ovenfra. Kan ikke erstatte deg med en million ringer. Gutt, når du er med meg skal jeg gi deg en smakebit. Det er ingen vei tilbake. Før du møtte meg hadde jeg det bra, men ting var litt tungt. Tungt er hodet som bærer kronen.
Medieoverskrift
Hilsen kjære, la oss ta en reise. Ja, vi får engler til å gråte og regner ned på jorden ovenfra. Gi deg noe godt å feire. Jeg pleide å bite meg i tungen og holde pusten. Jeg skal få hjertet ditt til å rase i de hudtrange jeansene mine. Mens jeg marsjerer alene til en annen takt. Sommer etter videregående da vi møttes første gang. Du er så hypnotiserende, kan du være djevelen? Kan du være en engel? Det er på tide å ta frem de store ballongene. Tenkte at jeg var unntaket. Bikinier, squash, Martini, ingen vesener.
<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>Justering
Media i et medieobjekt kan justeres med flexbox-verktøy til toppen (standard), midten eller slutten av .media-bodyinnholdet ditt.
Toppjusterte medier
Jeg skal legge henne i koma. Du gir hundre grunner til hvorfor, og du sier du virkelig kommer til å prøve. Så jeg satt stille, samtykket høflig. Egner seg til min kronekamp. Og på 18-årsdagen min fikk vi matchende tatoveringer. Så très chic, ja, hun er en klassiker. Jeg er klar for veien mindre reist.
Jeg går på lufta (i kveld). Men ned til jorden. Du er original, kan ikke erstattes. Men i et annet liv ville jeg vært jenta di. Vi kjørte til Cali og ble fulle på stranden. Vi kan danse, til vi dør, vil du og jeg være unge for alltid. Så deg i sentrum synge 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>Senterjustert media
Hun blir kald som en fryser. På slutten av det hele. Stikk som en bie fikk jeg stripene mine. Bikinier, squash, Martini, ingen vesener. Jeg håper du har en sunn appetitt. Vi kan danse, til vi dør, vil du og jeg være unge for alltid. Vi lever livet. Vi gjør det riktig. Ord på gaten, du har noe å vise meg, meg.
Vil du se showet i 3D, en film. De sier, vær redd du ikke er som de andre, futuristisk elsker. Åpne opp hjertet ditt. Så jeg satt stille, samtykket høflig. Sist fredag kveld. Ja, du er heldig hvis du er på flyet hennes. Jeg skal være din gave, gi deg noe godt å feire.
<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>Bunnjustert media
Kom igjen, la fargene dine sprekke. Jeg kan føle dette lyset som er inni meg. Hele natten spiller de, sangen din. Fra Tokyo til Mexico, til Rio. Det er ingen vei tilbake. Men ned til jorden. Magisk, fargerik, Mr. Mystery, ee. Ulikt DNA, de forstår deg ikke.
Men ned til jorden. Hun har det, je ne sais quoi, du vet det. Jeg kan se skriften på veggen. Guttene knekker nakken prøver å snike en liten sniktitt. Ta meg, ta-ta-ta meg. Åpne opp hjertet ditt. Tenkte at jeg var unntaket. Bom, bom, bom. Venice beach og Palm Springs, sommertid er alt. Ta takten tilbake. (Slik gjør vi)
<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>Rekkefølge
Endre rekkefølgen på innholdet i medieobjekter ved å modifisere selve HTML-en, eller ved å legge til en egendefinert flexbox CSS for å angi orderegenskapen (til et heltall du velger).
Medieobjekt
Jeg vet at det vil bli ofre, men det er prisen. Er du modig nok til å la meg se påfuglen din? Vær din tenåringsdrøm i natt. Uh-he, jeg ser deg. Det er ingen vei tilbake. Ja, vi makserte kredittkortene våre og ble kastet ut av baren. Så la meg få deg i bursdagsdressen din. Du kan bli forelsket når du møter henne. Hadde verden i håndflaten. Ikke la storheten få deg ned, oh, oh yeah. Nå snakker vi astrologi, får neglene våre, alle japansk-y. Gjør meg til din Afrodite.
<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>Medieliste
Fordi medieobjektet har så få strukturelle krav, kan du også bruke disse klassene på liste HTML-elementer. På din <ul>eller <ol>, legg til for .list-unstyledå fjerne alle nettleserstandardlistestiler, og bruk deretter .mediapå dine <li>s. Som alltid, bruk avstandsverktøy der det er nødvendig for å finjustere.
-
Listebasert medieobjekt
Alle jentene mine vintage Chanel baby. Så du kan få kaken din. I kveld, i kveld, i kveld, går jeg på lufta. Svelger sakte ned frykten min, yeah yeah. Vokser raskt til et lyn. Så varmt og tungt, 'Til daggry. Det eventyret som slutter med en ridder i skinnende rustning. Tungt er hodet som bærer kronen.
-
Listebasert medieobjekt
Kanskje en grunn til at alle dørene er lukket. For når du er min, en gang er du min. Vær din tenåringsdrøm i natt. Tungt er hodet som bærer kronen. Det er ikke engang en ferie, ingenting å feire. En perfekt storm, perfekt storm.
-
Listebasert medieobjekt
Er du modig nok til å la meg se påfuglen din? Det er ingen vei tilbake. Dette er siste gang du sier, etter den siste linjen bryter du. På slutten av det hele.
<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>