Media chinthu
Zolemba ndi zitsanzo zama media a Bootstrap kuti apange zinthu zobwerezabwereza monga ndemanga zamabulogu, ma tweets, ndi zina zotero.
Chitsanzo
Chinthu chawayilesi chimathandizira kupanga zida zovuta komanso zobwerezabwereza pomwe media zina zimayikidwa pambali zomwe sizimazungulira media. Kuphatikiza apo, imachita izi ndi makalasi awiri okha ofunikira chifukwa cha flexbox.
Pansipa pali chitsanzo cha chinthu chimodzi chapa media. Magulu awiri okha ndi omwe amafunikira - kukulunga .media
ndi .media-body
kuzungulira zomwe zili. Posankha padding ndi malire amatha kuwongoleredwa pogwiritsa ntchito masitayilo .
Mutu wa media
Kodi inunso mundichitire ine zomwezo? Yakwana nthawi yoti muyang'ane ndi nyimbo kuti sindinenso nyumba yanu yosungiramo zinthu zakale. Ndamva kuti ndizokongola, khalani woweruza ndipo atsikana anga adzavote. Ndikhoza kumva phoenix mkati mwanga. Kumwamba kumachita nsanje ndi chikondi chathu, angelo akulira kuchokera kumwamba. Eya, mumanditengera ku 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: Zinthu zamkati sizimatengedwa ngati zinthu zosinthika
Internet Explorer 10-11 sapereka zinthu zam'kati monga maulalo kapena zithunzi (kapena ::before
ndi ::after
zinthu zabodza) ngati zinthu zosinthika. Njira yokhayo yothetsera ndikukhazikitsa mtengo wosakhala pamzere display
(mwachitsanzo, block
, , inline-block
, kapena flex
). Tikukulangizani kuti mugwiritse ntchito .d-flex
chimodzi mwazinthu zowonetsera , ngati kukonza kosavuta.
Gwero: Flexbugs pa GitHub
Nesting
Zinthu zapa media zitha kukhazikitsidwa mosalekeza, ngakhale tikupangira kuti muyime nthawi ina. Malo omwe ali .media
mkati .media-body
mwa chinthu chapa media.
Mutu wa media
Kuyimirira kutsogolo pamene mabomba ayamba kugwa. Kumwamba kumachita nsanje ndi chikondi chathu, angelo akulira kuchokera kumwamba. Sindingathe kukulowetsani mphete miliyoni. Mnyamata, ukakhala ndi ine ndikulawitsa. Palibe kubwerera. Musanakumane ndi ine ndinali bwino koma zinthu zinali ngati zolemetsa. Wolemera ndi mutu umene wavala korona.
Mutu wa media
Moni okondedwa tiyeni tiyende. Inde, timapangitsa angelo kulira, kugwetsa mvula padziko lapansi kuchokera kumwamba. Akupatseni chinthu chabwino kuti mukondwerere. Ndinkangodziluma lilime ndikupuma. Ndikumva kuti mtima wako ukugunda mu jeans yanga yolimba kwambiri. Pamene ndikuguba ndekha ku kugunda kosiyana. Chilimwe titamaliza kusekondale titakumana koyamba. Ndiwe wonyenga kwambiri, kodi ungakhale mdierekezi? Kodi mungakhale mngelo? Yakwana nthawi yotulutsa mabuloni akulu. Ndinaganiza kuti ndine wosiyana. Bikinis, zukini, Martinis, palibe 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>
Kuyanjanitsa
Media mu media media imatha kulumikizidwa ndi zida za flexbox pamwamba (zosakhazikika), pakati, kapena kumapeto kwa .media-body
zomwe muli.
Ma media ogwirizana kwambiri
Ndimuika kukomoka. Mumapereka zifukwa zana, ndipo mumati muyeseradi. Choncho ndinakhala phee, ndikuvomera mwaulemu. Kukonzekera nkhondo yanga ya korona. Ndipo pa tsiku langa lobadwa la 18 tinali ndi ma tattoo ofanana. Kotero très chic, eya, iye ndi wapamwamba kwambiri. Ndine wokonzeka kuyenda pang'ono.
Ndikuyenda pamlengalenga (usiku uno). Koma pansi pano. Ndinu enieni, simungathe kusinthidwa. Koma m'moyo wina ndidzakhala mtsikana wanu. Tinapita ku Cali ndipo tinaledzera pagombe. Titha kuvina, mpaka kufa, iwe ndi ine, tidzakhala achichepere mpaka kalekale. Ndinakuwonani mtawuni mukuyimba 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>
Media zolumikizidwa pakati
Adzazizira ngati mufiriji. Pamapeto pake zonse. Kuluma ngati njuchi ndinapeza mikwingwirima yanga. Bikinis, zukini, Martinis, palibe weenies. Ndikukhulupirira kuti muli ndi njala yathanzi. Titha kuvina, mpaka kufa, iwe ndi ine, tidzakhala achichepere mpaka kalekale. Ife tikukhala moyo. Tikuchita bwino. Mawu pamsewu, muli ndi china choti mundiwonetse, ine.
Ndikufuna kuwona chiwonetserochi mu 3D, kanema. Amati, chitani mantha kuti simuli ngati ena, okonda zam'tsogolo. Tsegulani mtima wanu. Choncho ndinakhala phee, ndikuvomera mwaulemu. Usiku wa Lachisanu lapita. Inde, muli ndi mwayi ngati muli pa ndege yake. Ndikhala mphatso yanu, ndikupatseni china chake chabwino kuti musangalale.
<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>
Media yolunjika pansi
Bwerani, lolani mitundu yanu iphulike. Ndikutha kumva kuwala komwe kuli mkati mwanga. Usiku wonse iwo akusewera, nyimbo yanu. Kuchokera ku Tokyo kupita ku Mexico, kupita ku Rio. Palibe kubwerera. Koma pansi pano. Zamatsenga, zokongola, Bambo Mystery, ee. DNA yosiyana, samakumvetsani.
Koma pansi pano. Iye ali nazo izo, ine ne sais quoi, inu mukudziwa izo. Ndikutha kuwona zolembedwa pakhoma. Anyamatawo amathyola makosi try'na kukwawira pang'ono kuyang'ana. Nditengeni ine, ta-ta-nditengeni ine. Tsegulani mtima wanu. Ndinaganiza kuti ndine wosiyana. Boma, Boom, Boom. Venice Beach ndi Palm Springs, nthawi yachilimwe ndi chilichonse. Bweretsani kugunda. (Umu ndi momwe timachitira)
<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>
Order
Sinthani dongosolo la zomwe zili muzinthu zapa media posintha HTML yokha, kapena powonjezera CSS flexbox kuti muyike order
katunduyo (kuchuluka komwe mwasankha).
Media chinthu
Ndikudziwa kuti padzakhala nsembe koma mtengo wake ndi umenewo. Walimba mtima kuti ndiwone pikoko wako? Khalani maloto anu aunyamata usikuuno. U-nhu, ine ndikukuwonani inu. Palibe kubwerera. Eya, tidakulitsa makhadi athu angongole ndikuthamangitsidwa mu bar. Ndiye ndiloleni ndikupezereni suti yanu yobadwa. Mutha kugwa m'chikondi mukakumana naye. Dziko lapansi linali m'manja mwanu. Musalole kuti ukulu ukugwetseni pansi, o, eya. Tsopano tikulankhula zakuthambo, kupangitsa misomali yathu, tonse Japanese-y. Ndipange kukhala Aphrodite wako.
<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>
Media list
Chifukwa cha media media chili ndi zofunikira zochepa pamapangidwe, mutha kugwiritsanso ntchito makalasi awa pamndandanda wazinthu za HTML. Pa anu <ul>
kapena <ol>
, onjezani .list-unstyled
kuti muchotse masitayelo aliwonse osasintha osatsegula, ndiyeno gwiritsani ntchito .media
ku <li>
s. Monga nthawi zonse, gwiritsani ntchito zida zotalikirana paliponse pomwe pakufunika kuti muyimbe bwino.
-
Zotengera mndandanda wazofalitsa
Atsikana anga onse obadwa kwa Chanel mwana. Kotero inu mukhoza kutenga keke yanu. Usikuuno, usikuuno, usikuuno, ndikuyenda pamlengalenga. Pang'onopang'ono kumeza mantha anga, eya eya. Kukula mwachangu kukhala mphezi. Kutentha komanso kolemetsa, 'Kufikira mbandakucha. Nthano imeneyo yomaliza ndi msilikali wovala zida zonyezimira. Wolemera ndi mutu umene wavala korona.
-
Zotengera mndandanda wazofalitsa
Mwina chifukwa chake zitseko zonse zatsekedwa. Chifukwa ukakhala wanga, ukakhala wanga. Khalani maloto anu aunyamata usikuuno. Wolemera ndi mutu umene wavala korona. Si ngakhale tchuthi, palibe chokondwerera. Mkuntho wangwiro, mkuntho wangwiro.
-
Zotengera mndandanda wazofalitsa
Walimba mtima kuti ndiwone pikoko wako? Palibe kubwerera. Aka ndi nthawi yomaliza kunena, pambuyo pa mzere wotsiriza inu kuswa. Pamapeto pake zonse.
<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>