Bagay ti media
Dokumentasion ken dagiti pagarigan para iti banag ti media ti Bootstrap tapno mangbangon kadagiti nangato a maulit-ulit a paset a kas dagiti komento ti blog, dagiti tweet, ken dagiti kapada.
Pagwadan
Ti banag ti media ket tumulong a mangbangon kadagiti komplikado ken maulit-ulit a paset a sadiay ti sumagmamano a media ket naiposision iti abay ti linaon a saan a mangbalkot iti naibaga a media. Plus, aramidenna daytoy nga addaan laeng iti dua a kasapulan a klase gapu iti flexbox.
Iti baba ket maysa a pagarigan ti maymaysa a banag ti media. Dua laeng a klase ti kasapulan—ti pannakabalkot .media
ken ti .media-body
aglawlaw ti linaonmo. Ti opsional a padding ken margin ket mabalin a makontrol babaen dagiti spacing utilities .
Paulo ti media
Kasta met ngata ti aramidem kaniak? Panawenen tapno sanguen ti musika saanaken a musa. Nangngeg napintas, agbalin nga judge ken dagiti babbalasitang ko ket agbotos. Mariknak ti maysa a phoenix iti unegko. Apal ti langit iti ayattayo, agsangsangit dagiti anghel manipud ngato. Yeah, ipannak idiay 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: Dagiti elemento ti inline ket saan a matrato a kas dagiti banag ti flex
Ti Internet Explorer 10-11 ket saan a mangiparang kadagiti inline nga elemento a kas dagiti silpo wenno ladawan (wenno ::before
ken dagiti ::after
pseudo-elemento) a kas dagiti flex a banag. Ti laeng panagliklik ket ti panangikeddeng ti saan nga inline a display
pateg (kas pagarigan, block
, inline-block
, wenno flex
). Isingasingmi ti panagusar iti .d-flex
, maysa kadagiti display utilities -mi , kas nalaka a panangtarimaan.
Gubuayan: Flexbugs iti GitHub
Panag-umok
Dagiti banag ti media ket mabalin nga awan patinggana a naisanglad, urayno isingasingmi nga agsardengka iti maysa a punto. Ikabil ti nested .media
iti uneg ti .media-body
ti maysa a nagannak a media a banag.
Paulo ti media
Agtaktakder iti sango a linia no mangrugin a matnag dagiti bomba. Apal ti langit iti ayattayo, agsangsangit dagiti anghel manipud ngato. Dinaka masukatan iti maysa a milion a singsing. Boy, inton addaka kaniak ikkanka iti raman. Awan ti agsubli. Before you met me I was alright ngem medyo nadagsen dagiti bambanag. Nadagsen ti ulo a mangisuot iti korona.
Paulo ti media
Kablaaw ay-ayaten tayo agdaliasat. Wen, pagsangitantayo dagiti anghel, nga agtudo ditoy daga manipud ngato. Ikkannaka iti nasayaat a rambakan. Kagatko idi ti dilak ken tenglen ti anges. I'm ma get your heart racing iti skin-tight nga maong ko. Bayat ti panagmartsak nga agmaymaysa iti sabali a beat. Kalgaw kalpasan ti haiskul idi damo a nagkitakami. Kasta unay ti panaghipnotismo, mabalin kadi a sika ti diablo? Mabalin kadi a maysaka nga anghel? Panawenen tapno iruar dagiti dadakkel a balloon. Impagarupna a siak ti nailaksid. Bikini, zucchinis, Martinis, awan ti 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>
Panagtunos
Ti media iti maysa a banag ti media ket mabalin a maitunos kadagiti flexbox a utilidad iti ngato (default), tengnga, wenno ngudo ti .media-body
linaonmo.
Top-aligned a media
I'm gon' put isuna iti coma. Mangtedka iti sangagasut a rason no apay, ket kunam a talaga a padasem. Isu a nagtugawak a siuulimek, immanamongak a sidadayaw. Maibagay iti korona a labanko. Ket iti maika-18 a Birthday-ko nakaalakami kadagiti matching tattoo. So très chic, yeah, maysa isuna a klasiko. Nakasaganaak para iti kalsada a saan unay a madaliasat.
Magmagnaak iti angin (ita a rabii). Ngem agpababa iti daga. Orihinalka, saan a mabalin a masukatan. Ngem iti sabali a biag siak koma ti balasangmo. Nagmanehokami a napan idiay Cali ket nabartekkami iti aplaya. Mabalinmi ti agsala, agingga a mataykami, sika ken siak, agtutubokami iti agnanayon. Nakitaka iti sentro ti siudad a mangkanta iti 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>
Media a naitunos iti sentro
Agpalamiisto a kas freezer. Iti eh-end ti amin. Agsasaip a kasla uyokan a nagun-odko dagiti garitko. Bikini, zucchinis, Martinis, awan ti weenies. Sapay koma ta nagun-odmo ti nasalun-at a ganas a mangan. Mabalinmi ti agsala, agingga a mataykami, sika ken siak, agtutubokami iti agnanayon. Agbibiagtayo iti biag. Umiso ti ar-aramidenmi. Sao iti kalsada, adda nagun-odmo nga ipakita kaniak, siak.
Wanna kitaen ti pabuya iti 3D, maysa a pelikula. Kunada, agbutengka a dika kas kadagiti dadduma, futuristic lover. Luktam ti pusom. Isu a nagtugawak a siuulimek, immanamongak a sidadayaw. Idi rabii ti Biernes. Yeah, nagasatka no addaka iti eroplanona. Siak ti agbalin a sagutmo, ikkannaka iti nasayaat a selebraran.
<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>
Naitunos iti baba a media
Umayka, bay-am a bumtak dagiti kolormo. Mariknak daytoy a lawag nga adda iti unegko. Iti intero a rabii nga agtokarda, ti kantam. Manipud Tokyo agingga iti Mexico, agingga iti Rio. Awan ti agsubli. Ngem agpababa iti daga. Magical, namaris, Mr. Misterio, ee. Nagduduma a DNA, didaka maawatan.
Ngem agpababa iti daga. Adda kenkuana dayta, je ne sais quoi, ammom dayta. Makitak ti naisurat iti diding. Dagiti lallaki ket mangburak kadagiti tengngedda try'na nga ag-creep bassit a sneak peek. Alaennak, ta-ta-alanak. Luktam ti pusom. Impagarupna a siak ti nailaksid. Boom, boom, boom nga. Venice beach ken Palm Springs, ti panawen ti kalgaw ti amin. Isubli ti beat. (Kastoy ti aramidentayo)
<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>
Ipaipaw-it
Baliwan ti urnos ti linaon kadagiti banag ti media babaen ti panangbalbaliw ti HTML a mismo, wenno babaen ti pananginayon ti sumagmamano a kostumbre a flexbox CSS tapno mangikeddeng ti order
tagikua (iti maysa nga intero a bilang a piliem).
Bagay ti media
Ammok nga addanto sakripisio ngem dayta ti gatadna. Maituredmo kadi a mangipalubos kaniak a makakita iti paboream? Agbalinka nga arapaapmo iti tin-edyer ita a rabii. Uh-huh, makitaka. Awan ti agsubli. Yeah, max kami ti credit cards mi ket na-kick out kami ti bar. Isu a bay-anyo nga isuotko ti birthday suit-yo. Mabalin nga agayatka no maam-ammom isuna. Adda ti lubong iti palad dagiti imam. Dimo ipalubos a ti kinatan-ok ti mangpababa kenka, oh, oh yeah. Ita tayo nga agsasarita astrolohia, pananggun-od kadagiti kukotayo inaramid, amin a Hapones-y. Pagbalinennak nga Aphrodite-mo.
<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>
Listaan ti media
Gapu ta ti banag ti media ket addaan kadagiti bassit unay nga estruktural a kasapulan, mabalinmo pay nga usaren dagitoy a klase kadagiti elemento ti HTML ti listaan. Iti <ul>
wenno <ol>
, inayon ti .list-unstyled
tapno maikkat ti ania man a default nga estilo ti listaan ti browser, ken kalpasanna agaplikar .media
iti <li>
s-mo. Kas iti kanayon, agusarka kadagiti spacing utilities sadinoman a kasapulan tapno ma-fine tune.
-
Listaan-a naibatay a banag ti media
Amin nga babbalasang ko vintage Chanel baby. Isu a mabalinmo ti maaddaan iti cake-mo. Ita a rabii, ita a rabii, ita a rabii, magmagnaak iti angin. In-inut nga agtilmon ti butengko, yeah yeah. Napartak a dumakkel nga agbalin a kimat. Kasta unay ti pudot ken nadagsen, 'Til dawn. Dayta a sarsarita nga agpatingga iti maysa a kabalyero nga addaan iti agsilsilnag a kabal. Nadagsen ti ulo a mangisuot iti korona.
-
Listaan-a naibatay a banag ti media
Mabalin a maysa a rason no apay a naserraan amin a ridaw. Cause once nga kukuak, once nga kukuak. Agbalinka nga arapaapmo iti tin-edyer ita a rabii. Nadagsen ti ulo a mangisuot iti korona. Saan pay ketdi a piesta, awan ti selebraran. Perpekto a bagyo, perpekto a bagyo.
-
Listaan-a naibatay a banag ti media
Maituredmo kadi a mangipalubos kaniak a makakita iti paboream? Awan ti agsubli. Daytoy ti maudi a gundaway nga ibagam, kalpasan ti maudi a linia a mangburak. Iti eh-end ti amin.
<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>