Media fɛn
Sɛbɛnw ni misaliw Bootstrap ka kunnafonidilan fɛn na walasa ka yɔrɔw jɔ minnu bɛ segin-ka-bɔ kosɛbɛ i n’a fɔ bulɔgu kumaw, tweetw, ani o ɲɔgɔnnaw.
Misaliya
Kunnafoni -falen -falenfɛn bɛ dɛmɛ ka yɔrɔw jɔ minnu ka gɛlɛn ani minnu bɛ segin-ka-bɔ, kunnafonidilan dɔw bɛ jɔ yɔrɔ minnu na kunnafonidi-minɛnw kɛrɛfɛ minnu tɛ kunnafoni-falen-falen kofɔlenw lamini. Ka fara o kan, a b’o Kɛ ni kalan wajibiyalen fla dɔrɔn ye k’a sababu Kɛ flexbox ye.
Kunnafoni-falen-falen-fɛn kelen misali dɔ bɛ duguma. Kalanso fila dɔrɔn de wajibiyalen don— i ka kɔnɔkow dacogo .mediaani u lamini. .media-bodypadding ni margin optionnel bɛ se ka kunbɛn ni spacing utilities ye .
Kunnafonidila kuncɛ
Yala aw fana bɛna o ɲɔgɔn kɛ ne ye wa? A waati sera ka ɲɛsin dɔnkili ma n tɛ i ka muse ye tugun. A mɛnna a cɛ ka ɲi, ka kɛ kiritigɛla ye ani n ka npogotigininw bɛna wote ta. N bɛ se ka fenikisi dɔ ye n kɔnɔ. Sankolo bɛ keleya an ka kanuya la, mɛlɛkɛw bɛ ka kasi ka bɔ san fɛ. Ɔwɔ, i bɛ taa ni n ye utopie la.
<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: Inline fɛnw tɛ jate i n’a fɔ flex fɛnw
Internet Explorer 10-11 tɛ fɛnw jira minnu bɛ ɛntɛrinɛti kɔnɔ i n’a fɔ jɛgɛnsira walima jaw (walima ::beforeani ::afterfɛn nkalonmaw) i n’a fɔ fɛn minnu bɛ fɛnw wuli. Baarakɛcogo kelen min bɛ yen, o ye ka nafa dɔ sigi sen kan min tɛ ɛntɛrinɛti kɔnɔ display(misali la, block, inline-block, walima flex). An bɛ ladilikan di ka baara kɛ ni .d-flex, an ka jiralan nafama dɔ ye , i n’a fɔ ɲɛnabɔli nɔgɔman.
Nesting (kɔnɔnafili).
Media fɛnw bɛ se ka dan tɛ minnu na, hali n’an b’a ɲini i fɛ i ka jɔ waati dɔ la. A yɔrɔ nested .mediakɔnɔna na .media-bodyof a parent media object.
Kunnafonidila kuncɛ
Ka jɔ ɲɛfɛla la ni bɔnbuw bɛ daminɛ ka bin. Sankolo bɛ keleya an ka kanuya la, mɛlɛkɛw bɛ ka kasi ka bɔ san fɛ. Se tɛ se ka i bila i nɔ na ni bololanɛgɛ miliyɔn kelen ye. Cɛdennin, n'i bɛ ne fɛ n bɛ dɔ di i ma. Segin-ka-bɔnye tɛ yen. Sani i ka n kunbɛn n tun bɛ alright nka kow tun bɛ kinda heavy. Kunkolo min bɛ masafugulan don, o ka gɛlɛn.
Kunnafonidila kuncɛ
Foli bɛ kanubagaw ye an ka taama dɔ kɛ. Ɔwɔ, an bɛ mɛlɛkɛw kasi, sanji bɛ na dugukolo kan ka bɔ san fɛ. Fɛn ɲuman dɔ di i ma i ka seli kɛ. N tun bɛ n nɛnkun kin ka n ninakili minɛ. I'm ma get i dusukun bn n ka fari-tight jeans la. Ni n bɛ taama n kelen na ka taa fɔlikan wɛrɛ la. Samiya lise kɔfɛ tuma min na an ye ɲɔgɔn sɔrɔ fɔlɔ. I bɛ hypnotiser kosɛbɛ, yala i bɛ se ka kɛ jinɛ ye wa? Yala i bɛ se ka kɛ mɛlɛkɛ ye wa? Waati sera ka balon belebelebaw bɔ kɛnɛ kan. A tun b’a miiri ko ne de ye o danfara ye. Bikiniw, zukiniw, Martiniw, ni weenies tɛ.
<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>Alignment (labɛnni).
Media min bɛ media fɛn dɔ kɔnɔ, o bɛ se ka bɛn ni flexbox nafalanw ye ka taa sanfɛ (default), cɛmancɛ la, walima i ka .media-bodykɔnɔkow laban na.
Kunnafoni-di-sira minnu bɛ sanfɛ-labɛn
N b'a bila coma la. I bɛ dalilu kɛmɛ di mun na, i b’a fɔ ko i bɛna a ɲini tiɲɛ na. O la sa, ne sigilen tun bɛ ni dususuma ye, ka sɔn a ma ni bonya ye. Suiting up for ne ka masafugulan kɛlɛ. Ani n ka san 18nan na an ye tatuwatiw sɔrɔ minnu bɛ bɛn ɲɔgɔn ma. So très chic, yeah, a ye klasiki ye. N labɛnnen don sira kan min tɛ taa kosɛbɛ.
N bɛ taama fiɲɛ kan (bi su in na). Nka ka jigin dugukolo kan. I ye original ye, i tɛ se ka fɛn wɛrɛ bila a nɔ na. Nka ɲɛnamaya wɛrɛ la ne tun na kɛ i ka sunguru ye. An ye mobili ta ka taa Cali ani an ye dɔlɔ min kɔgɔjida la. An bɛ se ka dɔn kɛ, fo an ka sa, ne ni e, an bɛna kɛ denmisɛnw ye badaa-badaa. A ye i ye dugu cɛmancɛ la ka Blues dɔnkili da.
<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>Kunnafonidila minnu bɛ tali kɛ santiri la
A bɛna nɛnɛ kɛ i n’a fɔ konfirɛzi. A laban na eh-a bɛɛ la. Stinging like a bee n ye n ka sɛrɛw sɔrɔ. Bikiniw, zukiniw, Martiniw, ni weenies tɛ. N jigi b’a kan ko aw ye dumuni nege ɲuman sɔrɔ. An bɛ se ka dɔn kɛ, fo an ka sa, ne ni e, an bɛna kɛ denmisɛnw ye badaa-badaa. An bɛ ka ɲɛnamaya kɛ. An b'a kɛ ka ɲɛ. Kuma sira kan, i ye somethin' sɔrɔ ka jira ne la, ne.
Wanna ye show in 3D la, filimu dɔ. U ko, siran i tɛ i n'a fɔ tɔw, futuriste kanubaganci. I dusukun da wuli. O la sa, ne sigilen tun bɛ ni dususuma ye, ka sɔn a ma ni bonya ye. Jumadon tɛmɛnen su fɛ. Ɔwɔ, i ye chance sɔrɔ n'i bɛ a ka awiyɔn kɔnɔ. Ne na kɛ i ka nilifɛn ye, ka fɛn ɲuman di i ma ka seli kɛ.
<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>Kunnafoni-di-sira minnu bɛ duguma-labɛn
Na, a to i ka kulɛriw ka pɛrɛn. Ne bɛ se ka nin yeelen in ye min bɛ ne kɔnɔ. Su bɛɛ u bɛ tulon kɛ, i ka dɔnkili. Ka bɔ Tokiyɔ ka taa Mɛkisiki, ka taa Rio. Segin-ka-bɔnye tɛ yen. Nka ka jigin dugukolo kan. Majigi, kulɛrilen, Mr Mystery, ee. ADN danfaralenw, u tɛ i faamu.
Nka ka jigin dugukolo kan. A ye o sɔrɔ, je ne sais quoi, i b'a dɔn. N bɛ se ka sɛbɛnni ye kogo kan. Cɛdenw bɛ u kɔw kari try'na ka creep dɔɔnin sneak peek. Taa ne ta, ta-ta-ta-ne ta. I dusukun da wuli. A tun b’a miiri ko ne de ye o danfara ye. Boom, boom, boom. Venise kɔgɔjida la ani Palm Springs, samiyɛ waati ye fɛn bɛɛ ye. Aw bɛ na ni bugɔli ye ka segin. (An bɛ nin cogo de la)
<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>Ci
Yɛlɛma don kɔnɔkow sigicogo la kunnafonidilanw kɔnɔ ni HTML yɛrɛ ladilanni ye, walima ni flexbox CSS ladamu dɔw farali ye walasa ka ordernafolomafɛnw sigi (ka kɛ jateden dafalen ye i b’a fɛ ka min sugandi).
Media fɛn
N b'a dɔn ko saraka bɛna kɛ nka o de ye sɔngɔ ye. Yala i ja gɛlɛyara ka a to ne ka i ka paon ye wa? I ka kɛ i ka kamalenninya sugo ye bi su in na. Uh-huh, n b'i ye. Segin-ka-bɔnye tɛ yen. Ɔwɔ, an ye an ka kartiw max ani ka gɛn ka bɔ bar la. O la, a to n ka i don i ka wolodon fini na. I bɛ se ka kanuya don i la ni i ye a kunbɛn. A tun bɛ diɲɛ sɔrɔ i bolokɔniw na. Kana a to bonya ka i jigin, oh, oh yeah. Sisan an bɛ kuma dolow lajɛ, ka an ka wuluw kɛ, bɛɛ Japon-y. Aw ye ne kɛ aw ka Afrodite ye.
<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>Kunnafonidila lisi
Komin media fɛn in ka jɔcogo wajibiyalenw ka dɔgɔ kosɛbɛ, i bɛ Se fana ka baara Kɛ ni nin kalasi ninnu ye list HTML elements kan. I ka <ul>walima <ol>, i ka fara a kan .list-unstyledwalasa ka browser default list styles bɛɛ bɔ yen, o kɔ i ka baara .mediakɛ i ka <li>s kan. I n’a fɔ a bɛ kɛ cogo min na tuma bɛɛ, aw bɛ baara kɛ ni yɔrɔjanfɛnw ye yɔrɔ o yɔrɔ aw mago bɛ yɔrɔ min na walasa ka u labɛn ka ɲɛ.
-
Lisiti-based media fɛn
N ka npogotigiw bɛɛ vintage Chanel bébé. O la, aw bɛ se ka aw ka gato sɔrɔ. Bi su in na, bi su in na, bi su in na, n bɛ taama fiɲɛ kan. Nɛmɛnɛmɛ ka n ka siran kunu, yeah yeah. Ka bonya joona ka kɛ sanpɛrɛn ye. O la, a ka suma ani a ka gɛlɛn, ‘Til dawn. O nsiirin min bɛ laban ni kɛlɛcɛ dɔ ye min bɛ ni kɛlɛkɛminɛnw ye minnu bɛ yeelen bɔ. Kunkolo min bɛ masafugulan don, o ka gɛlɛn.
-
Lisiti-based media fɛn
Laala sababu dɔ don min b’a to da bɛɛ bɛ datugu. Cause siɲɛ kelen i ye ne ta ye, siɲɛ kelen i ye ne ta ye. I ka kɛ i ka kamalenninya sugo ye bi su in na. Kunkolo min bɛ masafugulan don, o ka gɛlɛn. Hali seli tɛ, foyi tɛ seli la. Fɔɲɔba dafalen, fɔɲɔba dafalen.
-
Lisiti-based media fɛn
Yala i ja gɛlɛyara ka a to ne ka i ka paon ye wa? Segin-ka-bɔnye tɛ yen. Nin ye siɲɛ laban ye i b’a fɔ, zana laban kɔfɛ i bɛ kari. A laban na eh-a bɛɛ la.
<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>