in English

Media object

Dokumentasyon at mga halimbawa para sa media object ng Bootstrap na bumuo ng mga paulit-ulit na bahagi tulad ng mga komento sa blog, tweet, at iba pa.

Halimbawa

Ang media object ay tumutulong sa pagbuo ng mga kumplikado at paulit-ulit na bahagi kung saan ang ilang media ay nakaposisyon sa tabi ng nilalaman na hindi bumabalot sa nasabing media. Dagdag pa, ginagawa nito ito sa dalawang kinakailangang klase lamang salamat sa flexbox.

Nasa ibaba ang isang halimbawa ng isang bagay ng media. Dalawang klase lang ang kailangan—ang pagbabalot .mediaat ang .media-bodypaligid ng iyong nilalaman. Maaaring kontrolin ang opsyonal na padding at margin sa pamamagitan ng mga spacing utilities .

Placeholder 64x64
Media heading

Gagawin mo rin ba para sa akin? Oras na para harapin ang musikang hindi na ako ang iyong muse. Heard it's beautiful, be the judge and my girls gonna take a vote. May nararamdaman akong phoenix sa loob ko. Ang langit ay naninibugho sa ating pag-ibig, ang mga anghel ay umiiyak mula sa itaas. Oo, dinadala mo ako sa 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: Ang mga inline na elemento ay hindi itinuturing bilang mga flex na item

Ang Internet Explorer 10-11 ay hindi nagre-render ng mga inline na elemento tulad ng mga link o larawan (o ::beforeat ::aftermga pseudo-element) bilang mga flex na item. Ang tanging solusyon ay ang magtakda ng hindi inline na displayhalaga (hal., block, inline-block, o flex). Iminumungkahi namin ang paggamit .d-flexng , isa sa aming mga kagamitan sa pagpapakita , bilang isang madaling pag-aayos.

Pinagmulan: Flexbugs sa GitHub

Pugad

Ang mga bagay sa media ay maaaring walang katapusan na naka-nest, kahit na iminumungkahi naming huminto ka sa isang punto. Lugar na naka-nest .mediasa loob .media-bodyng isang parent media object.

Placeholder 64x64
Media heading

Nakatayo sa frontline kapag nagsimulang bumagsak ang mga bomba. Ang langit ay naninibugho sa ating pag-ibig, ang mga anghel ay umiiyak mula sa itaas. Hindi kita mapapalitan ng isang milyong singsing. Boy, kapag kasama kita titikim kita. Wala na itong balikan. Bago mo ako nakilala okay lang ako pero medyo mabigat. Mabigat ang ulo na nagsusuot ng korona.

Placeholder 64x64
Media heading

Pagbati mga mahal sa buhay maglakbay tayo. Oo, pinaiyak natin ang mga anghel, na nagpaulan sa lupa mula sa itaas. Bigyan ka ng magandang ipagdiwang. Kinakagat ko ang aking dila at pinipigilan ang aking hininga. I'm ma get your heart racing in my skin-tight jeans. Habang nagmamartsa akong mag-isa sa ibang beat. Summer after high school nung una tayong nagkakilala. Napaka-hypnotizing mo, ikaw kaya ang demonyo? Maaari ka bang maging isang anghel? Oras na para ilabas ang malalaking lobo. Akala ko ako ang exception. Bikinis, zucchinis, Martinis, walang 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>

Pag-align

Maaaring ihanay ang media sa isang media object sa mga flexbox utility sa itaas (default), gitna, o dulo ng iyong .media-bodycontent.

Placeholder 64x64
Top-aligned na media

Ilalagay ko siya sa coma. Nagbibigay ka ng isang daang dahilan kung bakit, at sasabihin mong susubukan mo talaga. Kaya tahimik akong umupo, sumang-ayon nang magalang. Angkop para sa aking koronang laban. At noong ika-18 na Kaarawan ko ay nagka-matching tattoo kami. So très chic, yeah, classic siya. Handa na ako sa kalsadang hindi gaanong nilakbay.

Naglalakad ako sa ere (ngayong gabi). Pero down to earth. Ikaw ay orihinal, hindi maaaring palitan. Ngunit sa ibang buhay ako ay magiging babae mo. Nagdrive kami papuntang Cali at naglasing sa beach. Maaari tayong sumayaw, hanggang sa mamatay, ikaw at ako, ay magiging bata magpakailanman. Nakita kita sa downtown na kumakanta ng 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 na nakahanay sa gitna

Magiging malamig siya bilang isang freezer. Sa e-end ng lahat. Nakatutuya tulad ng isang pukyutan nakuha ko ang aking mga guhitan. Bikinis, zucchinis, Martinis, walang weenies. Sana magkaroon ka ng malusog na gana. Maaari tayong sumayaw, hanggang sa mamatay, ikaw at ako, ay magiging bata magpakailanman. Buhay tayo. Ginagawa namin ito ng tama. Salita sa kalye, mayroon kang ipapakita sa akin, sa akin.

Gustong makita ang palabas sa 3D, isang pelikula. Sabi nila, matakot ka hindi ka tulad ng iba, futuristic lover. Buksan mo ang iyong puso. Kaya tahimik akong umupo, sumang-ayon nang magalang. Noong nakaraang Biyernes ng gabi. Oo, swerte ka kung nasa eroplano ka niya. Ako ang magiging regalo mo, bibigyan kita ng magandang ipagdiwang.

<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
Bottom-aligned na media

Halika, hayaan ang iyong mga kulay na pumutok. Nararamdaman ko itong liwanag na nasa loob ko. Magdamag silang tumutugtog, iyong kanta. Mula Tokyo hanggang Mexico, hanggang Rio. Wala na itong balikan. Pero down to earth. Magical, colorful, Mr. Mystery, ee. Ibang DNA, hindi ka nila maintindihan.

Pero down to earth. Nakuha niya iyon, je ne sais quoi, alam mo iyon. Kitang kita ko ang nakasulat sa dingding. Ang mga lalaki ay binali ang kanilang mga leeg at sinubukang gumapang ng kaunting sneak peek. Kunin mo ako, ta-ta-kunin mo ako. Buksan mo ang iyong puso. Akala ko ako ang exception. Boom Boom Boom. Venice beach at Palm Springs, summertime ang lahat. Ibalik ang beat. (Ganito ang ginagawa namin)

<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>

Umorder

Baguhin ang pagkakasunud-sunod ng nilalaman sa mga media object sa pamamagitan ng pagbabago sa mismong HTML, o sa pamamagitan ng pagdaragdag ng ilang custom na flexbox CSS upang itakda ang orderproperty (sa isang integer na iyong pinili).

Media object

Alam kong may sakripisyo pero yun ang kapalit. Matapang ka ba para makita ko ang iyong paboreal? Maging iyong teenage dream ngayong gabi. Uh-huh, nakikita kita. Wala na itong balikan. Oo, pinalaki namin ang aming mga credit card at pinaalis kami sa bar. Kaya hayaan mo akong isuot ka sa iyong birthday suit. Baka ma-inlove ka kapag nakilala mo siya. Nasa iyong palad ang mundo. Huwag mong hayaang masira ka ng kadakilaan, oh, oh oo. Ngayon pinag-uusapan natin ang astrolohiya, ginagawa ang ating mga kuko, lahat ng Japanese-y. Gawin mo akong Aphrodite.

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>

Listahan ng media

Dahil ang media object ay may napakakaunting mga kinakailangan sa istruktura, maaari mo ring gamitin ang mga klase sa listahan ng mga elemento ng HTML. Sa iyong <ul>o <ol>, idagdag ang .list-unstyledupang alisin ang anumang mga default na istilo ng listahan ng browser, at pagkatapos ay ilapat .mediasa iyong <li>s. Gaya ng nakasanayan, gumamit ng mga spacing utilities kung saan man kailangan para maayos.

  • Placeholder 64x64
    Media object na nakabatay sa listahan

    All my girls vintage Chanel baby. Kaya maaari mong makuha ang iyong cake. Ngayong gabi, ngayong gabi, ngayong gabi, naglalakad ako sa hangin. Dahan-dahang nilalamon ang takot ko, yeah yeah. Mabilis na lumaki sa isang kidlat. Napakainit at mabigat, 'Hanggang madaling araw. Ang fairy tale na iyon ay nagtatapos sa isang knight in shining armor. Mabigat ang ulo na nagsusuot ng korona.

  • Placeholder 64x64
    Media object na nakabatay sa listahan

    Siguro dahilan kung bakit sarado lahat ng pinto. Dahil kapag akin ka, kapag akin ka na. Maging iyong teenage dream ngayong gabi. Mabigat ang ulo na nagsusuot ng korona. Hindi man holiday, walang dapat ipagdiwang. Isang perpektong bagyo, perpektong bagyo.

  • Placeholder 64x64
    Media object na nakabatay sa listahan

    Matapang ka ba para makita ko ang iyong paboreal? Wala na itong balikan. Ito ang huling beses na sasabihin mo, pagkatapos ng huling linya na iyong sinira. Sa e-end ng lahat.

<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>