in English

Media object

Ny antontan-taratasy sy ny ohatra ho an'ny haino aman-jery Bootstrap mba hananganana singa miverimberina toy ny fanehoan-kevitry ny bilaogy, sioka, sy ny toy izany.

OHATRA

Ny zavatra media dia manampy amin'ny fananganana singa sarotra sy miverimberina izay apetraka miaraka amin'ny votoaty tsy mihodinkodina amin'ireo media ireo ny haino aman-jery sasany. Fanampin'izay, manao izany miaraka amin'ny kilasy roa ilaina ihany izy noho ny flexbox.

Ity ambany ity ny ohatra iray amin'ny zavatra media tokana. Kilasy roa ihany no ilaina—ny famonosana .mediasy ny .media-bodymanodidina ny atiny. Azo fehezina amin'ny alàlan'ny fitaovana fanasan -damba ny padding sy margin azo fehezina .

Placeholder 64x64
Lohatenin'ny haino aman-jery

Hanao toy izany koa ve ianao? Fotoana hiatrehana ny mozika fa tsy muse anao intsony aho. Henoko fa tsara izany, aoka ho mpitsara ary hifidy ny zanako vavy. Mahatsapa phoenix ato anatiko aho. Saro-piaro amin’ny fitiavantsika ny lanitra, mitaraina avy any ambony ny anjely. Eny, entinao any amin'ny utopia aho.

<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: Ny singa an-tsipika dia tsy raisina ho toy ny singa flex

Ny Internet Explorer 10-11 dia tsy mametraka singa an-tsipika toy ny rohy na sary (na ::beforesy ::afterpseudo-elements) ho zavatra flex. Ny hany vahaolana dia ny fametrahana displaysanda tsy misy andalana (oh, block, inline-block, na flex). Manoro hevitra izahay hampiasa .d-flex, iray amin'ireo fitaovana fampirantianay , ho fanamboarana mora.

Loharano: Flexbugs amin'ny GitHub

akany

Ny zavatra fampahalalam-baovao dia azo apetraka tsy misy fetra, na dia manoro hevitra anao aza izahay hijanona amin'ny fotoana iray. Apetraho .mediaao anatin'ny .media-bodyzavatra fampitam-baovaon'ny ray aman-dreny.

Placeholder 64x64
Lohatenin'ny haino aman-jery

Mijoro eo amin'ny laharana voalohany rehefa manomboka mianjera ny baomba. Saro-piaro amin’ny fitiavantsika ny lanitra, mitaraina avy any ambony ny anjely. Tsy afaka manolo anao amin'ny peratra iray tapitrisa. Zazalahy, rehefa miaraka amiko ianao dia hanome tsiro anao aho. Tsy misy miverina. Talohan'ny nihaonanao tamiko dia salama aho fa somary mavesatra ny zavatra. Mavesatra ny loha mitondra ny satroboninahitra.

Placeholder 64x64
Lohatenin'ny haino aman-jery

Miarahaba havan-tiana andao hanao dia. Eny, mampitomany anjely isika, milatsaka amin’ny tany avy any ambony. Omeo zavatra tsara hankalazana anao. Nanaikitra ny lelako aho ary nitazona fofonaina. Mampihetsi-po ny fonao amin'ny pataloha jeans aho. Raha mandeha irery aho amin'ny kapoka hafa. Ny fahavaratra taorian'ny sekoly ambaratonga faharoa fony izahay nihaona voalohany. Tena hypnotize ianao, mety ho devoly ve ianao? Mety ho anjely ve ianao? Fotoana hamoahana ireo balaonina lehibe izao. Nihevitra aho fa izaho no maningana. Bikinis, zucchinis, Martinis, tsy misy 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>

Fanitsiana

Ny haino aman-jery amin'ny zavatra media dia azo ampifandraisina amin'ny fitaovana flexbox mankany amin'ny tampony (default), afovoany na faran'ny .media-bodyatiny.

Placeholder 64x64
Fampahalalam-baovao mifanandrify indrindra

Hataoko coma izy. Manome antony zato ianao, ary milaza ianao fa tena hanandrana. Dia nipetraka mangina aho, nanaiky tamim-panajana. Mifanaraka amin'ny ady satroboninahitra nataoko. Ary tamin'ny faha-18 taonako dia nahazo tatoazy mifanentana izahay. Tena très chic, eny, klasika izy. Vonona aho amin'ny lalana tsy dia lavitra loatra.

Mandeha an-habakabaka aho (anio alina). Fa midina an-tany. Original ianao, tsy azo soloina. Fa amin'ny fiainana hafa dia ho zanakao vavy aho. Nandeha fiara nankany Cali izahay ary mamo teny amoron-dranomasina. Afaka mandihy isika, mandra-pahafatintsika, izaho sy ianao, ho tanora mandrakizay. Nahita anao tao afovoan-tanàna nihira ny 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 mirindra afovoany

Hanjary mangatsiaka toy ny vata fampangatsiahana izy. Amin'ny faran'ny zava-drehetra. Nanindrona toy ny tantely aho nahazo ny dian-kapokako. Bikinis, zucchinis, Martinis, tsy misy weenies. Manantena aho fa ho salama tsara ianao. Afaka mandihy isika, mandra-pahafatintsika, izaho sy ianao, ho tanora mandrakizay. Miaina ny fiainana isika. Ataontsika tsara izany. Teny eny an-dalana, manana zavatra haseho ahy ianao, izaho.

Te-hijery ny fampisehoana amin'ny 3D, sarimihetsika. Hoy izy ireo, matahora fa tsy toy ny hafa ianao, tia futuristic. Sokafy ny fonao. Dia nipetraka mangina aho, nanaiky tamim-panajana. Zoma alina teo. Eny, tsara vintana ianao raha ao anaty fiaramanidina. Ho fanomezana ho anao aho, hanome anao zavatra tsara hankalazana anao.

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

Avia, avelao hipoaka ny lokonao. Tsapako ity hazavana ato anatiko ity. Milalao mandritra ny alina, ny hiranao. Avy any Tokyo ka hatrany Mexico, hatrany Rio. Tsy misy miverina. Fa midina an-tany. Mahagaga, miloko, Andriamatoa Mistery, ee. ADN samy hafa, tsy azony ianao.

Fa midina an-tany. Manana an'izany izy, je ne sais quoi, fantatrao izany. Hitako ny soratra teo amin’ny rindrina. Tapatapaka ny tendany ny ankizilahy manandrana mitsambikina kely. Raiso aho, ta-ta-raiso aho. Sokafy ny fonao. Nihevitra aho fa izaho no maningana. Boom, boom, boom. Tora-pasika Venice sy Palm Springs, fahavaratra no zava-drehetra. Avereno ny kapoka. (Izany no ataonay)

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

mba

Ovay ny filaharan'ny votoaty amin'ny zavatra media amin'ny alàlan'ny fanovana ny HTML mihitsy, na amin'ny fampidirana CSS flexbox manokana mba hametrahana ilay orderfananana (amin'ny isa iray nofidinao).

Media object

Fantatro fa hisy ny sorona fa izay no vidiny. Sahy ve ianao hamela ahy hahita ny vorombolanao? Aoka ianao ho nofinofin'ny zatovo anio alina. Eh, hitako ianao. Tsy misy miverina. Eny, nampitombo ny carte de crédit izahay ary noroahina hiala tao amin'ny bar. Koa avelao aho haka anao amin'ny akanjonao amin'ny fitsingerenan'ny andro nahaterahanao. Mety ho raiki-pitia ianao rehefa mifankahita aminy. Teo am-pelatanan-tananao izao tontolo izao. Aza avela hanakana anao ny fahalehibiazana, oh, oh eny. Amin'izao fotoana izao isika dia miresaka momba ny astrolojia, manao ny hohontsika, Japoney-y rehetra. Ataovy Aphrodite aho.

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>

Lisitry ny media

Satria vitsy ny zavatra takiana ara-drafitra ny zavatra media, azonao atao koa ny mampiasa ireo kilasy ireo amin'ny lisitry ny singa HTML. Ao amin'ny <ul>na <ol>, ampio ny .list-unstyledhanesorana ny lisitry ny lisitry ny default amin'ny navigateur, ary ampiharo .mediaamin'ny <li>s. Toy ny mahazatra, ampiasao ny fitaovana fanamafisam-peo na aiza na aiza ilaina mba hanitsiana tsara.

  • Placeholder 64x64
    Zavatra media mifototra amin'ny lisitra

    Ny ankizivaviko taloha Chanel baby. Ka azonao atao ny mofomamy. Anio alina, anio alina, anio alina, mandeha amin'ny rivotra aho. Mitelina tsikelikely ny tahotro, eny eny. Mitombo haingana ho tselatra. Mafana sy mavesatra, 'Mandra-maraina. Ilay angano nifarana tamin'ny knight iray mitafy fiadiana mamirapiratra. Mavesatra ny loha mitondra ny satroboninahitra.

  • Placeholder 64x64
    Zavatra media mifototra amin'ny lisitra

    Angamba antony iray mahatonga ny varavarana rehetra hikatona. Satria raha vao ahy ianao, raha vao ahy ianao. Aoka ianao ho nofinofin'ny zatovo anio alina. Mavesatra ny loha mitondra ny satroboninahitra. Tsy fety akory, tsy misy hankalazaina. Rivo-doza tonga lafatra, tafio-drivotra tonga lafatra.

  • Placeholder 64x64
    Zavatra media mifototra amin'ny lisitra

    Sahy ve ianao hamela ahy hahita ny vorombolanao? Tsy misy miverina. Ity no fotoana farany hitenenanao, aorian'ny andalana farany tapaka. Amin'ny faran'ny zava-drehetra.

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