Nyadzɔdzɔgblɔmɔnuwo ƒe nu
Nuŋlɔɖi kple kpɔɖeŋuwo na Bootstrap ƒe media nu be woatu akpa siwo gbugbɔna gblɔna ŋutɔ abe blog nyawo, tweets, kple esiawo tɔgbe ene.
Kpɔɖeŋu
Nyadzɔdzɔgblɔmɔ̃ ƒe nu la kpena ɖe akpa siwo gɔme sese sesẽ eye wogbugbɔa nu ŋu la tutu ŋu afisi woɖoa nyadzɔdzɔgblɔmɔ̃ aɖewo ɖe nyatakaka siwo mexatsa ɖe nyadzɔdzɔgblɔmɔ̃ si wogblɔ ŋu o la xa. Gakpe ɖe eŋu la, ewɔa esia kple klass eve siwo wobia ko le akpedada na flexbox.
Media nu ɖeka ƒe kpɔɖeŋu le ete. Klass eve koe wobia tso asiwò—wò nyawo babla .media
kple esiwo .media-body
ƒo xlã wò nyawo. Woate ŋu akpɔ padding kple margin si woate ŋu atia dzi to dometsotso ƒe dɔwɔnuwo dzi .
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Ðe nàwɔ nenema ke nam? Ɣeyiɣia de be nàdze ŋgɔ hadzidzi si nyemeganye wò muse o. Se be enya kpɔ, nye ʋɔnudrɔ̃la eye nye nyɔnuviwo axɔ akɔdada. Mete ŋu sea phoenix aɖe le menye. Dziƒo ʋã ŋu míaƒe lɔlɔ̃, mawudɔlawo le avi fam tso dziƒo. Ẽ, èkplɔm yi 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: Womebua nusiwo le fli me abe nusiwo le fli me ene o
Internet Explorer 10-11 meɖea nusiwo le fli me abe kadodowo alo nɔnɔmetatawo (alo ::before
kple ::after
aʋatso-nuawo) fiana abe nusiwo le fli me ene o. Dɔwɔwɔ ɖeka koe nye be nàɖo display
asixɔxɔ si mele fli me o (le kpɔɖeŋu me, block
, inline-block
, alo flex
). Míeɖo aɖaŋu be nàzã .d-flex
, míaƒe ɖeɖefia dɔwɔnuwo dometɔ ɖeka , abe ɖɔɖɔɖo bɔbɔe ene.
Dzɔtsoƒe: Flexbugs le GitHub dzi
Atɔwɔwɔ
Media nuwo ateŋu anye nested seɖoƒemanɔmee, togbɔ be míeɖo aɖaŋu be nàdzudzɔ le ɣeyiɣi aɖe me hã. De nested .media
ɖe .media-body
dzila media nu ƒe me.
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Tsitretsitsi ɖe ŋgɔgbe fli dzi ne bɔmbawo dze gege gɔme. Dziƒo ʋã ŋu míaƒe lɔlɔ̃, mawudɔlawo le avi fam tso dziƒo. Mate ŋu atsɔ asigɛ miliɔn ɖeka aɖɔli wò o. Ŋutsuvi, ne èle gbɔnye la, mana wò vivi aɖe. Trɔ yi megbe meli o. Hafi nàdo gom la, menɔ nyuie gake nuwo nɔ kpekpem vie. Ta si doa fiakukua la kpekpe.
Nyadzɔdzɔgblɔmɔnuwo ƒe tanya
Gbedoname lɔlɔ̃tɔwo mina míazɔ mɔ aɖe. Ẽ, míenaa mawudɔlawo doa ɣli, eye tsi dzana ɖe anyigba dzi tso dziƒo. Na nu nyui aɖe wò nàɖu. Tsã la, meɖua nye aɖe heléa nye gbɔgbɔ. Me le ma xɔ wò dzi ʋuʋu le nye ŋutigbalẽ-tight jeans. Esi nye ɖeka mazɔ ayi ƒoƒo bubu aɖe dzi. Dzomeŋɔli le sekɛndrisuku megbe esime míedo go zi gbãtɔ. Èle gbɔgbɔm ale gbegbe, ɖe nàte ŋu anye abosama? Ðe nàte ŋu anye mawudɔla? Ɣeyiɣia de be woaɖe ʋuƒo gãawo ado goe. Esusu be nyee nye amesi to vovo. Bikini, zucchini, Martini, weenies aɖeke meli o.
<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>
Ðoɖowɔwɔ ɖe ɖoɖo nu
Woateŋu awɔ media le media object me ɖe ɖoɖo nu kple flexbox utilities ɖe wò .media-body
nyatakakawo ƒe tame (default), titina, alo nuwuwu.
Nyadzɔdzɔgblɔmɔ̃ siwo woɖo ɖe ɖoɖo nu le etame
Mele etsɔm de kɔma me. Ègblɔ susu alafa ɖeka siwo tae, eye nègblɔ be yeate kpɔ ŋutɔŋutɔ. Eyata menɔ anyi kpoo, melɔ̃ ɖe edzi bubutɔe. Suiting up na nye fiakuku ƒe aʋa la. Eye le nye Dzigbezã 18 lia dzi la, míewɔ tattoo siwo sɔ kple wo nɔewo. Eyata très chic, ẽ, enye classic. Mele klalo na mɔ si dzi womezɔna fũu o.
Mele zɔzɔm le yame (le zã sia me). Gake anyigba dzi. Wòe nye gbãtɔ, womate ŋu aɖɔlii o. Gake le agbe bubu me la, manye wò nyɔnuvi. Míeku ʋu yi Cali eye míemu aha le ƒuta. Míate ŋu aɖu ɣe, vaseɖe esime míaku, mía kple wò, míanye sɔhɛ tegbee. Mekpɔ wò le dua ƒe titina nènɔ Blues ha dzim.
<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>
Nyadzɔdzɔgblɔmɔ̃ siwo woɖo ɖe titina
Atrɔ azu vuvɔ abe nufamɔ̃ ene. Le eh-nuwuwu na wo katã. Esi wònɔ ƒoƒom abe anyi ene la, mekpɔ nye fliwo. Bikini, zucchini, Martini, weenies aɖeke meli o. Mele mɔ kpɔm be nuɖuɖu ƒe dzodzro si le lãmesẽ me va su asiwò. Míate ŋu aɖu ɣe, vaseɖe esime míaku, mía kple wò, míanye sɔhɛ tegbee. Míele agbea nɔm. Míele ewɔm nyuie. Nya le ablɔdzi, èxɔ somethin 'ɖem, nye.
Di be yeakpɔ wɔnaa le 3D me, si nye sinima. Wogblɔna be, vɔvɔ̃ be yemele abe ame mamlɛawo ene o, etsɔme lɔlɔ̃tɔ. Ʋu wò dzi. Eyata menɔ anyi kpoo, melɔ̃ ɖe edzi bubutɔe. Dzoɖa si va yi ƒe zã me. Ẽ, dzɔgbenyuie le ŋuwò ne èle eƒe yameʋu me. Manye wò nunana, mana nu nyui aɖe wò be nàɖu azã.
<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>
Nyadzɔdzɔgblɔmɔ̃ siwo woɖo ɖe ɖoɖo nu le ete
Va, na wò amadedewo nagbã. Mete ŋu se kekeli sia si le menye la gɔme. Zã bliboa katã wole ƒoƒom, wò hadzidzi. Tso Tokyo yi Mexico, yi Rio. Trɔ yi megbe meli o. Gake anyigba dzi. Akunyawɔla, amadede, Aƒetɔ Nya ɣaɣla, ee. DNA vovovowo, womesea nu gɔme na wò o.
Gake anyigba dzi. Eyae nye ema, je ne sais quoi, mienyae. Mete ŋu kpɔa nuŋɔŋlɔ si le gli ŋu. Ŋutsuviawo gbãa woƒe kɔwo try'na be creep vi aɖe sneak peek. Kplɔm, ta-ta-xɔm. Ʋu wò dzi. Esusu be nyee nye amesi to vovo. Boom, boom, boom. Venice ƒuta kple Palm Springs, dzomeŋɔli nye nusianu. Tsɔ ƒoƒoa ɖe megbe. (Ale si míewɔnae nye esi)
<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>
Gbeɖeɖe
Trɔ ɖoɖo si nu nyawo le le media nuwo me to asitɔtrɔ le HTML ŋutɔ ŋu me, alo to flexbox CSS tɔxɛ aɖewo tsɔtsɔ kpee me be nàɖo nɔnɔmea order
(na xexlẽdzesi blibo si nèdi).
Nyadzɔdzɔgblɔmɔnuwo ƒe nu
Menya be vɔsa anɔ anyi gake emae nye fetu. Ðe dzi le ƒowò ale gbegbe be nàna makpɔ wò akpakpaa? Nye wò ƒewuiwo ƒe drɔ̃e le zã sia me. Uh-huh, mekpɔ wò. Trɔ yi megbe meli o. Ẽ, míewɔ míaƒe gaxɔgbalẽviwo max eye wonya mí le ahadzraƒea. Eyata na matsɔ wò dzigbezãwu la ade wò dzigbezãwu me. Ðewohĩ àva lɔ̃ wò ŋutɔ ne èdo go eyama. Na xexeame nɔ wò asibidɛwo me. Mègana gãnyenye naɖiɖi wò o, oh, oh yeah. Fifia míeƒo nu tso ɣletivimefakaka ŋu, míaƒe ɖawo wɔwɔ, wo katã Japantɔwo-y. Wɔm wò 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>
Nyadzɔdzɔgblɔmɔnuwo ƒe xexlẽdzesiwo
Esi wònye be media object la ƒe xɔtuɖoɖo ƒe nudidi ʋɛ aɖewo koe li ta la, àteŋu azã klass siawo hã le list HTML elements dzi. Le wò <ul>
alo <ol>
, tsɔ kpe ɖe eŋu .list-unstyled
be nàɖe web-browser ƒe xexlẽdzesiwo ƒe atsyã ɖesiaɖe ɖa, eye emegbe nàwɔ dɔ .media
ɖe wò <li>
s dzi. Abe alesi wònɔna ɖaa ene la, zã dometsotso ƒe dɔwɔnuwo le afisiafi si wòahiã le be nàtrɔ asi le eŋu nyuie.
-
Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
Nye nyɔnuviwo katã vintage Chanel vidzĩ. Eyata àte ŋu akpɔ wò kekea. Fiẽ sia, zã sia, zã sia, mele zɔzɔm le yame. Vivivi le nye vɔvɔ̃a mimim, yeah yeah. Tsitsi kabakaba zu dzikedzo ƒe ʋuʋudedi. Ale gbegbe dzoxɔxɔ kple kpekpeme, 'Til ŋdi. Gli ma si wu enu kple sɔdola aɖe si do aʋawɔnu siwo le keklẽm. Ta si doa fiakukua la kpekpe.
-
Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
Ðewohĩ susu aɖe si ta wotu ʋɔtruawo katã ɖo. Cause ne ènye tɔnye ko la, ne ènye tɔnye ko. Nye wò ƒewuiwo ƒe drɔ̃e le zã sia me. Ta si doa fiakukua la kpekpe. Menye ŋkekenyui gɔ̃ hãe wònye o, naneke meli woaɖu o. Ahom deblibo, ahom deblibo.
-
Nyatakakadzraɖoƒe ƒe nusi wotu ɖe xexlẽdzesiwo dzi
Ðe dzi le ƒowò ale gbegbe be nàna makpɔ wò akpakpaa? Trɔ yi megbe meli o. Esiae nye zi mamlɛtɔ si nègblɔ, le fli mamlɛtɔ si nègbã megbe. Le eh-nuwuwu na wo katã.
<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>