in English

Objè medya yo

Dokimantasyon ak egzanp pou objè medya Bootstrap pou konstwi eleman ki trè repetitif tankou kòmantè blog, tweets, ak tankou.

Egzanp

Objè medya a ede konstwi konpozan konplèks ak repetitif kote kèk medya yo pozisyone ansanm ak kontni ki pa vlope nan medya di yo. Anplis de sa, li fè sa ak sèlman de klas obligatwa gras a flexbox.

Anba a se yon egzanp yon sèl objè medya. Se sèlman de klas obligatwa—anbalaj .mediala ak .media-bodyalantou kontni ou. Opsyonèl padding ak maj ka kontwole atravè sèvis piblik espas .

Placeholder 64x64
Medya tit

Èske w ap fè menm bagay la pou mwen? Li lè poum fè fas ak mizik la mwen pa miz ou ankò. Tande li bèl, se pou jij la ak ti fi mwen yo pral pran yon vòt. Mwen ka santi yon phoenix anndan mwen. Syèl la fè jalouzi pou lanmou nou, zanj yo ap kriye anwo. Wi, ou mennen m 'nan utopi.

<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: Eleman Inline yo pa trete kòm atik flex

Internet Explorer 10-11 pa rann eleman inline tankou lyen oswa imaj (oswa ::beforeak ::afterpseudo-eleman) kòm atik fleksib. Sèl solisyon an se mete yon displayvalè ki pa aliye (pa egzanp, block, inline-block, oswa flex). Nou sijere pou w itilize .d-flex, youn nan sèvis piblik ekspozisyon nou yo , kòm yon ranje fasil.

Sous: Flexbugs sou GitHub

Nidifikasyon

Objè medya yo ka enfiniman enbrike, menm si nou sijere ou sispann nan kèk pwen. Mete enbrike .medianan .media-bodyyon objè medya paran.

Placeholder 64x64
Medya tit

Kanpe sou liy lan lè bonm yo kòmanse tonbe. Syèl la fè jalouzi pou lanmou nou, zanj yo ap kriye anwo. Pa ka ranplase ou ak yon milyon bag. Ti gason, lè'w avè'm map ba'w goute. Pa gen tounen. Anvan ou rankontre m 'mwen te byen men bagay yo te yon jan lou. Lou se tèt la ki mete kouwòn lan.

Placeholder 64x64
Medya tit

Bonjou mezanmi ann fè yon vwayaj. Wi, nou fè zanj kriye, lapli desann sou tè a soti anwo. Ba ou yon bagay bon pou selebre. Mwen te konn mòde lang mwen epi kenbe souf mwen. Mwen pral fè kè w bat nan abako ki byen sere. Pandan m ap mache poukont mwen nan yon ritm diferan. Ete apre lekòl segondè lè nou te rankontre premye. Ou tèlman ipnotize, ou ta ka dyab la? Èske ou ta ka yon zanj? Li lè yo pote gwo balon yo. Te panse ke mwen te eksepsyon an. Bikinis, zukèini, Martinis, pa gen 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>

Aliyman

Medya nan yon objè medya yo ka aliyen ak sèvis piblik flexbox sou tèt (default), mitan, oswa nan fen .media-bodykontni ou.

Placeholder 64x64
Medya ki aliye tèt yo

Mwen pral mete l nan koma. Ou bay yon santèn rezon poukisa, epi ou di ou reyèlman pral eseye. Se konsa, mwen te chita trankil, dakò avèk politès. Suiting moute pou batay kouwòn mwen an. Ak nan 18yèm anivèsè nesans mwen nou te resevwa tatoo matche. Se konsa, trè chik, wi, li se yon klasik. Mwen pare pou wout la mwens vwayaje.

Mwen ap mache sou lè (aswè a). Men, desann sou latè. Ou orijinal, ou pa ka ranplase. Men, nan yon lòt lavi mwen ta dwe fi ou. Nou te kondui Cali epi nou te sou plaj la. Nou ka danse, jiskaske nou mouri, ou menm ak mwen, nou pral jèn pou tout tan. Te wè ou anba lavil chante Blues yo.

<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
Medya ki aliye ak sant lan

Li pral frèt tankou yon frizè. Nan eh-fen li tout. Pike tankou yon myèl mwen te touche bann mwen. Bikinis, zukèini, Martinis, pa gen weenies. Mwen espere ou gen yon apeti an sante. Nou ka danse, jiskaske nou mouri, ou menm ak mwen, nou pral jèn pou tout tan. Nou ap viv lavi a. Nou ap fè li byen. Pawòl nan lari a, ou gen yon bagay pou montre m ', mwen.

Ou vle wè montre nan 3D, yon fim. Yo di, pè ou pa tankou lòt yo, lover futurist. Louvri kè w. Se konsa, mwen te chita trankil, dakò avèk politès. Vandredi pase swa. Wi, ou gen chans si ou nan avyon li. Mwen pral kado ou, ba ou yon bagay ki bon pou selebre.

<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
Medya ki aliye anba a

Vini non, kite koulè ou pete. Mwen ka santi limyè sa a ki anndan mwen. Tout nwit lan yo ap jwe, chante ou. Soti nan Tokyo rive nan Meksik, nan Rio. Pa gen tounen. Men, desann sou latè. Majik, kolore, Mesye Mistè, ee. ADN diferan, yo pa konprann ou.

Men, desann sou latè. Li gen sa, je ne sais quoi, ou konnen li. Mwen ka wè ekriti sou miray la. Ti gason yo kase kou yo eseye ranpe yon ti kout je. Pran mwen, ta-ta-pran mwen. Louvri kè w. Te panse ke mwen te eksepsyon an. Boom, boom, boom. Venice beach ak Palm Springs, sezon ete se tout bagay. Pote bat la tounen. (Se konsa nou fè)

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

Lòd

Chanje lòd kontni nan objè medya yo lè w modifye HTML li menm, oswa lè w ajoute kèk CSS flexbox koutim pou mete orderpwopriyete a (nan yon nonb nonb ou chwazi).

Objè medya yo

Mwen konnen pral gen sakrifis men se pri a. Èske w gen kouraj ase pou w kite m wè Peacock ou a? Fè rèv jèn ou aswè a. Uh-huh, mwen wè ou. Pa gen tounen. Yeah, nou maxed kat kredi nou yo epi yo te mete deyò nan ba a. Se konsa, kite m mete ou nan kostim anivèsè nesans ou. Ou ka tonbe damou lè ou rankontre li. Te gen mond lan nan pla men ou. Pa kite grandè a desann ou, oh, oh yeah. Koulye a, nou pale Astwoloji, jwenn klou nou te fè, tout Japonè-y. Fè m 'Afrodit ou.

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>

Lis medya yo

Paske objè medya a gen anpil kondisyon estriktirèl, ou ka itilize tou klas sa yo sou lis eleman HTML. Sou ou <ul>oswa <ol>, ajoute .list-unstyledpou retire nenpòt estil navigatè defo lis, epi answit aplike .medianan <li>s ou. Kòm toujou, sèvi ak sèvis piblik espas kèlkeswa kote sa nesesè pou amann.

  • Placeholder 64x64
    Objè medya ki baze sou lis

    Tout ti fi mwen yo ansyen Chanel ti bebe. Se konsa, ou ka gen gato ou. Aswè a, aswè a, aswè a, m ap mache sou lè. Dousman ap vale laperèz mwen, wi, wi. Ap grandi vit nan yon boulon nan zèklè. Se konsa cho ak lou, ' Jiska douvanjou. Istwa sa a ki fini ak yon chevalye nan zam klere. Lou se tèt la ki mete kouwòn lan.

  • Placeholder 64x64
    Objè medya ki baze sou lis

    Petèt yon rezon ki fè tout pòt yo fèmen. Kòz yon fwa ou se pou mwen, yon fwa ou se pou mwen. Fè rèv jèn ou aswè a. Lou se tèt la ki mete kouwòn lan. Se pa menm yon jou fèt, pa gen anyen pou selebre. Yon tanpèt pafè, tanpèt pafè.

  • Placeholder 64x64
    Objè medya ki baze sou lis

    Èske w gen kouraj ase pou w kite m wè Peacock ou a? Pa gen tounen. Sa a se dènye fwa ou di, apre dènye liy ou kraze. Nan eh-fen li tout.

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