Medijski objekat
Dokumentacija i primjeri za Bootstrapov medijski objekt za konstruiranje komponenti koje se vrlo ponavljaju kao što su komentari na blogu, tweetovi i slično.
Primjer
Objekat medija pomaže u izgradnji složenih i ponavljajućih komponenti gdje su neki mediji pozicionirani uz sadržaj koji se ne obavija oko spomenutog medija. Osim toga, to radi sa samo dvije potrebne klase zahvaljujući flexboxu.
Ispod je primjer jednog medijskog objekta. Potrebne su samo dvije klase — omotavanje .media
i .media-body
oko vašeg sadržaja. Opcioni padding i margine mogu se kontrolisati preko uslužnih programa za razmak .
Naslov medija
Hoćeš li učiniti isto za mene? Vrijeme je da se suočiš s muzikom. Više nisam tvoja muza. Čuo sam da je prelepo, budi sudija i moje devojke će glasati. Oseć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 kao što su veze ili slike (ili ::before
i ::after
pseudoelementi) kao flex stavke. Jedino zaobilazno rješenje je postavljanje ne-inline display
vrijednosti (npr. block
, inline-block
, ili flex
). Predlažemo korištenje .d-flex
, jednog od naših uslužnih programa za prikaz , kao lako rješenje.
Izvor: Flexbugs na GitHubu
Nesting
Medijski objekti mogu biti beskonačno ugniježđeni, iako predlažemo da prestanete u nekom trenutku. Mjesto ugniježđeno .media
unutar .media-body
roditeljskog medijskog objekta.
Naslov medija
Stojim na prvoj liniji kad bombe počnu da padaju. Nebo je ljubomorno na našu ljubav, anđeli plaču odozgo. Ne mogu te zamijeniti sa milion prstenova. Dečko, kad budeš sa mnom, probaću ti. Nema povratka. Pre nego što si me upoznao, bio sam dobro, ali stvari su bile prilično teške. Teška je glava koja nosi krunu.
Naslov medija
Pozdrav dragim ljudima idemo na putovanje. Da, mi tjeramo anđele da plaču, kišu na zemlju odozgo. Dajte vam nešto dobro da proslavite. Ugrizao sam se za jezik i zadržavao dah. Učiniću da ti srce lupa u mojim uskim farmerkama. Dok sam marširao u drugačiji ritam. Ljeto nakon srednje škole kada smo se prvi put sreli. Tako hipnotišeš, možeš li biti đavo? Možeš li biti anđeo? Vrijeme je da izvadimo velike balone. Mislio sam da sam ja izuzetak. Bikinije, tikvice, martinije, bez dućana.
<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 poravnati pomoću flexbox uslužnih programa na vrh (podrazumevano), sredinu ili kraj vašeg .media-body
sadržaja.
Vrhunski raspoređeni mediji
Staviću je u komu. Navodiš sto razloga zašto, i kažeš da ćeš se zaista potruditi. Tako da sam mirno sjedio, ljubazno se složio. Odlikovana za moju krunsku bitku. I 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 putuje.
Hodam po zraku (večeras). Ali na zemlju. Originalni ste, ne može se zamijeniti. Ali u drugom životu bila bih tvoja devojka. Odvezli smo se u Cali i napili se na plaži. Možemo plesati, dok ne umremo, ti i ja, bićemo mladi zauvijek. Vidio sam te u centru grada 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>
Centrirani mediji
Postat će hladna kao zamrzivač. Na kraju svega. Bodeći kao pčela zaradio sam svoje trake. Bikinije, tikvice, martinije, bez dućana. Nadam se da imate zdrav apetit. Možemo plesati, dok ne umremo, ti i ja, bićemo mladi zauvijek. Živimo život. Radimo to kako treba. Priča se na ulici, imaš nešto da mi pokažeš, ja.
Želim vidjeti emisiju u 3D, film. Kažu, boj se da nisi kao ostali, futuristički ljubavnik. Otvori svoje srce. Tako da sam mirno sjedio, ljubazno se složio. Prošlog petka naveče. Da, sretan si ako si u njenom avionu. Ja ću biti tvoj poklon, pokloniti ti nešto dobro da proslaviš.
<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 prema dnu
Hajde, neka ti boje pršte. Mogu da osetim ovu svetlost koja je u meni. Celu noć sviraju, tvoja pesma. Od Tokija do Meksika, do Rija. Nema povratka. Ali na zemlju. Čarobno, šareno, Mr. Mystery, ee. Drugačiji DNK, ne razumiju te.
Ali na zemlju. Ona ima to, je ne sais quoi, znaš to. Vidim natpis na zidu. Dječaci lome vratove pokušavaju da malo zavire. Uzmi me, ta-ta-uzmi me. Otvori svoje srce. Mislio sam da sam ja izuzetak. Bum, bum, bum. Venice beach i Palm Springs, ljeto je sve. Vrati ritam. (Ovako 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>
Red
Promijenite redoslijed sadržaja u medijskim objektima modifikacijom samog HTML-a ili dodavanjem nekog prilagođenog flexbox CSS-a za postavljanje order
svojstva (na cijeli broj po vašem izboru).
Medijski objekat
Znam da će biti žrtve, ali to je cijena. Jeste li dovoljno hrabri da mi dozvolite da vidim vašeg pauna? Budi tvoj tinejdžerski san večeras. Uh-huh, vidim te. Nema povratka. Da, povećali smo svoje kreditne kartice i izbačeni smo iz bara. Pa daj da te obučem u tvoje rođendansko odijelo. Možda ćete se zaljubiti kada je upoznate. Imali ste svijet na dlanu. Ne dozvolite da vas veličina sruši, oh, oh da. Sada pričamo o astrologiji, da sredimo nokte, 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>
Lista medija
Budući da medijski objekat ima tako malo strukturnih zahtjeva, možete koristiti i ove klase na HTML elementima liste. Na vašem <ul>
ili <ol>
, dodajte da .list-unstyled
biste uklonili sve zadane stilove liste pretraživača, a zatim primenite .media
na svoj <li>
s. Kao i uvijek, koristite uslužne programe za razmak gdje god je potrebno za fino podešavanje.
-
Medijski objekt zasnovan na listi
Sve moje djevojke vintage Chanel baby. Tako da možete uzeti 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 koja se završava vitezom u sjajnom oklopu. Teška je glava koja nosi krunu.
-
Medijski objekt zasnovan na listi
Možda razlog zašto su sva vrata zatvorena. Jer jednom kad si moj, jednom si moj. Budi tvoj tinejdžerski san večeras. Teška je glava koja nosi krunu. Nije čak ni praznik, ništa za slaviti. Savršena oluja, savršena oluja.
-
Medijski objekt zasnovan na listi
Jeste li dovoljno hrabri da mi dozvolite da vidim vašeg pauna? Nema povratka. Ovo je posljednji put da kažete, nakon posljednjeg reda koji ste prekinuli. 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>