Media foarwerp
Dokumintaasje en foarbylden foar Bootstrap's media-objekt om heul repetitive komponinten te konstruearjen lykas blogkommentaar, tweets, en sa.
Foarbyld
It media-objekt helpt komplekse en repetitive komponinten te bouwen wêr't guon media neist ynhâld pleatst dy't net om de media wikkelt. Plus, it docht dit mei mar twa fereaske klassen tank oan flexbox.
Hjirûnder is in foarbyld fan ien mediaobjekt. Allinich twa klassen binne fereaske - de ynpakke .media
en de .media-body
om jo ynhâld. Opsjonele padding en marzje kinne wurde kontroleare fia spatingshelpprogramma's .
Media heading
Sille jo itselde foar my dwaan? It is tiid om de muzyk te ûndersiikjen Ik bin net mear dyn muze. Hearde dat it moai is, wês de rjochter en myn famkes sille in stim nimme. Ik kin in feniks yn my fiele. De himel is jaloersk op ús leafde, de ingels skrieme fan boppen. Ja, jo bringe my nei 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 eleminten wurde net behannele as flex items
Internet Explorer 10-11 jout gjin ynline eleminten lykas keppelings of ôfbyldings (of ::before
en ::after
pseudo-eleminten) as flexitems. De ienige oplossing is om in net-ynline display
wearde yn te stellen (bygelyks , block
, inline-block
of flex
). Wy stelle foar om .d-flex
ien fan ús display-hulpprogramma's te brûken as in maklike oplossing.
Boarne: Flexbugs op GitHub
Nesting
Media-objekten kinne ûneinich nêst wurde, hoewol wy suggerearje dat jo op in stuit stopje. Plak nested .media
binnen de .media-body
fan in âlder mediaobjekt.
Media heading
Stean op 'e frontline as de bommen begjinne te fallen. De himel is jaloersk op ús leafde, de ingels skrieme fan boppen. Kin jo net ferfange mei in miljoen ringen. Jonge, ast by my bist sil ik dy in smaak jaan. Der is gjin wei werom. Foardat jo my moete, wie ik goed, mar dingen wiene wat swier. Swier is de holle dy't de kroan draacht.
Media heading
Groeten leafsten lit ús in reis nimme. Ja, wy meitsje ingels gûle, reine del op ierde fan boppen. Jou dy wat goeds om te fieren. Ik hie eartiids op 'e tonge byt en myn azem hâlden. Ik bin ma krije dyn hert racing yn myn hûd-tight jeans. As ik allinne mar mar nei in oare beat. Simmer nei middelbere skoalle doe't wy earst moete. Jo binne sa hypnotisearjend, kinne jo de duvel wêze? Kinsto in ingel wêze? It is tiid om de grutte ballonnen út te heljen. Tocht dat ik de útsûndering wie. Bikinis, zucchinis, Martinis, gjin weenies.
<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>
Alignment
Media yn in media-objekt kinne wurde ôfstimd mei flexbox-hulpprogramma's nei de top (standert), midden as ein fan jo .media-body
ynhâld.
Top-aligned media
Ik sil har yn koma. Jo jouwe hûndert redenen wêrom, en jo sizze dat jo echt gonna besykje. Dat ik siet rêstich, stimde beleefd ôf. Oanpast foar myn kroanslach. En op myn 18e jierdei krigen wy passende tattoos. Sa très chic, ja, se is in klassiker. Ik bin klear foar de dyk minder reizge.
Ik rin op 'e loft (fannacht). Mar down to earth. Jo binne orizjineel, kin net ferfongen wurde. Mar yn in oar libben soe ik dyn famke wêze. Wy rieden nei Cali en krigen dronken op it strân. Wy kinne dûnsje, oant wy stjerre, do en ik, sille foar altyd jong wêze. Seach dy binnenstêd sjongen de 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>
Center-aligned media
Se sil kâld wurde as in friezer. Oan 'e ein fan it allegear. Stingjend as in bij haw ik myn strepen fertsjinne. Bikinis, zucchinis, Martinis, gjin weenies. Ik hoopje dat jo in sûne appetit hawwe. Wy kinne dûnsje, oant wy stjerre, do en ik, sille foar altyd jong wêze. Wy libje it libben. Wy dogge it goed. Wurd op strjitte, do hast wat om my te sjen, my.
Wolle jo de foarstelling yn 3D sjen, in film. Se sizze, wês bang dat jo net binne lykas de oaren, futuristyske leafhawwer. Iepenje dyn hert. Dat ik siet rêstich, stimde beleefd ôf. Ofrûne freedtejûn. Ja, do bist gelok ast op har fleantúch bist. Ik sil jo kado wêze, jow jo wat goeds om te fieren.
<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>
Underste rjochte media
Kom op, lit dyn kleuren barste. Ik kin dit ljocht fiele dat yn my is. De hiele nacht spylje se, dyn liet. Fan Tokio nei Meksiko, nei Rio. Der is gjin wei werom. Mar down to earth. Magysk, kleurich, hear Mystery, ee. Ferskillende DNA, se begripe dy net.
Mar down to earth. Dat hat se, je ne sais quoi, jo witte it. Ik kin it skriuwen oan 'e muorre sjen. De jonges brekke har nekke try'na om in bytsje sneak Peek te krûpen. Nim my, ta-ta-nimme my. Iepenje dyn hert. Tocht dat ik de útsûndering wie. Boem, boem, boem. Venice beach en Palm Springs, simmer is alles. Bring de beat werom. (Dit is hoe't wy dogge)
<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>
Oarder
Feroarje de folchoarder fan ynhâld yn media-objekten troch de HTML sels te feroarjen, of troch wat oanpaste flexbox CSS ta te foegjen om it order
pân yn te stellen (op in hiel getal fan jo kar).
Media foarwerp
Ik wit dat der opoffering komme sil, mar dat is de priis. Binne jo dapper genôch om my jo pau sjen te litten? Wês dyn teenage dream fannacht. Uh-huh, ik sjoch dy. Der is gjin wei werom. Ja, wy makken ús kredytkaarten maksimaal en waarden út 'e bar skopt. Dus lit my dy yn dyn jierdei pak krije. Jo kinne fereale wurde as jo har moetsje. Hie de wrâld yn 'e palm fan jo hannen. Lit de grutheid jo net ûnderdrukke, o, o ja. No prate wy oer astrology, om ús nagels dien te meitsjen, allegear Japansk-y. Meitsje my dyn Aphrodite.
<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>
Media list
Om't it mediaobjekt sa'n bytsje strukturele easken hat, kinne jo dizze klassen ek brûke op list HTML-eleminten. Op jo <ul>
of <ol>
, foegje de .list-unstyled
ta om elke browser standert liststilen te ferwiderjen, en tapasse dan .media
op jo <li>
s. Lykas altyd, brûk de spacing-hulpprogramma's wêr't it nedich is om te fine tune.
-
List-basearre media foarwerp
Al myn famkes vintage Chanel baby. Sa kinne jo jo taart hawwe. Jûn, fannacht, fannacht rin ik op 'e loft. Stadich slikken myn eangst, yeah yeah. Snel groeie yn in bliksemflits. Sa waarm en swier, 'Til moarn. Dat mearke einiget mei in ridder yn glânzjend harnas. Swier is de holle dy't de kroan draacht.
-
List-basearre media foarwerp
Miskien in reden wêrom't alle doarren ticht binne. Want as jo ienris fan my binne, ienris fan my. Wês dyn teenage dream fannacht. Swier is de holle dy't de kroan draacht. It is net iens in fakânsje, neat te fieren. In perfekte stoarm, perfekte stoarm.
-
List-basearre media foarwerp
Binne jo dapper genôch om my jo pau sjen te litten? Der is gjin wei werom. Dit is de lêste kear dat jo sizze, nei de lêste rigel brekke jo. Oan 'e ein fan it allegear.
<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>