in English

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 .mediaken ti .media-bodyaglawlaw ti linaonmo. Ti opsional a padding ken margin ket mabalin a makontrol babaen dagiti spacing utilities .

Placeholder 64x64
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 ::beforeken dagiti ::afterpseudo-elemento) a kas dagiti flex a banag. Ti laeng panagliklik ket ti panangikeddeng ti saan nga inline a displaypateg (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 .mediaiti uneg ti .media-bodyti maysa a nagannak a media a banag.

Placeholder 64x64
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.

Placeholder 64x64
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-bodylinaonmo.

Placeholder 64x64
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>
Placeholder 64x64
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>
Placeholder 64x64
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 ordertagikua (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.

Placeholder 64x64
<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-unstyledtapno maikkat ti ania man a default nga estilo ti listaan ​​ti browser, ken kalpasanna agaplikar .mediaiti <li>s-mo. Kas iti kanayon, agusarka kadagiti spacing utilities sadinoman a kasapulan tapno ma-fine tune.

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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>