Ekintu ky’emikutu gy’amawulire
Ebiwandiiko n'ebyokulabirako ku Bootstrap's media object okuzimba ebitundu ebiddiŋŋana ennyo nga blog comments, tweets, n'ebirala ebiringa ebyo.
Eky'okulabirako
Ekintu ky’emikutu kiyamba okuzimba ebitundu ebizibu era ebiddiŋŋana nga emikutu egimu giteekeddwa ku mabbali g’ebirimu ebitazingira ku mikutu egyogeddwako. Plus, kino kikola ne class bbiri zokka ezeetaagisa okwebaza flexbox.
Wansi waliwo ekyokulabirako ky’ekintu kimu eky’emikutu. Ebika bibiri byokka bye byetaagibwa —okuzinga .media
n’okwetooloola .media-body
ebirimu byo. Optional padding ne margin bisobola okufugibwa okuyita mu spacing utilities .
Omutwe gw'emikutu gy'amawulire
Naawe onoonkolera ekintu kye kimu? Kye kiseera okwolekera omuziki siri muse wo. Wulira kinyuma, beera mulamuzi era bawala bange bagenda kutwala akalulu. Nsobola okuwulira ekiwuka ekiyitibwa phoenix munda mu nze. Eggulu likwatirwa okwagala kwaffe obuggya, bamalayika bakaaba okuva waggulu. Yee, ontwala mu 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: Ebintu ebiri mu layini tebikwatibwa nga ebintu ebikyukakyuka
Internet Explorer 10-11 tekola bintu ebiri mu layini nga enkolagana oba ebifaananyi (oba ::before
ne ::after
pseudo-elements) nga ebintu ebikyukakyuka. Ekizibu kyokka kwe kuteekawo omuwendo ogutali mu layini display
(okugeza, block
, inline-block
, oba flex
). Tukuwa amagezi okukozesa .d-flex
, ekimu ku bikozesebwa byaffe eby’okulaga , ng’okutereeza okwangu.
Ensibuko: Flexbugs ku GitHub
Okuzimba ebisu
Ebintu by'emikutu bisobola okuteekebwa mu kisu ekitaliiko kkomo, wadde nga tukuwa amagezi oyimirire mu kiseera ekimu. Teeka nested .media
munda mu .media-body
y'ekintu eky'emikutu gy'omuzadde.
Omutwe gw'emikutu gy'amawulire
Okuyimirira ku layini y’omu maaso nga bbomu zitandika okugwa. Eggulu likwatirwa okwagala kwaffe obuggya, bamalayika bakaaba okuva waggulu. Tesobola kukukyusa na mpeta obukadde. Mulenzi bw'onoobeera nange nja kukuwa obuwoomi. Tewali kudda mabega. Nga tonnasisinkana nali alright naye ebintu byali kinda heavy. Muzito gwe mutwe oguyambala engule.
Omutwe gw'emikutu gy'amawulire
Mbalamusize abaagalwa tukole olugendo. Yee, tukaaba bamalayika, nga batonnya ku nsi okuva waggulu. Muwe ekintu ekirungi ky’ogenda okujaguza. Naluma olulimi ne nkwata omukka. Nze ma funa omutima gwo nga gukuba mu jjiini yange enywezezza olususu. Nga bwe ntambula nzekka okutuuka ku beat ey’enjawulo. Summer nga tuvudde mu siniya nga twasooka okusisinkana. Oli hypnotizing nnyo, oyinza okuba sitaani? Oyinza okuba malayika? Kye kiseera okuleeta obupiira obunene. Yalowooza nti nze nali okujjako. Bikini, zucchini, Martinis, tewali 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>
Okukwatagana
Emikutu mu kintu ky'emikutu giyinza okukwatagana n'ebikozesebwa bya flexbox waggulu (ebisookerwako), wakati, oba ku nkomerero .media-body
y'ebirimu byo.
Emikutu gy’amawulire egy’oku ntikko
Ngenda kumuteeka mu kkoma. Owa ensonga kikumi lwaki, n'ogamba nti ddala ogenda kugezaako. Bwentyo nnatuula mu kasirise, ne nzikiriziganya mu ngeri ey’empisa. Okusaanira olutalo lwange olw’okutikkira engule. Era ku Birthday yange ey’emyaka 18 twafuna ttatu ezikwatagana. So très chic, yeah, ye muyimbi wa classic. Ndi mwetegefu ku luguudo olutambuzibwako nnyo.
Ntambulira ku mpewo (ekiro kino). Naye wansi ku nsi. Oli original, tosobola kukyusibwa. Naye mu bulamu obulala nandibadde muwala wo. Twavuga ne tugenda e Cali ne tutamiira ku bbiici. Tusobola okuzina, okutuusa lwe tunaafa, nze naawe, tujja kuba bato emirembe gyonna. Nakulabye downtown nga oyimba 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>
Emikutu gy’amawulire egy’okukwatagana wakati
Ajja kufuuka omunnyogovu nga firiiza. Ku eh-end ya byonna. Okuluma ng’enjuki nafuna emisono gyange. Bikini, zucchini, Martinis, tewali weenies. Nsuubira nti wafuna appetite ennungi. Tusobola okuzina, okutuusa lwe tunaafa, nze naawe, tujja kuba bato emirembe gyonna. Tuli mu bulamu. Tukikola bulungi. Ekigambo ku luguudo, ofunye somethin' okundaga, nze.
Wanna okulaba show mu 3D, firimu. Bagamba nti, tya tolinga balala, futuristic lover. Ggulawo omutima gwo. Bwentyo nnatuula mu kasirise, ne nzikiriziganya mu ngeri ey’empisa. Lwakutaano oluwedde ekiro. Yee, oli wa mukisa bwoba oli mu nnyonyi ye. Nja kuba kirabo kyo, nkuwe ekirungi okujaguza.
<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>
Emikutu gy’amawulire egy’okulaga wansi
Jjangu, langi zo zituke. Nsobola okuwulira ekitangaala kino ekiri munda mu nze. Ekiro kyonna bakuba, oluyimba lwo. Okuva e Tokyo okutuuka e Mexico, okutuuka e Rio. Tewali kudda mabega. Naye wansi ku nsi. Obulogo, langi, Mwami Ekyama, ee. DNA ezenjawulo, tebakutegeera.
Naye wansi ku nsi. Ekyo alina, je ne sais quoi, okimanyi. Nze ndaba ekiwandiiko ku bbugwe. Abalenzi bamenya ensingo try'na okwekulukuunya akatono sneak peek. Ntwala, ta-ta-ntwala. Ggulawo omutima gwo. Yalowooza nti nze nali okujjako. Boom, boom, boom. Venice beach ne Palm Springs, obudde obw’obutiti buli kimu. Muzzeeyo ekikuba. (Eno y’engeri gye tukola)
<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>
Okulagira
Kyusa ensengeka y'ebirimu mu bintu by'emikutu ng'okyusa HTML yennyini, oba ng'oyongerako CSS ezimu eza custom flexbox okuteekawo order
eky'obugagga (ku namba enzijuvu gy'olonze).
Ekintu ky’emikutu gy’amawulire
Nkimanyi nti wajja kubaawo okwefiiriza naye ogwo gwe muwendo. Oli muvumu okunzikiriza okulaba enkookooma yo? Beera ekirooto kyo eky'obutiini ekiro kino. Uh-huh, nkulaba. Tewali kudda mabega. Yeah, twa maxed credit cards zaffe netugobwa mu bbaala. Kale ka nkufunire mu ssuuti yo ey’amazaalibwa. Oyinza okugwa mu mukwano ng’omusisinkanye. Yalina ensi mu ngalo zo. Tokkiriza bukulu kukussa wansi, oh, oh yeah. Kati ffe nga twogera astrology, okufuna emisumaali gyaffe gyakola, byonna Japanese-y. Nfuule Aphrodite wo.
<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>
Olukalala lw'emikutu gy'amawulire
Olw’okuba ekintu ky’emikutu kirina ebyetaago by’enzimba ebitono ennyo, osobola n’okukozesa ebika bino ku bintu bya HTML eby’olukalala. Ku <ul>
oba yo <ol>
, yongera ku .list-unstyled
okuggyawo sitayiro zonna ez'olukalala lwa browser ezisookerwako, n'oluvannyuma okozese ku s .media
yo . <li>
Nga bulijjo, kozesa ebikozesebwa mu kugabanya ebanga wonna we kyetaagisa okulongoosa obulungi.
-
Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
Abawala bange bonna vintage Chanel mwana. Kale osobola okuba ne keeki yo. Ekiro kya leero, ekiro kino, ekiro kino, ntambula ku mpewo. Mpola mpola okumira wansi okutya kwange, yeah yeah. Okukula amangu okufuuka ekiwujjo ky’okumyansa. Bwatyo ebbugumu era nzito, 'Til dawn. Enfumo eyo ekoma ku knight mu byambalo ebimasamasa. Muzito gwe mutwe oguyambala engule.
-
Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
Mpozzi ensonga lwaki enzigi zonna ziggaddwa. Kubanga olumala okuba wange, omulundi gumu oba wange. Beera ekirooto kyo eky'obutiini ekiro kino. Muzito gwe mutwe oguyambala engule. Si wadde nnaku enkulu, tewali kyakujaguza. Omuyaga ogutuukiridde, omuyaga ogutuukiridde.
-
Ekintu ky’emikutu ekyesigamiziddwa ku lukalala
Oli muvumu okunzikiriza okulaba enkookooma yo? Tewali kudda mabega. Guno gwe mulundi ogusembayo okugamba, oluvannyuma lw’olunyiriri olusembayo okumenya. Ku eh-end ya byonna.
<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>