in English

Objekti mediatik

Dokumentacioni dhe shembujt për objektin mediatik të Bootstrap për të ndërtuar komponentë shumë të përsëritur si komentet në blog, cicërima dhe të ngjashme.

Shembull

Objekti i medias ndihmon në ndërtimin e komponentëve kompleksë dhe të përsëritur ku disa media pozicionohen krahas përmbajtjes që nuk mbështillet rreth medias së përmendur. Plus, ai e bën këtë me vetëm dy klasa të kërkuara falë flexbox.

Më poshtë është një shembull i një objekti të vetëm mediatik. Kërkohen vetëm dy klasa - mbështjellja .mediadhe rrethimi i .media-bodypërmbajtjes suaj. Mbushja dhe diferenca opsionale mund të kontrollohen nëpërmjet shërbimeve të ndarjes .

Placeholder 64x64
Titulli i medias

A do të bëni të njëjtën gjë për mua? Është koha për t'u përballur me muzikën nuk jam më muza juaj. Dëgjova se është bukur, bëhu gjyqtari dhe vajzat e mia do të votojnë. Mund të ndjej një feniks brenda meje. Qielli është xheloz për dashurinë tonë, engjëjt po qajnë nga lart. Po, ju më çoni në 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: Elementet inline nuk trajtohen si artikuj fleksibël

Internet Explorer 10-11 nuk i kthen elementet inline si lidhjet ose imazhet (ose ::beforepseudo ::after-elementet) si elementë fleksibël. Zgjidhja e vetme është të vendosni një displayvlerë jo-inline (p.sh., block, inline-block, ose flex). Ne sugjerojmë përdorimin .d-flexe një prej shërbimeve tona të ekranit si një rregullim të lehtë.

Burimi: Flexbugs në GitHub

Folezimi

Objektet mediatike mund të vendosen pafundësisht, megjithëse ju sugjerojmë të ndaloni në një moment. Vendi i mbivendosur .mediabrenda .media-bodyobjektit mediatik prind.

Placeholder 64x64
Titulli i medias

Qëndrimi në vijën e parë kur bombat fillojnë të bien. Qielli është xheloz për dashurinë tonë, engjëjt po qajnë nga lart. Nuk mund t'ju zëvendësojë me një milion unaza. Djalë, kur të jesh me mua do të të jap një shije. Nuk ka kthim prapa. Para se të më takoje, isha mirë, por gjërat ishin disi të rënda. E rëndë është koka që mban kurorën.

Placeholder 64x64
Titulli i medias

Përshëndetje të dashur, le të bëjmë një udhëtim. Po, ne i bëjmë engjëjt të qajnë, duke rënë shi mbi tokë nga lart. Ju jap diçka të mirë për të festuar. Më kafshoja gjuhën dhe mbaja frymën. Do të të rrah zemrën me xhinset e mia të ngushta. Ndërsa marshoj vetëm në një ritëm tjetër. Vera pas shkollës së mesme kur u takuam për herë të parë. Ju jeni kaq hipnotizues, a mund të jeni djalli? A mund të jesh një engjëll? Është koha për të nxjerrë jashtë balonat e mëdha. Mendova se isha përjashtim. Bikini, kungull i njomë, Martini, pa këlysh.

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

Radhitje

Media në një objekt mediatik mund të përafrohet me shërbimet flexbox në krye (parazgjedhje), në mes ose në fund të .media-bodypërmbajtjes suaj.

Placeholder 64x64
Media e rreshtuar në krye

Unë do ta vendos në koma. Ju jepni njëqind arsye pse, dhe ju thoni se me të vërtetë do të provoni. Kështu që u ula i qetë, u pajtova me mirësjellje. Përshtatem për betejën time të kurorëzimit. Dhe në ditëlindjen time të 18-të ne bëmë tatuazhe të ngjashme. Pra très chic, po, ajo është një klasike. Jam gati për rrugën më pak të udhëtuar.

Unë jam duke ecur në ajër (sonte). Por me këmbë në tokë. Jeni origjinal, nuk mund të zëvendësohet. Por në një jetë tjetër do të isha vajza jote. Shkuam me makinë në Cali dhe u demë në plazh. Mund të kërcejmë, derisa të vdesim, ti dhe unë do të jemi të rinj përgjithmonë. Të pashë në qendër të qytetit duke kënduar 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 e linjës qendrore

Ajo do të bëhet e ftohtë si një frigorifer. Në fund të gjithë kësaj. Duke thumbuar si bletë i fitova vijat e mia. Bikini, kungull i njomë, Martini, pa këlysh. Shpresoj të keni një oreks të shëndetshëm. Mund të kërcejmë, derisa të vdesim, ti dhe unë do të jemi të rinj përgjithmonë. Ne po jetojmë jetën. Po e bëjmë siç duhet. Fjala në rrugë, ke diçka për të më treguar, mua.

Dëshiron ta shoh shfaqjen në 3D, një film. Thonë, ki frikë se nuk je si të tjerët, dashnor futurist. Hape zemrën. Kështu që u ula i qetë, u pajtova me mirësjellje. Mbrëmja e së premtes së kaluar. Po, je me fat nëse je në aeroplanin e saj. Unë do të jem dhurata juaj, do t'ju jap diçka të mirë për të festuar.

<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 e rreshtuar nga poshtë

Hajde, le të shpërthejnë ngjyrat e tua. Unë mund ta ndjej këtë dritë që është brenda meje. Gjithë natën po luajnë, kënga jote. Nga Tokio në Meksikë, në Rio. Nuk ka kthim prapa. Por me këmbë në tokë. Magjike, plot ngjyra, zoti Mister, ee. ADN e ndryshme, ata nuk ju kuptojnë.

Por me këmbë në tokë. Ajo e ka atë, je ne sais quoi, ju e dini atë. Unë mund të shoh shkrimin në mur. Djemtë thyejnë qafën duke u përpjekur të hedhin një vështrim të vogël. Më merr, ta-ta-më merr. Hape zemrën. Mendova se isha përjashtim. Bum, bum, bum. Plazhi i Venecias dhe Palm Springs, vera është gjithçka. Kthejeni ritmin. (Kështu bëjmë ne)

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

Rendit

Ndryshoni rendin e përmbajtjes në objektet mediatike duke modifikuar vetë HTML, ose duke shtuar disa flexbox CSS të personalizuara për të vendosur ordervetinë (në një numër të plotë sipas zgjedhjes suaj).

Objekti mediatik

E di që do të ketë sakrifica, por ky është çmimi. A je aq i guximshëm sa të më lejosh të shoh palloin tënd? Bëhu ëndrra jote adoleshente sonte. Uh-huh, të shoh. Nuk ka kthim prapa. Po, ne maksimizuam kartat tona të kreditit dhe u dëbuam nga lokali. Kështu që më lër të të marr me kostumin e ditëlindjes. Mund të bini në dashuri kur ta takoni. E kishe botën në pëllëmbë të duarve. Mos lejoni që madhështia t'ju rrëzojë, oh, oh po. Tani po flasim për astrologjinë, duke i bërë thonjtë, të gjitha japoneze-y. Më bëj Afërditën tënde.

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>

Lista e mediave

Për shkak se objekti mediatik ka kaq pak kërkesa strukturore, ju mund t'i përdorni këto klasa edhe në elementët e listës HTML. Në tuaj <ul>ose <ol>, shtoni .list-unstyledpër të hequr çdo stil të parazgjedhur të listës së shfletuesit dhe më pas aplikojeni .media<li>s. Si gjithmonë, përdorni shërbimet e ndarjes kudo që të jetë e nevojshme për të rregulluar mirë.

  • Placeholder 64x64
    Objekti mediatik i bazuar në listë

    Të gjitha vajzat e mia fëmijë Chanel vintage. Kështu që ju mund të keni tortën tuaj. Sonte, sonte, sonte, po eci në ajër. Ngadalë duke gëlltitur frikën time, po, po. Duke u rritur shpejt në një rrufe. Kaq e nxehtë dhe e rëndë, 'Deri në agim. Ajo përrallë që përfundon me një kalorës me forca të blinduara të shndritshme. E rëndë është koka që mban kurorën.

  • Placeholder 64x64
    Objekti mediatik i bazuar në listë

    Ndoshta një arsye pse të gjitha dyert janë të mbyllura. Sepse një herë je i imi, një herë je i imi. Bëhu ëndrra jote adoleshente sonte. E rëndë është koka që mban kurorën. Nuk është as festë, asgjë për të festuar. Një stuhi e përsosur, stuhi e përsosur.

  • Placeholder 64x64
    Objekti mediatik i bazuar në listë

    A je aq i guximshëm sa të më lejosh të shoh palloin tënd? Nuk ka kthim prapa. Kjo është hera e fundit që thua, pas rreshtit të fundit që thyen. Në fund të gjithë kësaj.

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