in English

Media ade a wɔde di dwuma

Nwoma ne nhwɛsoɔ ma Bootstrap media adeɛ no sɛ ɛbɛkyekyere nneɛma a wɔsan yɛ no mpɛn pii te sɛ blog nsɛm, tweets, ne nea ɛtete saa.

Nhwɛsoɔ

Media adeɛ no boa ma wɔkyekyere nneɛma a ɛyɛ den na wɔtaa yɛ no mpɛn pii wɔ baabi a wɔde media binom si nsɛm a ɛnkata nsɛm ho amanneɛbɔ a wɔaka ho asɛm no nkyɛn. Plus, ɛyɛ eyi ne adesua abien pɛ a wɔhwehwɛ aseda flexbox.

Ase hɔ no yɛ media ade biako ho nhwɛso. Adesua abien pɛ na ɛho hia—nea wɔde kyekyere wo ho .mediane nea wɔde .media-bodytwa wo nsɛm no ho hyia. Wobetumi adi padding ne margin a wopɛ so denam spacing utilities so .

Placeholder 64x64
Nsɛm ho amanneɛbɔfo asɛmti

Wobɛyɛ saa ara ama me? Ɛyɛ bere a ɛsɛ sɛ wuhyia nnwom no Menyɛ wo muse bio. Te sɛ ɛyɛ fɛ, yɛ ɔtemmufo na me mmeawa no bɛfa abatow. Mitumi te phoenix bi nka wɔ me mu. Ɔsoro ani bere yɛn dɔ, abɔfo fi soro resu. Yeah, wode me kɔ 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: Wɔnfa inline elements no sɛ flex nneɛma

Internet Explorer 10-11 nkyerɛ inline elements te sɛ links anaa mfonini (anaasɛ ::beforene ::afterpseudo-elements) sɛ flex nneɛma. Dwumadie baako pɛ ne sɛ wobɛhyehyɛ displaybotaeɛ a ɛnyɛ inline (sɛ nhwɛsoɔ, block, inline-block, anaa flex). Yɛhyɛ nyansa sɛ fa .d-flex, yɛn display utilities no mu biako , di dwuma sɛ ano aduru a ɛnyɛ den.

Faako a wonyae: Flexbugs wɔ GitHub so

Nesting a wɔde yɛ buw

Media nneɛma betumi ayɛ nested a enni ano, ɛwom sɛ yɛhyɛ nyansa sɛ gyae wɔ bere bi mu de. Fa nested .media.media-bodyof a ɔwofo media ade no mu.

Placeholder 64x64
Nsɛm ho amanneɛbɔfo asɛmti

Gyina anim bere a ɔtopae no fi ase hwe ase no. Ɔsoro ani bere yɛn dɔ, abɔfo fi soro resu. Entumi mfa nkaa ɔpepem biako nsi w’ananmu. Boy, sɛ wo ne me wɔ hɔ a mɛma wo dɛ. Ɛnsɛ sɛ wosan kɔ akyi. Ansa na wobɛhyia me no na me ho ye nanso na nneɛma yɛ kinda heavy. Ti a ɛhyɛ abotiri no yɛ duru.

Placeholder 64x64
Nsɛm ho amanneɛbɔfo asɛmti

Nkyia adɔfo momma yɛntu kwan. Yiw, yɛma abɔfo su, na osu fi soro tɔ wɔ asase so. Ma wo biribi pa a wode bedi ho afahyɛ. Ná metaa keka me tɛkrɛma na mikura me home mu. Me ma nya wo koma racing wɔ me skin-tight jeans mu. Bere a me nkutoo retu kwan akɔ ɔbɔ soronko bi so no. Awɔw bere mu bere a yɛapɔn ntoaso sukuu bere a edi kan a yehyiae no. Woreyɛ hypnotizing araa ma, so wubetumi ayɛ ɔbonsam? So wubetumi ayɛ ɔbɔfo? Ɛyɛ bere a ɛsɛ sɛ yɛde balloon akɛse no ba. Misusuwii sɛ me na meyɛ soronko. Bikini, zucchini, Martinis, weenies biara nni hɔ.

<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>

Nneɛma a Wɔde Di Dwuma

Media a ɛwɔ media ade bi mu no betumi ne flexbox utilities ahyia akɔ wo nsɛm no atifi (default), mfinimfini, anaa awiei .media-body.

Placeholder 64x64
Nsɛm ho amanneɛbɔ a ɛwɔ soro

Mede no bɛto coma mu. Wode ntease ɔha ma, na woka sɛ wobɛbɔ mmɔden ankasa. Enti metenaa ase komm, na mepenee so wɔ nidi mu. Suiting up ma me abotiri ɔko no. Na wɔ m’awoda a ɛto so 18 no yɛyɛɛ tattoo ahorow a ɛne no hyia. Enti très chic, yeah, ɔyɛ classic. Masiesie me ho ama ɔkwan a wɔmfa so pii no.

Me nante wim (anadwo yi). Nanso ɛba fam. Woyɛ original, wontumi nsi ananmu. Nanso wɔ asetra foforo mu no anka mɛyɛ wo abeawa. Yɛde kar kɔɔ Cali na yɛbow nsa wɔ mpoano hɔ. Yebetumi asaw, kosi sɛ yebewu, me ne wo, bɛyɛ mmerante daa. Mehunuu wo downtown sɛ woreto Blues nnwom.

<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
Nsɛm ho amanneɛbɔ a ɛfa mfinimfini ho

Ɔbɛdan awɔw sɛ frigye. Wɔ eh-awieɛ no nyinaa. Ɔrebɔ me te sɛ ntɛtea na minyaa me nsensanee. Bikini, zucchini, Martinis, weenies biara nni hɔ. Mewɔ anidaso sɛ wunyaa aduan ho akɔnnɔ a ɛfata. Yebetumi asaw, kosi sɛ yebewu, me ne wo, bɛyɛ mmerante daa. Yɛrebɔ asetena no. Yɛreyɛ no yiye. Asɛm wɔ abɔnten so, woanya biribi a wode bɛkyerɛ me, me.

Wopɛ sɛ wohu ɔyɛkyerɛ no wɔ 3D mu, sini bi. Wɔse, suro sɛ wonyɛ sɛ afoforo no, daakye dɔfo. Bue wo koma mu. Enti metenaa ase komm, na mepenee so wɔ nidi mu. Fida a etwaam no anadwo. Yeah, wowɔ lucky sɛ wowɔ ne wimhyɛn mu a. Mebɛyɛ w'akyɛdeɛ, mɛma wo biribi pa a wode bedi ho afahyɛ.

<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
Nsɛm ho amanneɛbɔ a ɛwɔ ase hɔ

Bra, ma wo kɔla ahorow no mpaapae. Metumi ate hann yi a ɛwɔ me mu no nka. Anadwo nyinaa wɔrebɔ, wo dwom. Efi Tokyo kosi Mexico, kosi Rio. Ɛnsɛ sɛ wosan kɔ akyi. Nanso ɛba fam. Magical, kɔla, Owura Ahintasɛm, ee. DNA ahorow, wɔnte wo ase.

Nanso ɛba fam. Ɔwɔ saa, je ne sais quoi, wo nim. Mitumi hu nkyerɛwee a ɛwɔ ɔfasu no so no. Mmarimaa no bubu wɔn kɔn try'na sɛ wɔbɛwea kakra sneak peek. Fa me, ta-ta-fa me. Bue wo koma mu. Misusuwii sɛ me na meyɛ soronko. Boom, boom, boom. Venice mpoano ne Palm Springs, ahohuru bere yɛ biribiara. Fa beat no san bra. (Eyi ne sɛnea yɛyɛ)

<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>

Kra

Sesa nsɛm a ɛwɔ media nneɛma mu no nnidiso nnidiso denam HTML no ankasa a wobɛsakra no so, anaasɛ wode custom flexbox CSS bi bɛka ho de ahyɛ orderagyapade no (kɔ integer a wopɛ so).

Media ade a wɔde di dwuma

Minim sɛ afɔrebɔ bɛba nanso ɛno ne bo no. So wowɔ akokoduru a ɛbɛma mahu wo peacock no? Yɛ wo mmabun dae anadwo yi. Uh-huh, mehu wo. Ɛnsɛ sɛ wosan kɔ akyi. Yeah, yɛ maxed yɛn credit cards na wɔpam yɛn fii bar no mu. Enti ma memfa wo nhyɛ w’awoda atade no mu. Ebia w’ani begye ho bere a wuhyia no no. Na wiase no wɔ wo nsateaa mu. Mma kɛseyɛ no nnkɔ fam, oh, oh yeah. Afei yɛkasa nsoromma mu hwɛ, nya yɛn nnadewa yɛ, ne nyinaa Japanfo-y. Yɛ me wo Aphrodite.

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>

Nsɛm ho amanneɛbɔfo din

Esiane sɛ media ade no wɔ nhyehyɛe ahwehwɛde kakraa bi nti, wubetumi nso de saa adesua ahorow yi adi dwuma wɔ list HTML elements so. Wɔ wo <ul>anaa <ol>, fa ka ho na .list-unstyledyi browser default list styles biara, na afei fa di dwuma .mediawɔ wo <li>s no so. Sɛnea ɛte daa no, fa spacing utilities di dwuma wɔ baabiara a ɛho hia na ama woatumi ayɛ no yiye.

  • Placeholder 64x64
    Nsɛm ho amanneɛbɔ ade a egyina list so

    Me mmeawa nyinaa vintage Chanel baby. Enti wubetumi anya wo keeki no. Anadwo yi, anadwo yi, anadwo yi, menam wim. Nkakrankakra mene me suro no, yeah yeah. Onyin ntɛmntɛm ma ɛbɛyɛ anyinam. Enti ɔhyew ne duru, 'Til adekyee. Saa anansesɛm a ɛde ɔsraani bi a ɔhyɛ akode a ɛhyerɛn ba awiei no. Ti a ɛhyɛ abotiri no yɛ duru.

  • Placeholder 64x64
    Nsɛm ho amanneɛbɔ ade a egyina list so

    Ebia biribi nti a wɔato apon no nyinaa mu. Cause once wo yɛ me dea, once wo yɛ me dea. Yɛ wo mmabun dae anadwo yi. Ti a ɛhyɛ abotiri no yɛ duru. Ɛnyɛ dapɔnna mpo, biribiara nni hɔ a ɛsɛ sɛ wodi. Ahum a ɛyɛ pɛ, ahum a ɛyɛ pɛ.

  • Placeholder 64x64
    Nsɛm ho amanneɛbɔ ade a egyina list so

    So wowɔ akokoduru a ɛbɛma mahu wo peacock no? Ɛnsɛ sɛ wosan kɔ akyi. Eyi ne bere a etwa to a wobɛka, bere a woabubu nkyerɛwde a etwa to no akyi. Wɔ eh-awieɛ no nyinaa.

<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>