Into yemidiya
Amadokhumenti nezibonelo zento yemidiya ye-Bootstrap yokwakha izingxenye eziphindaphinda kakhulu njengamazwana ebhulogi, ama-tweets, nokunye okunjalo.
Isibonelo
Into yemidiya isiza ukwakha izingxenye eziyinkimbinkimbi neziphindaphindayo lapho enye imidiya ibekwe eceleni kokuqukethwe okungahlanganisi imidiya eshiwo. Futhi, ikwenza lokhu ngamakilasi amabili kuphela adingekayo ngenxa ye-flexbox.
Ngezansi kunesibonelo sento eyodwa yemidiya. Kudingeka amakilasi amabili kuphela—ukusonga .media
nokuzungeza .media-body
okuqukethwe kwakho. I-padding ongayikhetha kanye nemajini ingalawulwa ngezinsiza zokuhlukanisa izikhala .
Isihloko semidiya
Ungenzela okufanayo na? Sekuyisikhathi sokubhekana nomculo angiseyona inyuziyamu yakho. Uzwile ukuthi kuhle, yiba yijaji futhi amantombazane ami azovota. Ngizwa i-phoenix ngaphakathi kimi. Izulu linomona ngothando lwethu, izingelosi ziyakhala phezulu. Yebo, ungiyisa e-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>
I-Flexbug #12: Izinto ezingaphakathi komugqa aziphathwa njengezinto eziguqukayo
I-Internet Explorer 10-11 ayinikezi izinto ezisemgqeni njengezixhumanisi noma izithombe (noma ::before
nezinto ::after
-mbumbulu) njengezinto eziguqukayo. Okuwukuphela kwendlela yokusebenza ukusetha inani elingelona emgqeni display
(isb, block
, , inline-block
, noma flex
). Siphakamisa ukusebenzisa .d-flex
, enye yezinsiza zethu zokubonisa , njengendlela yokulungisa kalula.
Umthombo: I-Flexbugs ku-GitHub
Ukwenza isidleke
Izinto zemidiya zingakhelwa ngokungenamkhawulo, noma siphakamisa ukuthi ume ngesikhathi esithile. Indawo ibekwe .media
ngaphakathi .media-body
kwento yemidiya engumzali.
Isihloko semidiya
Ukuma kumugqa ongaphambili lapho amabhomu eqala ukuwa. Izulu linomona ngothando lwethu, izingelosi ziyakhala phezulu. Awukwazi ukukufaka esikhundleni sakho ngendandatho eyisigidi. Mfana, uma unami ngizokunambitha. Akusekho ukubuyela emuva. Ngaphambi kokuthi uhlangane nami bengilungile kodwa izinto bezinzima. Lisinda ikhanda elithwele umqhele.
Isihloko semidiya
Sanibonani zithandwa asithathe uhambo. Yebo, sikhalisa izingelosi, izulu line emhlabeni livela phezulu. Ikunikeze okuthile okuhle ongakubungaza. Ngangiziluma ulimi ngibambe umoya. Ngithole inhliziyo yakho igijima ku-jean yami eqinisa isikhumba. Njengoba ngimasha ngedwa ngiye kwesinye isigqi esihlukile. Ihlobo ngemva kwesikole samabanga aphezulu lapho siqala ukuhlangana. Uyalutha kakhulu, ungaba usathane? Ungaba ingelosi? Sekuyisikhathi sokukhipha amabhaluni amakhulu. Ngangicabanga ukuthi ngangihlukile. Bikinis, zucchinis, Martinis, akukho 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>
Ukuqondanisa
Imidiya entweni yemidiya ingaqondaniswa nezinsiza ze-flexbox phezulu (okuzenzakalelayo), phakathi, noma ekugcineni .media-body
kokuqukethwe kwakho.
Imidiya eqondaniswe phezulu
Ngizomfaka kwi-coma. Unikeza izizathu eziyikhulu zokuthi kungani, futhi uthi uzozama ngempela. Ngakho ngahlala ngithule, ngavuma ngesizotha. Ukulungela impi yami yomqhele. Futhi ngosuku lwami lokuzalwa lwesi-18 sathola ama-tattoos afanayo. Ngakho-ke u-très chic, yebo, ungumfundi wakudala. Ngiwulungele umgwaqo ongahanjwa kancane.
Ngihamba emoyeni (namuhla ebusuku). Kodwa phansi emhlabeni. Ungowangempela, awukwazi ukushintshwa. Kodwa kwenye impilo ngizoba intombazane yakho. Sahamba saya eCali sadakwa olwandle. Singadansa, size sife, mina nawe sizoba sisha kuze kube phakade. Ngakubona edolobheni ucula iBlues.
<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>
Imidiya eqondaniswe namaphakathi
Uzobanda njengesiqandisi. Ekugcineni kwakho konke. Ukuluma njengenyosi ngithole imivimbo. Bikinis, zucchinis, Martinis, akukho weenies. Ngethemba ukuthi uthole ukudla okunempilo. Singadansa, size sife, mina nawe sizoba sisha kuze kube phakade. Siphila impilo. Senza kahle. Izwi emgwaqeni, unokuthile ongangibonisa kona, mina.
Ufuna ukubona umbukiso nge-3D, imuvi. Bathi, yesaba ukuthi awufani nabanye, isithandwa esizayo. Vula inhliziyo yakho. Ngakho ngahlala ngithule, ngavuma ngesizotha. Ebusuku ngolwesihlanu odlule. Yebo, unenhlanhla uma usendizeni yakhe. Ngizoba yisipho sakho, ngikunike into enhle ozoyibungaza.
<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>
Imidiya eqondaniswe ngezansi
Wozani, vumela imibala yakho iqhume. Ngiyakuzwa lokhu kukhanya okungaphakathi kimi. Ubusuku bonke bayadlala, ingoma yakho. Ukusuka eTokyo kuya eMexico, kuya eRio. Akusekho ukubuyela emuva. Kodwa phansi emhlabeni. Umlingo, unemibalabala, uMnu. Mystery, ee. I-DNA ehlukile, ayikuqondi.
Kodwa phansi emhlabeni. Unakho lokho, je ne sais quoi, uyakwazi. Ngiyawubona umbhalo odongeni. Abafana bahlephula izintamo zabo bazama ukunyonyoba kancane. Ngithathe, ta-ta-ngithathe. Vula inhliziyo yakho. Ngangicabanga ukuthi ngangihlukile. Bhum, bhomu, bhomu. I-Venice beach kanye nePalm Springs, isikhathi sasehlobo siyikho konke. Buyisa isigqi. (Yile ndlela esenza ngayo)
<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>
Oda
Shintsha ukuhleleka kokuqukethwe ezintweni zemidiya ngokushintsha i-HTML ngokwayo, noma ngokwengeza i-flexbox CSS yangokwezifiso ukuze usethe order
isakhiwo (kunombolo ephelele oyikhethayo).
Into yemidiya
Ngiyazi kuzoba khona umhlatshelo kodwa inani lelo. Unesibindi sokungivumela ngibone ipigogo lakho? Yiba yiphupho lakho lentsha kulobubusuku. Ehhe, ngiyakubona. Akusekho ukubuyela emuva. Yebo, siwengeze amakhadi ethu esikweletu futhi saxoshwa ebha. Ngakho-ke ake ngikufake isudi yakho yokuzalwa. Ungase uthande uma uhlangana naye. Ingabe izwe entendeni yesandla sakho. Ungavumeli ubukhulu bukwehlise, o, oh yebo. Manje sikhuluma ngezinkanyezi, sithola izinzipho zethu, sonke isi-Japanese-y. Ngenze i-Aphrodite yakho.
<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>
Uhlu lwemidiya
Ngenxa yokuthi into yemidiya inezidingo ezimbalwa zesakhiwo, ungasebenzisa lawa makilasi ohlwini lwezinto ze-HTML. Kweyakho <ul>
noma <ol>
, engeza .list-unstyled
ukususa noma yiziphi izitayela zohlu oluzenzakalelayo lwesiphequluli, bese usebenza .media
ku- <li>
s yakho. Njengenjwayelo, sebenzisa izinsiza zokuhlukanisa izikhala lapho kudingeka khona ukuze ushune kahle.
-
Into yemidiya esekwe ohlwini
Wonke amantombazane ami we-chanel ye-vintage baby. Ngakho ungathola ikhekhe lakho. Kulobubusuku, kulobubusuku, kulobubusuku, ngihamba emoyeni. Ukugwinya kancane uvalo lwami, yebo yebo. Ikhula ngokushesha ibe umbani. Kuyashisa futhi kuyasinda, 'Kuze kuse. Leyo nganekwane ephetha ngengcweti egqoke izikhali ezicwebezelayo. Lisinda ikhanda elithwele umqhele.
-
Into yemidiya esekwe ohlwini
Mhlawumbe isizathu sokuthi kungani yonke iminyango ivaliwe. Ngoba uma usungowami, uma usungowami. Yiba yiphupho lakho lentsha kulobubusuku. Lisinda ikhanda elithwele umqhele. Akulona ngisho iholidi, akukho ukubungazwa. Isiphepho esiphelele, isiphepho esiphelele.
-
Into yemidiya esekwe ohlwini
Unesibindi sokungivumela ngibone ipigogo lakho? Akusekho ukubuyela emuva. Lesi yisikhathi sokugcina usho, ngemva komugqa wokugcina owugqashulayo. Ekugcineni kwakho konke.
<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>