in English

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 .mediandi .media-bodykuzungulira zomwe zili. Posankha padding ndi malire amatha kuwongoleredwa pogwiritsa ntchito masitayilo .

Placeholder 64x64
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 ::beforendi ::afterzinthu zabodza) ngati zinthu zosinthika. Njira yokhayo yothetsera ndikukhazikitsa mtengo wosakhala pamzere display(mwachitsanzo, block, , inline-block, kapena flex). Tikukulangizani kuti mugwiritse ntchito .d-flexchimodzi 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 .mediamkati .media-bodymwa chinthu chapa media.

Placeholder 64x64
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.

Placeholder 64x64
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-bodyzomwe muli.

Placeholder 64x64
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>
Placeholder 64x64
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>
Placeholder 64x64
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 orderkatunduyo (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.

Placeholder 64x64
<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-unstyledkuti muchotse masitayelo aliwonse osasintha osatsegula, ndiyeno gwiritsani ntchito .mediaku <li>s. Monga nthawi zonse, gwiritsani ntchito zida zotalikirana paliponse pomwe pakufunika kuti muyimbe bwino.

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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.

  • Placeholder 64x64
    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>