Medijski objekt
Dokumentacija i primjeri za Bootstrapov medijski objekt za izradu komponenti koje se vrlo ponavljaju kao što su komentari na blogu, tweetovi i slično.
Primjer
Medijski objekt pomaže u izgradnji složenih i ponavljajućih komponenti gdje se neki mediji postavljaju uz sadržaj koji se ne omotava oko navedenog medija. Osim toga, to čini sa samo dvije potrebne klase zahvaljujući flexboxu.
Ispod je primjer jednog medijskog objekta. Potrebne su samo dvije klase - omot .media
i .media-body
oko vašeg sadržaja. Dodatno ispunjavanje i margine mogu se kontrolirati pomoću pomoćnih programa za razmake .
Medijski naslov
Hoćeš li učiniti isto za mene? Vrijeme je da se suočiš s glazbom. Nisam ti više muza. Čuo sam da je lijepo, budi sudac i moje će djevojke glasati. Osjećam feniksa u sebi. Nebo je ljubomorno na našu ljubav, anđeli plaču odozgo. Da, vodiš me u utopiju.
<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 elementi se ne tretiraju kao flex stavke
Internet Explorer 10-11 ne prikazuje ugrađene elemente poput veza ili slika (ili ::before
pseudoelemenata ::after
) kao fleksibilne stavke. Jedino zaobilazno rješenje je postavljanje neinline display
vrijednosti (npr. block
, inline-block
, ili flex
). Predlažemo korištenje .d-flex
jednog od naših uslužnih programa za prikaz kao jednostavno rješenje.
Izvor: Flexbugs na GitHubu
Gniježđenje
Medijski objekti mogu biti beskonačno ugniježđeni, iako predlažemo da prestanete u nekom trenutku. Mjesto ugniježđeno .media
unutar .media-body
nadređenog medijskog objekta.
Medijski naslov
Stajati na prvoj liniji kad bombe počnu padati. Nebo je ljubomorno na našu ljubav, anđeli plaču odozgo. Ne može te zamijeniti milijun prstenova. Dječače, kad budeš sa mnom, dat ću ti da probaš. Nema povratka. Prije nego što si me upoznao bio sam dobro, ali stvari su bile nekako teške. Teška je glava koja nosi krunu.
Medijski naslov
Pozdrav voljeni, pođimo na putovanje. Da, tjeramo anđele da plaču, padajući kišom na zemlju s visine. Dati vam nešto dobro za proslavu. Znao sam se ugristi za jezik i zadržati dah. Natjerat ću ti srce da ubrza u mojim uskim trapericama. Dok sam marširam u drugačijem ritmu. Ljeto nakon srednje škole kada smo se prvi put sreli. Tako hipnotiziraš, možeš li biti vrag? Biste li mogli biti anđeo? Vrijeme je da izbacimo velike balone. Mislio sam da sam ja iznimka. Bikiniji, tikvice, martiniji, bez slatkiša.
<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>
Poravnanje
Mediji u medijskom objektu mogu se uslužnim programima flexboxa poravnati na vrh (zadano), sredinu ili kraj vašeg .media-body
sadržaja.
Gornji poravnati mediji
Stavit ću je u komu. Navedeš stotinu razloga zašto, i kažeš da ćeš stvarno pokušati. Pa sam sjedio tiho, pristojno se složio. Spremam se za svoju krunsku bitku. A na moj 18. rođendan dobili smo iste tetovaže. Tako très chic, da, ona je klasik. Spreman sam za put kojim se manje ide.
Hodam po zraku (večeras). Ali na zemlji. Originalni ste, ne možete ga zamijeniti. Ali u drugom životu bila bih tvoja djevojka. Odvezli smo se u Cali i napili se na plaži. Možemo plesati, dok ne umremo, ti i ja, bit ćemo zauvijek mladi. Vidio sam te u gradu kako pjevaš 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>
Mediji poravnati po sredini
Bit će hladna kao zamrzivač. Na kraju svega. Bockajući kao pčela zaradio sam svoje pruge. Bikiniji, tikvice, martiniji, bez slatkiša. Nadam se da imaš zdrav apetit. Možemo plesati, dok ne umremo, ti i ja, bit ćemo zauvijek mladi. Mi živimo život. Činimo to kako treba. Priča se na ulici, imaš mi nešto za pokazati, ja.
Želite vidjeti predstavu u 3D, film. Kažu, boj se da nisi kao drugi, futuristički ljubavniče. Otvori svoje srce. Pa sam sjedio tiho, pristojno se složio. Prošli petak navečer. Da, sretan si ako si u njezinom zrakoplovu. Ja ću biti tvoj dar, dati ću ti nešto dobro za slavlje.
<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>
Mediji poravnati s donje strane
Hajde, neka tvoje boje pršte. Osjećam ovo svjetlo koje je u meni. Cijelu noć sviraju, tvoja pjesma. Od Tokija do Meksika, do Rija. Nema povratka. Ali na zemlji. Čarobno, šareno, Mr. Mystery, ee. Drugačiji DNK, ne razumiju te.
Ali na zemlji. Ona to ima, je ne sais quoi, znaš to. Vidim natpis na zidu. Dječaci lome vratove pokušavajući malo proviriti. Uzmi me, ta-ta-uzmi me. Otvori svoje srce. Mislio sam da sam ja iznimka. Bum, bum, bum. Plaža Venice i Palm Springs, ljeto je sve. Vratite ritam. (Ovako mi radimo)
<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>
Narudžba
Promijenite redoslijed sadržaja u medijskim objektima izmjenom samog HTML-a ili dodavanjem nekog prilagođenog flexbox CSS-a za postavljanje order
svojstva (na cijeli broj po vašem izboru).
Medijski objekt
Znam da će biti odricanja, ali to je cijena. Jeste li dovoljno hrabri da mi dopustite da vidim vašeg pauna? Budite večeras svoj tinejdžerski san. A-ha, vidim te. Nema povratka. Da, povećali smo kreditne kartice i izbacili su nas iz bara. Dopusti mi da te odnesem u tvoje rođendansko odijelo. Možda ćete se zaljubiti kad je upoznate. Imao svijet na dlanu. Ne daj da te veličina ponizi, o, o da. Sada govorimo o astrologiji, uređivanju noktiju, sve japansko. Učini me svojom Afroditom.
<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>
Popis medija
Budući da medijski objekt ima tako malo strukturnih zahtjeva, možete također koristiti ove klase na popisnim HTML elementima. Na <ul>
ili <ol>
dodajte da .list-unstyled
biste uklonili zadane stilove popisa preglednika, a zatim primijenite .media
na svoj <li>
s. Kao i uvijek, koristite pomoćne programe za razmak gdje god je potrebno za fino podešavanje.
-
Medijski objekt temeljen na popisu
Sve moje cure vintage Chanel baby. Tako da možete dobiti svoju tortu. Večeras, večeras, večeras, hodam po zraku. Polako gutam svoj strah, da, da. Brzo raste u munju. Tako vruće i teško, 'Do zore. Ta bajka završava s vitezom u sjajnom oklopu. Teška je glava koja nosi krunu.
-
Medijski objekt temeljen na popisu
Možda je razlog zašto su sva vrata zatvorena. Jer jednom kad si moj, jednom si moj. Budite večeras svoj tinejdžerski san. Teška je glava koja nosi krunu. Nije čak ni praznik, nema se što slaviti. Savršena oluja, savršena oluja.
-
Medijski objekt temeljen na popisu
Jeste li dovoljno hrabri da mi dopustite da vidim vašeg pauna? Nema povratka. Ovo je zadnji put da kažeš, nakon zadnjeg retka koji prekidaš. Na kraju svega.
<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>