Midia ɔbjɛkt
Dokumɛnt ɛn ɛgzampul fɔ Bootstrap in midia ɔbjɛkt fɔ kɔnstrɔkt kɔmpɔnɛnt dɛn we rili ripit lɛk blɔk kɔmɛnt, twit, ɛn ɔda tin dɛn lɛk dat.
Ɛgzampul
Di midia ɔbjɛkt de ɛp fɔ bil kɔmpleks ɛn ripit kɔmpɔnɛnt dɛn usay sɔm midia de pozishɔn alongsay kɔntinyu we nɔ de rap rawnd di midia we dɛn tɔk bɔt. Plus, i du dis wit onli tu rikwayd klas tanks to flexbox.
Dis dɔŋ ya na ɛgzampul fɔ wan midia ɔbjɛkt. Na tu klas nɔmɔ dɛn nid—di wrap .media
ɛn di .media-body
rawnd yu kɔntinyu. Opshɔnal padding ɛn margin kin kɔntrol tru spɛshal yutiliti dɛn .
Midia edlayn
Yu go du di sem tin fɔ mi? Na taim fo fes di myusik I no bi yu muse igen. Yeh se i fayn, bi di joj en mi gyal pikin dem go tek vot. A kin fil wan finiks insay mi. Ɛvin de jɛlɔs wi lɔv, enjɛl dɛn de kray frɔm ɔp. Yea, yu tek mi go 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: Inlayn ɛlimɛnt dɛn nɔ de trit lɛk fleks aytem dɛn
Internet Explorer 10-11 nɔ de rɛnd inlayn ɛlimɛnt dɛn lɛk link ɔ pikchɔ dɛn (ɔ ::before
ɛn ::after
pseudo-ɛlimɛnt dɛn) as fleks aytem dɛn. Di onli wokaround na fɔ sɛt wan nɔ-inlayn display
valyu (ɛgz., block
, inline-block
, ɔ flex
). Wi kin advays yu fɔ yuz .d-flex
, wan pan wi displei yutiliti dɛn , as wan izi fix.
Sos: Flexbugs na GitHub
Fɔ mek dɛn nɛst
Midia ɔbjɛkt dɛn kin gɛt infinitely nest, pan ɔl we wi kin se yu fɔ stɔp na sɔm tɛm. Ples nest .media
insay di .media-body
ɔf wan mama ɛn papa midia ɔbjɛkt.
Midia edlayn
Fɔ tinap na di fɔs layn we di bɔm dɛn bigin fɔ fɔdɔm. Ɛvin de jɛlɔs wi lɔv, enjɛl dɛn de kray frɔm ɔp. No fit riples yu wit wan milian ring. Boy, wen yu de wit mi a go giv yu wan taste. Natin nɔ de fɔ go bak. Bifo yu mit mi a bin okay bot tins bin kinda hevi. Hevi na di ed we de wɛr di krawn.
Midia edlayn
Gritin di wan dɛn we wi lɛk lɛ wi tek wan joyn. Yɛs, wi de mek enjɛl dɛn kray, ɛn ren de kam dɔŋ na di wɔl frɔm ɔp. Gi yu gud tin fɔ sɛlibret. A bin de bayt mi tɔŋ ɛn ol mi briz. I'm ma get yu hat racing in mi skin-tight jeans. As a de mach mi wan to difrɛn bit. Sɔm afta ay skul we wi fɔs mit. Yu so hypnotizing, yu fit bi di debul? Yu go ebul fɔ bi enjɛl? Na tɛm fɔ briŋ di big big balɔn dɛn kɔmɔt. Tink se na mi na di ɛksɛpshɔn. Bikinis, zukini, Martinis, no 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>
Alignmɛnt fɔ di wan dɛn we de
Midia insay wan midia ɔbjɛkt kin alaynɛd wit fleksbɔks yutiliti dɛn to di ɔp (difɔlt), midul, ɔ ɛnd pan yu .media-body
kɔntinyu.
Midia we de alaynɛd ɔp
A go put am na kɔma. Yu giv wan handred rizin wai, en yu se yu go rili trai. So a sidɔm kwayɛt wan, gri wit pɔlitiks. Suiting up fɔ mi krawn batɛl. Ɛn pan mi 18th Batde wi bin gɛt tatu dɛn we de mach. So très chic, yeah, na wan klashik. A dɔn rɛdi fɔ di rod we pipul dɛn nɔ de travul bɔku.
A de waka pan air (tunayt). Bɔt dɔŋ to di wɔl. Yu na orijinal, yu nɔ go ebul fɔ riples yu. Bɔt na ɔda layf a go bi yu gyal pikin. Wi drayv go na Kali ɛn drɔnk na di bich. Wi kin dans, te wi day, mi ɛn yu, go yɔŋ sote go. Saw yu downtown de sing di 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>
Sɛntral-alayn midia
I go tɔn kol lɛk friza. Na di eh-end of it ol. Stinging laik a bee I earned mi stripes. Bikinis, zukini, Martinis, no weenies. A op se yu bin gɛt wɛlbɔdi apɛtit. Wi kin dans, te wi day, mi ɛn yu, go yɔŋ sote go. Wi de liv di layf. Wi de du am rayt. Wod na strit, yu get somtin' tu sho mi, mi.
Wanna si di sho in 3D, wan fim. Dɛn se, fred se yu nɔ tan lɛk di ɔda wan dɛn, futuristic lover. Opin yu at. So a sidɔm kwayɛt wan, gri wit pɔlitiks. Las Fraide nait. Yea, yu laki if yu de pan in plen. A go bi yu gift, gi yu sɔntin we gud fɔ sɛlibret.
<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>
Midia we de alaynɛd dɔŋ
Kam, mek yu kala dɛn bɔs. A kin fil dis layt we de insay mi. Ɔl nɛt dɛn de ple, yu siŋ. Frɔm Tɔkyo to Mɛksiko, to Rio. Natin nɔ de fɔ go bak. Bɔt dɔŋ to di wɔl. Majik, kalaful, Mista Misteri, ee. Difrɛn DNA, dɛn nɔ ɔndastand yu.
Bɔt dɔŋ to di wɔl. I get dat, je ne sais quoi, yu sabi am. A kin si di raytin we de na di wɔl. Di bois brok dem nek try'na tu krip a likl sneak peek. Tek mi, ta-ta-tek mi. Opin yu at. Tink se na mi na di ɛksɛpshɔn. Boom, bɔm, bɔm. Venis bich ɛn Palm Springs, sɔm tɛm na ɔltin. Bring di bit bak. (Na so wi de du am)
<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>
Ɔda
Chenj di ɔda we aw di tin dɛn de insay di midia ɔbjɛkt dɛn bay we yu chenj di HTML sɛf, ɔ bay we yu ad sɔm kɔstɔm fleksbɔks CSS fɔ sɛt di order
prɔpati (to wan intaj we yu pik).
Midia ɔbjɛkt
A no se sakrifays go de bɔt na di prayz dat. Yu brayt fɔ mek a si yu pikɔk? Bi yu titi drim tinayt. Uh-huh, a si yu. Natin nɔ de fɔ go bak. Yea, wi max wi kredit kad en geht kik aut na di bar. So mek a put yu insay yu batde sus. Yu kin lɛk am we yu mit am. Had di wold in di palm of yu han. No mek di big big tin mek yu dɔŋ, oh, oh yeah. Naw wi de tok astroloji, get wi nel du, ol Japanese-y. Mek mi yu Afrodait.
<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>
Lis fɔ di midia
Bikɔs di midia ɔbjɛkt gɛt smɔl strɔkchɔral rikwaymɛnt dɛn, yu kin yuz dɛn klas ya bak pan list HTML ɛlimɛnt dɛn. Na yu <ul>
ɔ <ol>
, ad di .list-unstyled
fɔ pul ɛni brɔwza difɔlt list stayl dɛn, dɔn aplay .media
to yu <li>
s. As ɔltɛm, yuz spacing utilities ɛnisay we nid de fɔ fayn tyun.
-
List-based midia ɔbjɛkt
Ɔl mi gyal pikin dɛn vintage Chanel bebi. So yu kin gɛt yu kek. Tide nait, tinayt, tinayt, a de waka na di ays. Slowly de swɛla dɔŋ mi fred, yeah yeah. We de gro fast fast ɛn bi laytin. So hot en hevi, 'Til dawn.' Dat fayn fayn stori de dɔn wit wan nayt we wɛr klos we de shayn. Hevi na di ed we de wɛr di krawn.
-
List-based midia ɔbjɛkt
Sɔntɛm na rizin we mek dɛn lɔk ɔl di domɔt dɛn. Cause wans yu ar mine, once yu ar mine. Bi yu titi drim tinayt. Hevi na di ed we de wɛr di krawn. I nɔ ivin bi ɔlide, nɔto natin fɔ sɛlibret. Wan pafɛkt big big briz, pafɛkt big big briz.
-
List-based midia ɔbjɛkt
Yu brayt fɔ mek a si yu pikɔk? Natin nɔ de fɔ go bak. Dis na di las tɛm we yu se, afta di las layn we yu brok. Na di eh-end of it ol.
<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>