Wanti miidiyaa
Dokumantarii fi fakkeenyota wanta miidiyaa Bootstrap qaamolee baay'ee irra deddeebi'an kan akka yaada biloogii, tiwiitaraa fi kan kana fakkaatan ijaaruuf.
Fakkeenya
Wanti miidiyaa qaamolee walxaxaa fi irra deddeebi'an ijaaruuf gargaara bakka miidiyaaleen tokko tokko qabiyyee miidiyaa jedhame sanatti hin marfamne cinatti dhaabbatutti. Dabalataan, galata flexbox daree barbaachisu lama qofaan kana raawwata.
Armaan gaditti fakkeenya wanta miidiyaa tokkoo ti. Kutaa lama qofatu barbaachisa-marfamaafi .media
naannoo .media-body
qabiyyee keetii. Padding fi margin filannoo karaa spacing utilities to'achuun ni danda'ama .
Mata duree miidiyaa
Atis akkasuma naaf gootaa? Yeroon muuziqaa fuuldura dhaabbachuudha ani kana booda musee kee miti. Dhageesse bareedaadha, abbaa murtii ta'i shamarran koo sagalee fudhachuuf deemu. Keessa kootti feeniiksii natti dhaga'amuu danda'a. Samiin jaalala keenyatti hinaafti, ergamoonni gubbaadhaa boo'aa jiru. Eeyyee gara utoopiyaa na geessita.
<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: Qaamonni sarara keessaa akka wantoota flex hin ilaalaman
Internet Explorer 10-11 elementoota sarara keessaa kan akka hidhannoo ykn fakkiiwwan (ykn ::before
fi ::after
elementoota sobaa) akka wanta flex hin agarsiisu. Furmaanni display
gatii sarara keessaa hin taane saaguudha (fkn, block
, inline-block
, ykn flex
). We suggest using .d-flex
, one of our display utilities , akka sirreeffama salphaatti.
Maddi: Flexbugs GitHub irratti
Koonyaa gochuu
Wantoonni miidiyaa daangaa hin qabneen man'ee ta'uu danda'u, yeroo tokkotti akka dhaabbattu yaada kenninus. Wanta miidiyaa warraa .media
keessaa man'ee kaa'i ..media-body
Mata duree miidiyaa
Yeroo boombiin kufuu jalqabu sarara fuulduraa dhaabbachuu. Samiin jaalala keenyatti hinaafti, ergamoonni gubbaadhaa boo'aa jiru. Gingilchaa miliyoona tokkoon bakka buusuu hin danda'u. Gurbaa gaafa na waliin jirtu dhandhamaa siif kenna. Duubatti deebi'uun hin jiru. Osoo na hin qunnamin dura nagaa ture garuu wanti akkanatti ulfaataa ture. Mataa gonfoo uffatu ulfaataadha.
Mata duree miidiyaa
Nagaa nagaan jaallattan imala haa fudhannu. Eeyyee, ergamoota boochisna, gubbaadhaa lafa irratti rooba. Waan gaarii itti ayyaaneffattu siif kenni. Duraan arraba koo ciniinee hafuura baafadheen ture. Ani ma onnee kee jiinii koo gogaa-tight ta'een dha'uu argadhu. Yeroon kophaa koo gara dha'annaa adda ta'etti hiriiru. Ganna mana barumsaa sadarkaa lammaffaa booda yeroo jalqabaaf wal argine. Ati akkasitti nama hipnotizing taate, seexanaa ta'uu dandeessaa? Ergamaa taʼuu dandeessaa? Baaloon gurguddaa baasuun yeroon isaa amma. Ani waanan ala ta'e jedhee yaade. Bikinii, zukinii, Maartiinii, weenies hin qabu.
<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>
Hiriirsuu
Miidiyaan wanta miidiyaa keessa jiru faayilii flexbox waliin gara gubbaa (durtii), gidduu, ykn dhuma .media-body
qabiyyee keetii qindaa'uu danda'a.
Miidiyaalee sadarkaa olaanaa qaban
Ani komaa keessa ishee galchuuf deema. Maaliif akka ta'e sababa dhibba tokko kennitee, dhuguma yaaluuf jirta jetta. Kanaaf callisee taa'een, safuudhaan tole jedhe. Lola gonfoo kootiif mijachuu. Guyyaa dhaloota koo 18ffaa irrattis tattoo walsimsiisu arganne. Kanaaf très chic, eeyyee, isheen classic dha. Karaa xiqqoo imaluuf qophiidha.
Qilleensarra deemaa jira (halkan kana). Garuu lafa gadi bu'aa. Ati orijinaala dha, bakka buufamuu hin danda'u. Garuu jireenya biraa keessatti ani intala kee ta'a ture. Konkolaataa keenyaan gara Kaaliitti deemnee qarqara galaanaa irratti machaa'e. Shubbisuu dandeenya, hanga duunutti, aniifi ati, bara baraan dargaggeessa. Magaalaa keessaa sirba Blues sirbuu si arge.
<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>
Miidiyaa giddu galeessaan hiriire
Akka freezeritti qabbanaa'a. Dhuma eh-dhuma hunda irratti. Akka beeyladaatti ciniinuun sarara koo argadhe. Bikinii, zukinii, Maartiinii, weenies hin qabu. Fedhii nyaataa fayya qabeessa akka argattan abdiin qaba. Shubbisuu dandeenya, hanga duunutti, aniifi ati, bara baraan dargaggeessa. Jireenya jiraachaa jirra. Sirritti hojjechaa jirra. Jecha karaa irratti, ati waan natti agarsiisuuf argatte, ana.
Wanna show 3D, fiilmii keessatti arguu barbaadda. Akka warra kaanii miti sodaadhu jaalallee fuulduraa jedhu. Garaa kee bani. Kanaaf callisee taa'een, safuudhaan tole jedhe. Jimaata darbe halkan. Eeyyee yoo xiyyaara ishee keessa jirtu carraa qabda. Ani kennaa kee ta'a, waan gaarii akka kabajtu siif kenna.
<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>
Miidiyaalee gadiitti hiriiran
Kottu halluun kee haa dhoohu. Ifa keessa koo jiru kana natti dhaga'amuu danda'a. Halkan guutuu taphachaa jiru, sirba kee. Tookiyoo irraa hanga Meksikootti, gara Riyootti. Duubatti deebi'uun hin jiru. Garuu lafa gadi bu'aa. Sihrii, halluu, Obbo Iccitii, ee. DNA adda addaa, isaan si hin hubatan.
Garuu lafa gadi bu'aa. Isheen sana qabdi, je ne sais quoi, ati beekta. Barreeffama dallaa irratti barreeffame nan arga. Ijoolleen dhiiraa morma isaanii cabsuu try'na xiqqoo sneak peek creep. Na fudhadhu, ta-ta-na fudhadhu. Garaa kee bani. Ani waanan ala ta'e jedhee yaade. Boom, boom, boomii. Venice beach fi Palm Springs, yeroon gannaa waan hunda. Reebicha deebisaa fidaa. (Akkasitti hojjenna)
<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>
Ajajuu
Tartiiba qabiyyee wanta miidiyaa keessatti HTML ofii isaa fooyyessuudhaan jijjiiri, ykn qabeentaa saaguuf CSS flexbox amala tokko tokko dabaluudhaan order
(gara lakkoofsa guutuu filatteetti).
Wanti miidiyaa
Wareegamni akka jiru nan beeka garuu gatiin isaa kanuma. Ati ija jabinaan piikookii kee akkan argu naaf heyyamtee? Halkan kana abjuu dargaggummaa kee ta'i. Uh-huh, si arga. Duubatti deebi'uun hin jiru. Eeyyee, kaardii liqii keenya max goone mana dhugaatii keessaa ari'amne. Kanaafuu mee suutii guyyaa dhaloota keetiin siif haa fidu. Yeroo ishee waliin wal argitu jaalalaan qabamuu dandeessa. Addunyaa harka kee keessaa qaba ture. Guddinni si gadi hin buusiin yaa yaa eeyyee. Amma nuti haasa'uu astrology, argachuu mismaara keenya godhe, hunduu Jaappaan-y. Afrodite kee na godhi.
<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>
Tarree miidiyaa
Wanti miidiyaa barbaachisummaa caasaa baay'ee muraasa waan qabuuf, gitaalee kana qaamolee HTML tarree irrattis fayyadamuu dandeessa. <ul>
Yookiin kee irratti , akkaataa tarree durtii biraawzari kamiyyuu haquuf itti <ol>
dabali, kana booda s kee irratti hojii irra oolchi. Akkuma yeroo hundumaa, bakka barbaachisu hundatti faayidaa addaan fageenyaa fayyadamuun sirreessuu..list-unstyled
.media
<li>
-
Wanti miidiyaa tarree irratti hundaa'e
Shamarran koo hundi vintage Chanel baby. Kanaafuu keekii kee qabaachuu dandeessa. Halkan kana, halkan kana, halkan kana, qilleensarra deemaa jira. Suuta jedhee sodaa koo gadi liqimsaa, eeyyee eeyyee. Saffisaan guddachuu gara balaqqeessaatti. Akkas ho'aa fi ulfaataa, 'Til dawn. Oduu durii sun kan xumuramu farda meeshaa waraanaa calaqqisu uffatee. Mataa gonfoo uffatu ulfaataadha.
-
Wanti miidiyaa tarree irratti hundaa'e
Tarii sababa balballi hundi cufamuuf ta'uu danda'a. Sababni isaas al tokko kan koo taate, al tokko kan koo taate. Halkan kana abjuu dargaggummaa kee ta'i. Mataa gonfoo uffatu ulfaataadha. Ayyaana illee miti, waan itti kabajamu miti. Obomboleettii mudaa hin qabne, obomboleettii mudaa hin qabne.
-
Wanti miidiyaa tarree irratti hundaa'e
Ati ija jabinaan piikookii kee akkan argu naaf heyyamtee? Duubatti deebi'uun hin jiru. Kun yeroo dhumaaf jettu, sarara dhumaa booda cabsita. Dhuma eh-dhuma hunda irratti.
<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>