Mediaobjekt
Dokumentation och exempel för Bootstraps mediaobjekt för att konstruera mycket repetitiva komponenter som bloggkommentarer, tweets och liknande.
Exempel
Medieobjektet hjälper till att bygga komplexa och repetitiva komponenter där en del media är placerad bredvid innehåll som inte omsluter nämnda media. Dessutom gör den detta med endast två obligatoriska klasser tack vare flexbox.
Nedan är ett exempel på ett enskilt medieobjekt. Endast två klasser krävs – omslaget .mediaoch .media-bodyinnehållet runt. Valfri stoppning och marginal kan kontrolleras med hjälp av avståndsverktyg .
Media rubrik
Kommer du att göra detsamma för mig? Det är dags att möta musiken. Jag är inte längre din musa. Hört att det är vackert, var domaren och mina tjejer ska rösta. Jag kan känna en fenix inom mig. Himlen är avundsjuk på vår kärlek, änglar gråter uppifrån. Ja, du tar mig till utopin.
<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-element behandlas inte som flexobjekt
Internet Explorer 10-11 renderar inte inline-element som länkar eller bilder (eller ::beforeoch ::afterpseudo-element) som flexobjekt. Den enda lösningen är att ställa in ett icke-inbyggt displayvärde (t.ex. , block, inline-blockeller flex). Vi föreslår att du använder .d-flex, ett av våra skärmverktyg , som en enkel lösning.
Källa: Flexbugs på GitHub
Häckande
Medieobjekt kan kapslas oändligt, även om vi föreslår att du slutar någon gång. Placera kapslade .mediai .media-bodyett överordnat medieobjekt.
Media rubrik
Står i frontlinjen när bomberna börjar falla. Himlen är avundsjuk på vår kärlek, änglar gråter uppifrån. Kan inte ersätta dig med en miljon ringar. Pojke, när du är med mig ska jag ge dig ett smakprov. Det finns ingen återvändo. Innan du träffade mig var jag okej men saker och ting var ganska tunga. Tungt är huvudet som bär kronan.
Media rubrik
Hälsningar nära och kära låt oss ta en resa. Ja, vi får änglar att gråta och regnar ner på jorden uppifrån. Ge dig något gott att fira. Jag brukade bita mig i tungan och hålla andan. Jag ska få ditt hjärta att springa i mina hudtighta jeans. När jag marscherar ensam till ett annat takt. Sommar efter gymnasiet när vi träffades första gången. Du är så hypnotiserande, kan du vara djävulen? Kan du vara en ängel? Det är dags att ta fram de stora ballongerna. Trodde att jag var undantaget. Bikinis, zucchinis, Martinis, inga töser.
<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>Inriktning
Media i ett medieobjekt kan justeras med flexbox-verktyg till toppen (standard), mitten eller slutet av ditt .media-bodyinnehåll.
Toppjusterat media
Jag ska försätta henne i koma. Du ger hundra skäl till varför, och du säger att du verkligen kommer att försöka. Så jag satt tyst, höll artigt med. Passar för min krona strid. Och på min 18-årsdag fick vi matchande tatueringar. Så très chic, ja, hon är en klassiker. Jag är redo för vägen mindre rest.
Jag går på luft (ikväll). Men jordnära. Du är original, kan inte ersättas. Men i ett annat liv skulle jag vara din tjej. Vi körde till Cali och blev fulla på stranden. Vi kan dansa, tills vi dör, du och jag kommer att vara unga för alltid. Såg dig i centrum sjunga 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>Centerjusterat media
Hon blir kall som en frys. I slutet av det hela. Stickande som ett bi fick jag mina ränder. Bikinis, zucchinis, Martinis, inga töser. Jag hoppas att du har en hälsosam aptit. Vi kan dansa, tills vi dör, du och jag kommer att vara unga för alltid. Vi lever livet. Vi gör det rätt. Ord på gatan, du har något att visa mig, mig.
Vill se programmet i 3D, en film. De säger, var rädd att du inte är som de andra, futuristisk älskare. Öppna ditt hjärta. Så jag satt tyst, höll artigt med. Förra fredagskvällen. Ja, du har tur om du är på hennes plan. Jag ska vara din gåva, ge dig något gott att fira.
<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>Bottenjusterat media
Kom igen, låt dina färger brista. Jag kan känna det här ljuset som finns inom mig. Hela natten spelar de, din sång. Från Tokyo till Mexiko, till Rio. Det finns ingen återvändo. Men jordnära. Magiskt, färgglatt, Mr. Mystery, ee. Annat DNA, de förstår dig inte.
Men jordnära. Det har hon, je ne sais quoi, du vet det. Jag kan se skriften på väggen. Pojkarna bryter nacken försöker smyga en liten smygtitt. Ta mig, ta-ta-ta mig. Öppna ditt hjärta. Trodde att jag var undantaget. Boom Boom boom. Venice beach och Palm Springs, sommaren är allt. Ta tillbaka takten. (Det är så vi gör)
<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>Ordning
Ändra ordningen på innehållet i medieobjekt genom att modifiera själva HTML-koden, eller genom att lägga till någon anpassad flexbox-CSS för att ställa in orderegenskapen (till ett heltal som du väljer).
Mediaobjekt
Jag vet att det kommer att finnas uppoffringar men det är priset. Är du modig nog att låta mig se din påfågel? Var din tonårsdröm i natt. Äh, jag ser dig. Det finns ingen återvändo. Ja, vi maxade våra kreditkort och blev utslängda från baren. Så låt mig få dig i din födelsedagskostym. Du kan bli kär när du träffar henne. Hade världen i din handflata. Låt inte storheten få dig ner, oh, oh yeah. Nu pratar vi astrologi, fixar våra naglar, alla japanska. Gör mig till 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>Medialista
Eftersom medieobjektet har så få strukturella krav kan du även använda dessa klasser på list HTML-element. På din <ul>eller <ol>lägger du till för .list-unstyledatt ta bort alla webbläsarstandardliststilar och tillämpar sedan .mediapå dina <li>s. Som alltid, använd avståndsverktyg där det behövs för att finjustera.
-
Listbaserat medieobjekt
Alla mina flickor vintage Chanel baby. Så du kan få din tårta. Ikväll, ikväll, ikväll går jag på luft. Sväljer sakta ner min rädsla, yeah yeah. Växer snabbt till en blixt. Så varmt och tungt, 'Till gryningen. Den där sagan som slutar med en riddare i lysande rustning. Tungt är huvudet som bär kronan.
-
Listbaserat medieobjekt
Kanske en anledning till att alla dörrar är stängda. För när du är min, en gång är du min. Var din tonårsdröm i natt. Tungt är huvudet som bär kronan. Det är inte ens en helgdag, inget att fira. En perfekt storm, perfekt storm.
-
Listbaserat medieobjekt
Är du modig nog att låta mig se din påfågel? Det finns ingen återvändo. Det här är sista gången du säger, efter sista raden bryter du. I slutet av det hela.
<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>