Medijski predmet
Dokumentacija in primeri za Bootstrapov medijski objekt za izdelavo zelo ponavljajočih se komponent, kot so komentarji na spletnem dnevniku, tviti in podobno.
Primer
Medijski objekt pomaga graditi zapletene in ponavljajoče se komponente, kjer so nekateri mediji postavljeni poleg vsebine, ki se ne ovije okoli omenjenega medija. Poleg tega to počne s samo dvema zahtevanima razredoma, zahvaljujoč flexboxu.
Spodaj je primer enega medijskega predmeta. Potrebna sta samo dva razreda – ovoj .mediain .media-bodyokoli vaše vsebine. Izbirno oblazinjenje in rob lahko nadzirate s pripomočki za razmik .
Medijski naslov
Ali boš naredil enako zame? Čas je, da se soočim z glasbo. Nisem več tvoja muza. Slišal sem, da je lepo, bodi sodnik in moja dekleta bodo glasovala. V sebi čutim feniksa. Nebesa so ljubosumna na našo ljubezen, angeli jočejo od zgoraj. Ja, popelješ me v utopijo.
<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 št. 12: elementi v vrstici se ne obravnavajo kot prilagodljivi elementi
Internet Explorer 10–11 ne upodablja elementov v vrstici, kot so povezave ali slike (ali ::beforein ::afterpsevdoelementi), kot elemente flex. Edina rešitev je nastavitev displayvrednosti, ki ni v vrstici (npr. block, inline-blockali flex). Predlagamo uporabo .d-flex, enega od naših prikazovalnih pripomočkov , kot enostavno rešitev.
Vir: Flexbugs na GitHubu
Gnezdenje
Medijski objekti so lahko neskončno ugnezdeni, vendar predlagamo, da se na neki točki ustavite. Mesto ugnezdeno .mediaznotraj .media-bodynadrejenega medijskega objekta.
Medijski naslov
Stoj na prvi liniji, ko začnejo padati bombe. Nebesa so ljubosumna na našo ljubezen, angeli jočejo od zgoraj. Ne more te nadomestiti z milijoni prstanov. Fant, ko boš z mano, ti bom dal poskusiti. Ni poti nazaj. Preden si me spoznal, sem bil v redu, a stvari so bile precej težke. Težka je glava, ki nosi krono.
Medijski naslov
Lep pozdrav ljubljeni, gremo na potovanje. Da, spravljamo angele v jok, ki padajo na zemljo od zgoraj. Podarim vam nekaj dobrega za praznovanje. Včasih sem se ugriznil v jezik in zadrževal dih. V mojih oprijetih kavbojkah ti bom srce razbijalo. Ko korakam sam v drugačnem ritmu. Poletje po srednji šoli, ko sva se prvič srečala. Tako hipnotiziraš, si lahko hudič? Bi lahko bil angel? Čas je, da izvlečemo velike balone. Mislil sem, da sem izjema. Bikiniji, bučke, martiniji, brez majic.
<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>Poravnava
Predstavnost v medijskem objektu je mogoče poravnati s pripomočki flexbox na vrh (privzeto), sredino ali konec vaše .media-bodyvsebine.
Zgoraj poravnani mediji
Spravil jo bom v komo. Navedeš sto razlogov, zakaj, in rečeš, da boš res poskusil. Zato sem tiho sedel in se vljudno strinjal. Pripravljam se za mojo kronsko bitko. In na moj 18. rojstni dan smo dobili enake tetovaže. Tako très chic, ja, ona je klasika. Pripravljen sem na manj prevoženo pot.
Hodim po zraku (nocoj). Ampak prizemljeno. Ste originalni, ne morete ga zamenjati. Toda v drugem življenju bi bila tvoje dekle. Odpeljali smo se v Cali in se napivali na plaži. Lahko pleševa, dokler ne umreva, ti in jaz, bova večno mlada. Videl sem te v centru peti 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>Sredinsko poravnani mediji
Hladna bo kot zamrzovalnik. Na koncu vsega. Pikajoč kot čebela sem si prislužil črte. Bikiniji, bučke, martiniji, brez majic. Upam, da imaš zdrav apetit. Lahko pleševa, dokler ne umreva, ti in jaz, bova večno mlada. Živimo življenje. Delamo prav. Beseda na ulici, nekaj mi moraš pokazati, jaz.
Želim si ogledati predstavo v 3D, film. Pravijo, boj se, da nisi kot drugi, futuristični ljubimec. Odpri svoje srce. Zato sem tiho sedel in se vljudno strinjal. Zadnji petek zvečer. Ja, srečen si, če si na njenem letalu. Jaz bom tvoje darilo, dal ti bom nekaj dobrega za praznovanje.
<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>Spodaj poravnan medij
Daj no, naj tvoje barve počijo. Čutim to svetlobo, ki je v meni. Vso noč igrajo tvojo pesem. Od Tokia do Mehike, do Ria. Ni poti nazaj. Ampak prizemljeno. Čarobno, barvito, Mr. Mystery, ee. Drugačen DNK, ne razumejo te.
Ampak prizemljeno. To ima, je ne sais quoi, saj veš. Vidim napis na steni. Fantje si zlomijo vratove, ko se poskušajo priplaziti. Vzemi me, ta-ta-vzemi me. Odpri svoje srce. Mislil sem, da sem izjema. Bum, bum, bum. Plaža Venice in Palm Springs, poletje je vse. Vrnite utrip. (Tako delamo mi)
<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>naročilo
Spremenite vrstni red vsebine v medijskih objektih tako, da spremenite sam HTML ali dodate CSS po meri flexbox, da nastavite orderlastnost (na celo število po vaši izbiri).
Medijski predmet
Vem, da se bo treba žrtvovati, a to je cena. Si dovolj pogumen, da mi dovoliš videti tvojega pava? Bodi nocoj svoje najstniške sanje. Uh-huh, vidim te. Ni poti nazaj. Ja, napolnili smo kreditne kartice in so nas vrgli iz bara. Naj te torej oblečem v rojstnodnevno obleko. Morda se boste zaljubili, ko jo boste srečali. Imel svet na dlani. Naj te veličina ne premami, o, o ja. Zdaj govorimo o astrologiji, urejanju nohtov, vse japonsko. Naredi me za svojo Afrodito.
<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>Seznam medijev
Ker ima medijski objekt tako malo strukturnih zahtev, lahko te razrede uporabite tudi na elementih HTML seznama. Na <ul>ali <ol>dodajte, .list-unstyledda odstranite morebitne privzete sloge seznama brskalnika, in nato uporabite .mediaza <li>s. Kot vedno uporabite pripomočke za razmik, kjer koli je potrebno za natančno nastavitev.
-
Medijski objekt na podlagi seznama
Vsa moja dekleta vintage Chanel baby. Torej lahko imate svojo torto. Nocoj, nocoj, nocoj, hodim po zraku. Počasi požiram svoj strah, ja, ja. Hitro raste v strelo. Tako vroče in težko, 'Do zore. Tista pravljica, ki se konča z vitezom v sijočem oklepu. Težka je glava, ki nosi krono.
-
Medijski objekt na podlagi seznama
Mogoče razlog, zakaj so vsa vrata zaprta. Ker enkrat si moj, enkrat si moj. Bodi nocoj svoje najstniške sanje. Težka je glava, ki nosi krono. To sploh ni praznik, nič za praznovanje. Popolna nevihta, popolna nevihta.
-
Medijski objekt na podlagi seznama
Si dovolj pogumen, da mi dovoliš videti tvojega pava? Ni poti nazaj. To je zadnjič, ko rečeš, po zadnji vrstici si prekinil. Na koncu vsega.
<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>